/* =============================================================
   Climatec Lyon – global stylesheet 2025
   -------------------------------------------------------------
   Sections
   01. Reset & globals
   02. Body & fixed background
   03. Layout containers
   04. Typography
   05. Lists & links (buttons)
   06. Footer
   07. Forms & tables
   08. Animations
   09. Decorative elements (snow / particles)
   10. Responsive helpers
   11. Utilities
=============================================================*/

/* 01. RESET & GLOBALS ------------------------------------ */
*{box-sizing:border-box;}

/* 02. BODY & FIXED BACKGROUND ---------------------------- */
body{
  font-family:Arial,Helvetica,sans-serif;
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;              /* vertical layout : content + footer   */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:60px;       /* room for fixed footer on mobile      */
  color:#000;
  background:none;           /* image handled by ::before            */
}

/* single fixed background – debord 10lvh top / 120lvh high
   to avoid white band when mobile URL bar hides            */
body::before{
  content:"";
  position:fixed;
  top:-10lvh; left:0;
  width:100vw; height:120lvh;
  background:url("https://climateclyon.fr/img/1.jpg") center top/cover no-repeat;
  z-index:-2;
  pointer-events:none;
  transform:translateZ(0);
}

/* Alternate mobile background */
@media(max-width:768px){
  body::before{background:url("https://climateclyon.fr/img/12.jpg") center/cover no-repeat;}
}

/* 03. LAYOUT CONTAINERS ---------------------------------- */
.container{
  max-width:90%;
  margin:130px auto 15px auto;
  padding:2em;
  text-align:center;
  color:#fff;
  background:rgb(0 0 0 / 0.11);
  backdrop-filter:blur(4px);
  border-radius:4px;
  overflow-x:hidden;
  flex:0 0 auto;
}

#presentation{
  max-width:673px;
  margin:65px auto 15px auto;
  padding:2em;
  color:#fff;
  background:rgb(0 0 0 / 0.11);
  backdrop-filter:blur(4px);
  border-radius:4px;
  line-height:1.6;
  overflow-x:hidden;
  flex:0 0 auto;
}

/* responsive video wrapper :
   .video-block -> spacing, max width
   .ratio16x9   -> keeps 16/9 ratio                        */
.video-block{max-width:800px;width:100%;margin:2rem auto;padding:1rem;box-sizing:border-box;}
.ratio16x9{position:relative;width:100%;padding-top:56.25%;}
.ratio16x9 iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

/* 04. TYPOGRAPHY ----------------------------------------- */
h1{font-size:2.5em;margin-bottom:1em;color:#fff;text-shadow:1px 1px 1px #000;animation:fadeInDown 3s ease-out;}
h2{font-size:2em;color:#0066cc;margin-bottom:.5em;}
#presentation h2{font-size:1.6rem;color:#0078c8;text-align:center;}

/* 05. LISTS & LINKS -------------------------------------- */
ul{list-style:none;margin:0;padding:0;}
li{margin:.75em 0;}

a{
  position:relative;display:inline-block;vertical-align:top;
  width:250px;height:81px;line-height:1.2;text-align:center;
  padding:27px 16px;border-radius:11px;
  font-size:1.25em;text-decoration:none;
  color:#020202;text-shadow:1px 1px 1px #0066cc;
  background:url("img/glace-1.png") center/cover no-repeat;
  opacity:.8;transition:opacity .2s, box-shadow .2s;
}

a:hover{
  opacity:1;color:#fff;text-shadow:1px 1px 1px #000;
  box-shadow:1px 1px 7px #5682aecc;
  cursor:url("/img/flocon.png") 0 32, pointer;
}

a:hover::after{
  content:attr(data-tooltip);
  max-width:300px;white-space:normal;overflow-wrap:break-word;
  position:absolute;bottom:125%;left:50%;transform:translateX(-50%);
  background:#004999;color:#fff;border-radius:5px;font-size:.85em;
  padding:10px;z-index:10000;pointer-events:none;
  animation:tooltipFadeIn .6s ease-out forwards;
}

a:hover::before{
  content:"";position:absolute;bottom:calc(71% - 6px);left:50%;transform:translateX(-50%);
  border:25px solid transparent;border-top-color:#004999;z-index:9999;pointer-events:none;
  animation:tooltipFadeIn .6s ease-out forwards;
}

.link-block{max-width:90vw;word-wrap:break-word;white-space:normal;}

/* 06. FOOTER --------------------------------------------- */
footer{
  position:fixed;bottom:0;left:0;width:100%;
  padding:.75em 0;text-align:center;font-size:.9em;
  color:#7c7575;background:transparent;
  z-index:-1;pointer-events:none;
}

/* 07. FORMS & TABLES ------------------------------------- */
.contact-form input,
.contact-form textarea{
  width:100%;max-width:600px;
  padding:.75em;margin:.5em auto;
  border:none;border-radius:5px;font-size:1em;
  background:#fff;color:#000;display:block;
}
.contact-form button{
  padding:.75em 2em;font-size:1.1em;
  background:#0066cc;color:#fff;border:none;border-radius:5px;
  cursor:pointer;margin-top:1em;transition:background-color .3s;
}
.contact-form button:hover{background:#004999;}

.contact-table{width:100%;max-width:600px;margin:2em auto;border-collapse:collapse;color:#fff;font-size:1em;}
.contact-table td{padding:.5em 1em;text-align:left;vertical-align:top;}
.contact-table a{color:#fff;text-decoration:underline;}

/* 08. ANIMATIONS ----------------------------------------- */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-40px);}to{opacity:1;transform:translateY(0);}}
@keyframes fall{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(100vh);opacity:0;}}
@keyframes tooltipFadeIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* 09. DECORATIVE (snow, particles) ----------------------- */
.snowflake{position:fixed;top:-40px;font-size:1.5em;color:#fff;user-select:none;pointer-events:none;animation:fall linear 7s 1;opacity:.2;z-index:9999;}
#particles{position:fixed;inset:0;z-index:-1;background:transparent;}
@media(max-width:768px){.snowflake,#particles{display:none;}}

/* 10. RESPONSIVE HELPERS --------------------------------- */
@media(max-width:600px){
  body{display:block;padding-top:2em;padding-bottom:100px;text-align:center;}
  .container{max-width:90%;padding:1em;}
  h1{font-size:1.5em;line-height:1.2;margin-bottom:.8em;padding:0 1em;}
  .contact-table td{display:block;width:100%;box-sizing:border-box;}
}
@media(min-width:1200px){.container{max-width:700px;}}

/* 11. UTILITIES ------------------------------------------ */
.hidden{display:none!important;}
.text-center{text-align:center;}
.full-width{width:100%;}

.clim-info-section-pure{margin-top:30px;padding-top:20px;border-top:1px solid #eee;color:#fff;text-align:left;}
.clim-info-section-pure h2,
.clim-info-section-pure h3{color:#fff;}
.clim-info-section-pure ul{margin-left:20px;padding-left:10px;}
.clim-info-section-pure ul ul{list-style-type:circle;}