/*
Theme Name: John Sammut Theme
Author: Saint-Clair Lefèvre
Description: Thème sur mesure basé sur la maquette HTML de John Sammut
Version: 1.0
*/

:root{
  --ink:#1A1A1A;
  --paper:#F1EAD9;
  --card:#FBF6EC;
  --moss:#8A6D1E;
  --brass:#C9A227;
  --mist:#9C9484;
  --hair: rgba(26,26,26,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
}
h1,h2,h3, .display{
  font-family:'Fraunces', serif;
  font-weight:440;
  margin:0;
  color:var(--ink);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass);
}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

/* NAV */
nav.site{
  position:sticky; top:0; z-index:20;
  background:rgba(241,234,217,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.logo{font-family:'Fraunces', serif; font-size:20px; font-weight:440; letter-spacing:0.01em;}
.nav-links{display:flex; gap:36px; font-size:14px;}
.nav-links a{text-decoration:none; color:var(--ink); opacity:0.75; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-right{display:flex; align-items:center; gap:24px;}
.lang{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--mist);}
.btn{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:13px;
  text-decoration:none; padding:11px 22px; border-radius:2px; border:1px solid var(--ink);
  transition:background .2s, color .2s;
}
.btn-dark{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-dark:hover{background:var(--moss); border-color:var(--moss);}
.btn-outline{background:transparent; color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}

/* HERO */
.hero{background:var(--ink); color:var(--paper); padding:96px 0 88px; position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.hero .eyebrow{color:#C9A227;}
.hero h1{color:var(--paper); font-size:52px; line-height:1.08; margin:18px 0 22px; font-weight:440;}
.hero h1 em{font-style:italic; color:#C9A227; font-weight:440;}
.hero p.lead{font-size:18px; color:#E3D9BD; max-width:480px; margin-bottom:34px;}
.hero .ctas{display:flex; gap:16px;}
.hero .ctas .btn-outline{border-color:#8A7B4E; color:var(--paper);}
.hero .ctas .btn-outline:hover{background:var(--paper); color:var(--ink);}
.hero .ctas .btn-dark{background:#C9A227; border-color:#C9A227; color:var(--ink);}
.hero .ctas .btn-dark:hover{background:#DFC167; border-color:#DFC167;}

/* Breathing circle */
.breath-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.breath-circle{
  width:220px; height:220px; border-radius:50%;
  border:1px solid #8A7B4E;
  display:flex; align-items:center; justify-content:center;
  animation: breathe 10s ease-in-out infinite;
}
.breath-circle .inner{
  width:70%; height:70%; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,39,0.35), rgba(201,162,39,0.05) 70%);
  border:1px solid rgba(201,162,39,0.5);
}
@keyframes breathe{
  0%{ transform:scale(0.72); }
  40%{ transform:scale(1); }
  60%{ transform:scale(1); }
  100%{ transform:scale(0.72); }
}
.breath-label{
  margin-top:22px; font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; color:#C9A227;
  animation: label-cycle 10s ease-in-out infinite;
}
@keyframes label-cycle{
  0%{opacity:0.4;} 20%{opacity:1;} 40%{opacity:1;} 50%{opacity:0.3;} 60%{opacity:1;} 80%{opacity:1;} 100%{opacity:0.4;}
}
@media (prefers-reduced-motion: reduce){
  .breath-circle, .breath-label{animation:none;}
}

/* SECTION generic */
section{padding:88px 0;}
.section-head{max-width:620px; margin-bottom:48px;}
.section-head h2{font-size:34px; margin-top:12px;}
.divider{height:1px; background:var(--hair); border:none; margin:0;}

/* ABOUT */
.about .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.portrait-placeholder{
  aspect-ratio:4/5; background:var(--card); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-align:center; padding:24px;
}
credentials {
  list-style: none !important;
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

credentials li {
  display: flex !important;
  align-items: flex-start;
  gap: 20px; /* Espace fixe entre la date et le texte */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

credentials .yr {
  flex: 0 0 130px; /* Largeur fixe garantie pour toutes les dates */
  font-weight: 600;
  color: #C7A46B; /* Couleur dorée */
  white-space: nowrap;
}

credentials span:not(.yr) {
  flex: 1; /* Le texte prend tout le reste de la largeur de manière alignée */
}
.about p.body-text{font-size:16px; color:#2A2A2A; max-width:540px;}

/* OFFERINGS */
.offer-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.offer-card{
  background:var(--card); border:1px solid var(--hair); padding:32px 28px;
  display:flex; flex-direction:column; position:relative;
}
.offer-card.featured{border:1px solid var(--moss); box-shadow:0 0 0 1px var(--moss);}
.badge{
  position:absolute; top:-13px; left:28px; background:var(--moss); color:var(--paper);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; padding:5px 12px;
}
.offer-card h3{font-size:21px; margin-bottom:6px;}
.offer-card .price{font-family:'IBM Plex Mono', monospace; font-size:22px; color:var(--moss); margin:14px 0 20px;}
.offer-card ul{list-style:none; padding:0; margin:0 0 28px; flex-grow:1;}
.offer-card ul li{font-size:14px; color:#33322C; padding:7px 0; border-top:1px solid var(--hair);}
.offer-card ul li:first-child{border-top:none;}
.offer-card .btn{text-align:center;}

/* RETREAT SPOTLIGHT */
.retreat{background:var(--moss); color:var(--paper); padding:80px 0;}
.retreat .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.retreat .eyebrow{color:#E4CE8E;}
.retreat h2{color:var(--paper); font-size:32px; margin:14px 0 20px;}
.retreat p{color:#EADFC0; font-size:16px; max-width:440px;}
.retreat-meta{display:flex; gap:32px; margin:28px 0 32px;}
.retreat-meta div{font-family:'IBM Plex Mono', monospace;}
.retreat-meta .label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#C9B36B; margin-bottom:4px;}
.retreat-meta .val{font-size:16px; color:var(--paper);}
.retreat-visual{
  aspect-ratio:1/1; border:1px solid rgba(241,234,217,0.3);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:#C9B36B; text-align:center; padding:24px;
}

/* TESTIMONIALS */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testimonial{background:var(--card); border:1px solid var(--hair); padding:28px;}
.testimonial p{font-family:'Fraunces', serif; font-style:italic; font-size:17px; line-height:1.5; color:#201F1A; margin-bottom:18px;}
.testimonial .who{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--mist);}
.placeholder-tag{
  display:inline-block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:10px;
  color:var(--brass); border:1px dashed var(--brass); padding:2px 8px;
}

/* FAQ */
.faq-item{border-top:1px solid var(--hair); padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--hair);}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:17px; font-family:'Fraunces', serif;}
.faq-q .plus{font-family:'IBM Plex Mono', monospace; color:var(--brass); font-size:18px;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{font-size:15px; color:#33322C; padding-top:14px; max-width:640px;}
.faq-item.open .faq-a{max-height:200px;}
.faq-item.open .plus{transform:rotate(45deg); display:inline-block;}

/* NEWSLETTER */
.newsletter{background:var(--ink); color:var(--paper); padding:72px 0; text-align:center;}
.newsletter h2{color:var(--paper); font-size:28px; margin:14px 0 10px;}
.newsletter p{color:#C9BFA6; font-size:15px; margin-bottom:28px;}
.signup-form{display:flex; gap:12px; justify-content:center; max-width:420px; margin:0 auto;}
.signup-form input{
  flex:1; padding:13px 16px; background:transparent; border:1px solid #6E6242; color:var(--paper);
  font-family:'Work Sans'; font-size:14px;
}
.signup-form input::placeholder{color:#8A7B4E;}
.fine-print{margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:#8A7B4E;}

/* SECTION MEDIAS - ULTRA IMMERSIVE FULL WIDTH */
#media {
  padding: 60px 0;
  width: 100%;
}

/* On casse la restriction de largeur pour ce conteneur spécifique */
#media .wrap {
  max-width: 95vw !important; /* Prend 95% de la largeur de la fenêtre */
  width: 100% !important;
  margin: 0 auto;
}

/* Forçage de la grille sur 2 colonnes égales de gauche à droite */
#media .media-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 2 colonnes égales */
  gap: 40px !important; /* Espace entre les deux vidéos */
  margin-top: 40px;
  width: 100%;
}

/* Carte vidéo */
#media .video-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  width: 100%;
}

/* Format 16:9 immersif */
#media .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Ratio HD 16:9 */
  height: 0;
  background: #000;
}

#media .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#media .video-credits {
  padding: 20px 24px;
}

#media .video-credits p {
  font-size: 15px;
  color: #A09E96;
  margin: 0;
}

#media .video-credits strong {
  color: #C7A46B;
}

/* Sur écran mobile uniquement (sous 768px), passage en 1 seule colonne pour éviter qu'elles ne soient écrasées */
@media (max-width: 768px) {
  #media .media-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FOOTER */
footer{padding:56px 0 40px; border-top:1px solid var(--hair);}
footer .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;}
footer h4{font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--mist); margin-bottom:14px;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:14px;}
footer ul a{text-decoration:none;}
footer ul a:hover{color:var(--moss);}
.copyright{margin-top:44px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--mist); display:flex; justify-content:space-between;}

@media (max-width: 900px){
  .hero .wrap, .about .wrap, .retreat .wrap{grid-template-columns:1fr;}
  .offer-grid, .testimonial-grid{grid-template-columns:1fr;}
  footer .wrap{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:38px;}
  .nav-links{display:none;}
}