
:root{
  --green-bg:#007A00;
  --light-sage:#F1FAEC;
  --light-bordeaux:#F6E9EC;
  --fanclub-text:#6B0F1A;
  --paysage-word:#9CD67C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  color:#111;
  background:#fff;
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
a:visited{color:inherit}
.wrapper{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:100vh;
  width:100vw;height:100vh;
}
.panel{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:40px 24px; overflow:hidden;
}
.panel + .panel{border-left:1px solid rgba(0,0,0,0.08)}
.panel .content{
  height:100%;width:100%;max-width:900px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;
  margin:0 auto;
}
/* backgrounds */
.cydonia-panel{background:var(--light-sage)}
.paysage-panel{background:var(--green-bg);color:#fff}
.fanclub-panel{background:var(--light-bordeaux)}

/* logo blocks (same height for perfect title alignment) */
.logo-box{width:360px;height:240px;display:grid;place-items:center}
.logo-box img{width:90%;height:90%;object-fit:contain}

/* titles */
.title{
  font-weight:900;
  font-size:clamp(26px,3.4vw,44px);
  text-align:center;
  margin:6px 0 0 0;
  letter-spacing:.02em;
}
.title-outline{ 
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
}
.cydonia-title{ color:#16a34a; text-transform:uppercase; letter-spacing:2px;}
.paysage-title{ text-transform:uppercase; }
.paysage-title .fenninger{ color:#fff; -webkit-text-stroke:2px #000; text-stroke:2px #000;}
.paysage-title .paysage{ color:var(--paysage-word); -webkit-text-stroke:2px #000; text-stroke:2px #000;}
.fanclub-title{ color:var(--fanclub-text); text-transform:uppercase; }

/* slogans (uniform height) */
.slogan{
  min-height:56px; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-style:italic; text-align:center;
  margin-bottom:4px;
}
.paysage-panel .slogan{ color:#E6FFE6; }

/* feature lists */
.feature-list{ width:100%; max-width:540px; margin-top:14px; text-align:left; }
.feature-list ul{ list-style:none; padding:0; margin:0; }
.feature-list li{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:clamp(14px,1.4vw,16px); font-weight:700; }
.paysage-panel .feature-list li{ color:#f2f7f2; }

/* spacing tweak for paysag family & generation lines */
.fenninger-paysage-domains ul li.family{ margin-top:12px; }

/* header */
.header{
  position:fixed; top:22px; left:50%; transform:translateX(-50%);
  font-size:clamp(26px,3.2vw,40px); font-weight:900;
}
.header .accent{ color:#059669; }

/* responsive */
@media (max-width: 900px){
  body{overflow:auto}
  .wrapper{grid-template-columns:1fr; grid-auto-rows: calc(100vh/3); height:100vh; overflow:auto;}
  .panel + .panel{border-left:none;border-top:1px solid rgba(0,0,0,0.08)}
  .logo-box{width:min(70vw,340px); height:min(45vw,220px);}
}

/* Enlarged slogans */
.slogan {
  min-height: 60px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 6px;
}

/* Enlarged feature list */
.feature-list li {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.5;
}

/* Add line break spacing before 'Une entreprise familiale...' */
.fenninger-paysage-domains ul li.family {
  margin-top: 22px !important;
}
