/* Accueil : menu inspiré de l'interface Whiteout Survival. */
#home{
  max-width:none;
  min-height:calc(100svh - 76px);
  padding:clamp(16px,2.7vh,30px) max(22px,calc((100% - 1240px)/2)) clamp(18px,2.8vh,32px);
  color:#fff;
  background:linear-gradient(180deg,#124d81 0,#185e95 44%,#10466f 100%);
}
#home .home-shell{width:100%;max-width:900px;margin-inline:auto}
#home .home-welcome{--home-header-height:clamp(205px,16vw,220px);display:grid;grid-template-columns:calc(37.5% + 2.25px) minmax(0,calc(62.5% - 16.25px));gap:14px;margin-bottom:clamp(42px,6vh,52px)}
#home .home-brand-banner{
  min-height:0;
  height:var(--home-header-height);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:visible;
}
#home .home-brand-banner img{
  width:auto;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 4px rgba(7,27,53,.38));
  transform:translateY(0);
}
#home .home-intro{
  grid-column:2;
  box-sizing:border-box;
  min-height:0;
  height:var(--home-header-height);
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.57cqi;
  padding:2.77cqi 3.95cqi;
  text-align:center;
  border:2px solid rgba(107,194,241,.48);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(7,45,81,.96),rgba(9,61,105,.91));
  box-shadow:inset 0 2px rgba(255,255,255,.12),0 9px 0 rgba(6,42,76,.5),0 17px 25px rgba(3,29,57,.26);
  overflow:hidden;
}
#home .home-intro h1{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;font-size:0;line-height:0;margin:0}
#home .mobile-copy-break{display:none}
#home .home-title-mark{display:block;width:min(94%,460px);max-width:100%;max-height:clamp(76px,10vw,132px);height:auto;object-fit:contain;flex:0 1 auto;filter:drop-shadow(0 3px 2px rgba(1,23,49,.5))}
#home .home-tagline{font-size:5.15cqi;line-height:1.06;margin:0;color:#fff;white-space:nowrap}
#home .home-tagline em{margin-left:.28em;font-style:normal;color:#bdf4ff}
#home .home-intro>p:last-child{font-family:var(--site-font);font-size:clamp(8px,3cqi,17px);line-height:1.28;margin:0;color:#d9f3ff;max-width:100%;white-space:nowrap}
#home .home-banner{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding:20px;
  border:2px solid #9cecff;
  border-radius:26px;
  color:#fff;
  background:linear-gradient(135deg,#23cce9 0 42%,#3996d8 42% 100%);
  box-shadow:inset 0 2px rgba(255,255,255,.5),0 9px 0 #0b548c,0 17px 25px rgba(3,29,57,.26);
}
#home .home-banner-mark{
  display:grid;place-items:center;flex:0 0 66px;width:66px;height:66px;
  clip-path:polygon(50% 0,92% 24%,92% 76%,50% 100%,8% 76%,8% 24%);
  background:linear-gradient(145deg,#efffff,#70d8ff 55%,#1e79bd);
  color:#0b4c7e;font-size:42px;text-shadow:0 1px #fff;
}
#home .home-banner b,#home .home-banner small{display:block;line-height:.92;letter-spacing:.035em;text-shadow:0 3px 2px rgba(7,53,92,.45)}
#home .home-banner b{font-size:clamp(24px,3.5vw,39px)}
#home .home-banner small{font-size:clamp(14px,2vw,21px);color:#e8fbff;margin-top:8px}
#home .module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,2vh,20px) 26px;margin:0}
#home .module-card{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:clamp(54px,9.8vh,82px) minmax(0,1fr);
  align-items:center;
  min-width:0;
  min-height:clamp(74px,11.2vh,104px);
  padding:clamp(6px,1.3vh,12px) clamp(10px,2.1vh,20px) clamp(6px,1.3vh,12px) clamp(7px,1.6vh,15px);
  overflow:hidden;
  text-align:left;
  border:2px solid #21c8ef;
  border-radius:11px;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(180deg,#4b9adc 0%,#428fd4 52%,#3f89ce 100%);
  box-shadow:inset 0 2px rgba(255,255,255,.33),inset 0 -2px rgba(16,91,161,.38),0 5px 0 #075482,0 8px 11px rgba(2,38,70,.32);
  transition:transform .18s,filter .18s;
}
#home .module-card::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(180deg,#18ddf5,#08c9e9 58%,#04bddf);
  clip-path:polygon(0 0,40% 0,34% 55%,30% 55%,24% 100%,0 100%);
}
#home .module-card::after{display:none}
#home .module-card:hover{transform:translateY(-2px);filter:brightness(1.06);border-color:#a4f5ff}
#home .module-card:focus-visible{outline:3px solid #ffe09b;outline-offset:4px}
#home .card-icon{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:clamp(46px,8.5vh,72px);height:clamp(46px,8.5vh,72px);
  margin:0;
  color:#fff;font-size:clamp(25px,4.3vh,40px);
  background:transparent;border:0;box-shadow:none;
  filter:drop-shadow(0 3px 1px rgba(4,45,80,.32));
}
#home .home-item-icon{overflow:visible;border-radius:0;aspect-ratio:auto}
#home .home-item-icon img{display:block;width:100%;height:100%;object-fit:contain}
#home .home-card-copy{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:100%;
  padding:0;
  text-align:center;
  position:absolute;
  inset:0 0 0 34%;
  transform:none;
}
#home .home-card-copy b{
  display:block;
  color:#fff;
  font-size:clamp(12px,2.9vh,21px);
  line-height:1;
  white-space:nowrap;
  text-shadow:0 3px 2px rgba(6,41,77,.62);
}
#home .home-card-copy small{display:block;margin-top:7px;color:#e7f8ff;font-family:var(--site-font);font-size:13px;line-height:1.22}
#home .card-arrow{font-family:Arial,sans-serif;font-size:38px;font-weight:700;line-height:1;color:#d8faff;text-shadow:0 2px #16608f}
#home .coming-card{cursor:default;opacity:.82;background:linear-gradient(180deg,#4b9adc 0%,#428fd4 52%,#3f89ce 100%)}
#home .coming-card:hover{transform:none;filter:none;border-color:#21c8ef}
#home .coming-card:disabled{color:#fff}
#home .disclaimer{margin:clamp(12px,2vh,22px) 0 0;text-align:center;color:#c8ebfc;font-family:var(--site-font);font-size:12px}
@media(min-width:1000px){
  #home .home-intro{gap:12px;padding:14px 28px}
  #home .home-title-mark{max-height:110px}
}
@media(max-width:600px){
  #home{padding:18px 14px 22px}
  #home .home-welcome{--home-header-height:clamp(136px,38vw,160px);grid-template-columns:calc(37.5% + 2px) minmax(0,calc(62.5% - 10px));gap:8px;margin-bottom:30px}
  #home .home-brand-banner{min-height:0;height:100%;justify-content:center}
  #home .home-brand-banner img{width:auto;height:100%;transform:translateY(0)}
  #home .home-intro{grid-column:2;min-height:0;justify-content:flex-start;gap:9px;padding:9px 10px 7px;border-radius:18px}
  #home .home-intro h1{flex:0 0 auto}
  #home .home-title-mark{width:min(78%,230px);max-height:64px}
  #home .home-tagline{align-self:center;max-width:none;font-size:6.5cqi;text-align:center;white-space:nowrap}
  #home .home-tagline em{margin-left:0}
  #home .home-intro>p:last-child{font-size:clamp(11px,4.7cqi,14px);line-height:1.1;white-space:normal}
  #home .mobile-copy-break{display:inline}
  #home .home-intro,#home .home-banner{min-height:0}
  #home .home-banner{padding:17px}
  #home .module-grid{gap:16px}
  #home .module-card{grid-template-columns:76px minmax(0,1fr);min-height:92px;padding:8px 15px 8px 10px;border-radius:11px}
  #home .card-icon{width:64px;height:64px;font-size:36px}
  #home .home-card-copy{inset:0 0 0 34%;transform:none}
  #home .home-card-copy b{font-size:clamp(10px,2.85vw,21px)}
  #home .home-card-copy small{font-size:12px}
  #home .card-arrow{font-size:30px}
}
@media(max-width:390px){
  #home .module-grid{gap:13px}
  #home .module-card{grid-template-columns:61px minmax(0,1fr);min-height:84px;padding:7px 12px 7px 7px}
  #home .card-icon{width:54px;height:54px;font-size:31px}
  #home .card-arrow{display:none}
  #home .home-card-copy small{display:none}
}
@media(prefers-reduced-motion:reduce){#home .module-card{transition:none}}


/* Le texte communautaire occupe le bas de l'accueil, sous les boutons. */
#home .home-shell{
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - 76px - clamp(16px,2.7vh,30px) - clamp(18px,2.8vh,32px));
}
#home .disclaimer{
  margin-top:auto;
  padding-top:clamp(18px,3vh,30px);
}

/* Slightly enlarge the furnace artwork around its existing center. */
#home .furnace-card .home-item-icon img{transform:scale(1.12);transform-origin:center}

/* Mobile: center artwork inside the cyan section, clear of the cutout. */
@media(max-width:600px){
  #home .module-card .card-icon{position:absolute;left:2%;top:50%;width:24%;height:calc(100% - 18px);transform:translateY(-50%);margin:0}
}

#home .coming-card{overflow:visible;opacity:1}
#home .coming-card::before{border-radius:inherit}

/* Tampon encreur circulaire, légèrement de biais, apposé sur le bouton (rouge des casques T11/T12).
   Ordinateur : à gauche, déborde de 12 px en haut/bas (espace entre cartes : 18 px) et de 8 px à gauche (26 px).
   Mobile : centré à gauche du titre (lui-même centré à 2/3 de la carte), dont il recouvre le début. */
#home .coming-card .wip-stamp{position:absolute;left:54px;top:50%;z-index:2;height:calc(100% + 24px);aspect-ratio:1;color:#cf3e47;opacity:.93;transform:translate(-50%,-50%) rotate(-14deg);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(120,22,30,.35))}
#home .coming-card .wip-stamp svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--site-font)}
@media(max-width:600px){#home .coming-card .wip-stamp{left:calc(66.7% - 9.4vw - 31px);height:100%}}

/* Accueil sur une seule hauteur d'écran (barre Safari affichée) : body ne dépasse pas l'accueil,
   donc ni défilement superflu ni bande claire sous la page. */
body:has(#home.active){min-height:100svh}
@media(max-width:600px){#home .home-shell{min-height:calc(100svh - 76px - 18px - 22px)}}

/* Mobile : les boutons suivent l'en-tête, avec un peu d'air en plus sur les écrans hauts (web app : jusqu'à 44 px) ; la hauteur d'écran restante
   (web app sans barres de navigateur, grands téléphones) passe entre les boutons et le texte
   communautaire, qui reste en bas de l'écran. */
@media(max-width:767px){#home .module-grid{margin-top:clamp(0px,calc((100svh - 700px) * .3),44px)}#home .disclaimer{margin-top:auto;margin-bottom:0}}