/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0
*/

/* Conteneur vidéo : centré et au-dessus du texte */
.single-video .entry-content .video-embed {
  width: 66% !important;
  max-width: 66% !important;
  margin: 0 auto 1.5rem auto !important;
  display: block !important;
  clear: both !important;
}

/* Empêche tout comportement "à côté du texte" */
.single-video .entry-content .video-embed,
.single-video .entry-content .video-embed * {
  float: none !important;
}

/* YouTube (iframe) : ratio propre, plus de troncage */
.single-video .entry-content .video-embed iframe {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* Vidéo privée (balise video) : ratio propre */
.single-video .entry-content .video-embed video {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* MediaElement (lecteur WP) : on force la largeur, mais on NE touche PAS aux hauteurs */
.single-video .entry-content .video-embed .wp-video,
.single-video .entry-content .video-embed .mejs-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile : pleine largeur */
@media (max-width: 768px) {
  .single-video .entry-content .video-embed {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* bouton connexion / deconnexion*/
.espace-prive-box {
  margin: 1rem 0;
}
.espace-prive-box .button {
  display: inline-block;
}

/**
 * Présentation grille des pays 
 * 
 */
.pays-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .pays-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pays-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pays-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;       /* hauteur des cartes */
  padding: 24px;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  background: rgba(255,255,255,.04);
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Assombrir l’image pour lisibilité */
.pays-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  border-radius: inherit;
}

.pays-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}

.pays-card__title {
  font-weight: 600;
  text-align: center;
}

/* Images UNIQUEMENT sur les cartes de la page hub /pays/ */
.pays-grid--hub .pays-card {
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  min-height: 180px;
}

/* Overlay sombre UNIQUEMENT sur le hub */
.pays-grid--hub .pays-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  border-radius: inherit;
}

.pays-grid--hub .pays-card__title {
  position: relative;
  z-index: 1;
  font-size: 2.0rem;
}
/* Images par pays UNIQUEMENT sur le hub */
.pays-grid--hub .pays-france {
  background-image: url('/wp-content/uploads/pays/france.jpg');
}
.pays-grid--hub .pays-japon {
  background-image: url('/wp-content/uploads/pays/japon.jpg');
}
.pays-grid--hub .pays-birmanie {
  background-image: url('/wp-content/uploads/pays/birmanie.jpg');
}
.pays-grid--hub .pays-etats-unis {
  background-image: url('/wp-content/uploads/pays/etats-unis.jpg');
}

.pays-grid--hub .pays-timetravel {
  background-image: url('/wp-content/uploads/pays/timetravel.jpg');
}
/* fin présentation grille pays */


/**
 * Présentation grille des périodes 
 * 
 */

.periodes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .periodes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .periodes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.periode-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 24px;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.periode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}

.periode-card__title {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: .05em;
  font-size: 1.3rem;
}
/* léger voile pour garantir lisibilité */
.periode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}



.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .videos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .videos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.video-card {
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}

.video-card__thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: rgba(0,0,0,.25);
  display: block;
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card__body {
  padding: 12px 12px 14px;
}

.video-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}

.video-card__meta {
  margin-top: 6px;
  font-size: .85rem;
  opacity: .75;
}


/* fin présentation grille période */



/**
 * 
 *  Présentation des Tags
 */

.tags-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 1rem 0;
}

.tag-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
  opacity: .92;
}

.tag-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 1;
}


/* fin présentation des tags */

/**
 * 
 * Présentation grille page Connexion 
 * 
 */

/* Layout global */
.conn-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 1.2rem 0;
	max-width: 820px;
}

@media (min-width: 900px){
  .conn-layout{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Cartes */
.conn-card{
  padding: 18px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.conn-card-title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Texte */
.conn-lead{
  margin: 0 0 14px;
  opacity: .92;
}

/* Boutons */
.conn-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Boutons en colonne */
.conn-actions--stack{
  flex-direction: column;
  align-items: flex-start;
}

.conn-actions--stack .button{
  width: 100%;
  max-width: 320px; /* ajuste si tu veux */
  text-align: center;
}

/* Formulaire profil: aligné à gauche */
.mp-form{
  margin: 0;
  max-width: 520px;
}

.mp-form p{
  text-align: left;
  margin: 0 0 12px;
}

.mp-form input{
  width: 100%;
  max-width: 520px;
}

.conn-group{
  margin-top: 10px;
  opacity: .9;
}

/* Réserver une place stable pour le lecteur */
.video-embed .wp-video,
.video-embed .mejs-container,
.video-embed video {
  width: 100% !important;
  height: auto !important;
}

/* Ratio 16:9 pour éviter le reflow */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}

.video-embed .wp-video,
.video-embed .mejs-container,
.video-embed video {
  position: absolute !important;
  inset: 0;
}

/**
 * Présentation grille vidéos à l'accueil
 * 
 */
.home-videos{ margin: 1.8rem 0 0; }
.home-videos__title{ margin: 0 0 .9rem; }

.home-videos__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 900px){
  .home-videos__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-videos__card{
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}

.home-videos__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.home-videos__thumb{
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}

.home-videos__thumb--empty{
  background: rgba(255,255,255,.06);
}

.home-videos__meta{
  padding: 12px 12px 14px;
}

.home-videos__name{
  font-weight: 600;
  line-height: 1.25;
}

.home-videos__subtitle {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: rgba(0,0,0,.7);
  opacity: .85;
}


/**
 * Style titre page accueil
 * 
 */
/* Copier exactement le style du titre de page Blocksy sur le titre Accueil */
.home .home-section-title {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Hériter explicitement du style de .page-title */
.home .home-section-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: #1fbac7ff;
  margin-bottom: 0.5rem;
}