/* =========================================================
   AMICALE TV — STYLES PRINCIPAUX
   ========================================================= */

:root{
  --navy:#071426;
  --navy2:#0d2036;
  --red:#d71920;
  --white:#fff;
  --gold:#ffc928;
  --muted:#a8b5c4;
  --line:rgba(255,255,255,.13);

  --ticker-h:90px;
  --header-h:112px;
}

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#06101d;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}

body{
  background:
    radial-gradient(
      circle at 20% 0%,
      #123252 0,
      #071426 42%,
      #040b13 100%
    );
}

#app{
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows:
    var(--header-h)
    1fr
    var(--ticker-h);
  position:relative;
}


/* =========================================================
   HEADER
   ========================================================= */

header{
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:center;
  gap:20px;
  padding:12px 28px;
  border-bottom:1px solid var(--line);
  background:rgba(4,13,24,.92);
}

.logo{
  width:88px;
  height:88px;
  object-fit:contain;
}

.brand{
  font-weight:900;
  font-size:clamp(25px,2vw,40px);
  letter-spacing:.03em;
  line-height:1.02;
}

.brand small{
  display:block;
  color:#d9e3ee;
  font-size:.52em;
  margin-top:7px;
  letter-spacing:.16em;
}

.clock{
  text-align:right;
}

.clock-time{
  font-size:clamp(34px,3.2vw,64px);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  line-height:1;
}

.clock-date{
  font-size:clamp(15px,1.2vw,23px);
  color:#d9e3ee;
  margin-top:7px;
  text-transform:capitalize;
}


/* =========================================================
   PAGES
   ========================================================= */

main{
  position:relative;
  min-height:0;
  overflow:hidden;
}

.page{
  position:absolute;
  inset:0;
  padding:22px 28px 18px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:
    opacity .58s ease,
    transform .58s ease;

  overflow:hidden;
}

.page.active{
  opacity:1;
  visibility:visible;
  transform:none;
}

.page-heading{
  font-size:clamp(26px,2.4vw,48px);
  font-weight:950;
  letter-spacing:.06em;
  margin:0 0 20px;
  text-transform:uppercase;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel{
  background:
    linear-gradient(
      145deg,
      rgba(20,43,70,.93),
      rgba(7,20,38,.95)
    );

  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  overflow:hidden;
}

.panel-title{
  font-size:clamp(18px,1.4vw,28px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#dbe8f4;
  margin-bottom:14px;
}


/* =========================================================
   ACCUEIL
   ========================================================= */

.home-grid{
  height:100%;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
}

.info-home,
.weather-home{
  padding:26px;
  min-height:0;
}

.info-home{
  display:flex;
  flex-direction:column;
}

.home-info-card{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:20px 6px;
  text-align:left;
}

.home-info-category{
  font-size:clamp(28px,2.55vw,52px);
  font-weight:950;
  margin-bottom:18px;
}

.home-info-title{
  font-size:clamp(30px,2.75vw,56px);
  font-weight:850;
  line-height:1.08;
  margin-bottom:18px;
}

.home-info-message{
  font-size:clamp(24px,2.1vw,42px);
  line-height:1.25;
  color:#eef5fb;
  max-width:96%;
  white-space:pre-line;
}

.birthday-strip{
  margin-top:18px;
  padding:16px 20px;
  border-radius:15px;
  background:rgba(255,201,40,.12);
  border:1px solid rgba(255,201,40,.42);
  font-size:clamp(19px,1.5vw,30px);
  font-weight:800;
}


/* =========================================================
   MÉTÉO ACCUEIL
   ========================================================= */

.current-weather{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  align-items:center;
}

.weather-icon{
  font-size:clamp(72px,7vw,132px);
  text-align:center;
}

.temperature{
  font-size:clamp(58px,6vw,112px);
  font-weight:900;
  line-height:.9;
}

.weather-city{
  font-size:clamp(20px,1.6vw,30px);
  color:#dce8f3;
  margin-top:12px;
}

.weather-metrics{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:20px 0;
}

.metric{
  padding:12px 14px;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  font-size:clamp(16px,1.2vw,23px);
}


/* =========================================================
   VIGILANCES
   ========================================================= */

.risk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.risk-card{
  border-radius:13px;
  padding:12px 14px;
  min-height:90px;
  border:1px solid rgba(255,255,255,.18);
}

.risk-title{
  font-size:14px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.risk-label{
  font-size:clamp(20px,1.6vw,30px);
  font-weight:950;
  margin-top:5px;
}

.risk-detail{
  font-size:clamp(13px,1vw,18px);
  margin-top:4px;
  line-height:1.15;
}

.level-green{
  background:#257643;
}

.level-yellow{
  background:#ffd400;
  color:#111;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.12),
    0 8px 22px rgba(255,212,0,.14);
}

.level-orange{
  background:#e66c10;
}

.level-red{
  background:#c71922;
}

.level-unknown{
  background:#546272;
}


/* =========================================================
   PAGE INFORMATIONS CENTRE
   ========================================================= */

.info-page-card{
  height:calc(100% - 70px);
  padding:42px 52px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  text-align:left;
}

.info-page-category{
  font-size:clamp(38px,3.8vw,78px);
  font-weight:950;
  margin-bottom:24px;
}

.info-page-title{
  font-size:clamp(34px,3.3vw,68px);
  font-weight:850;
  line-height:1.05;
  margin-bottom:28px;
}

.info-page-message{
  font-size:clamp(29px,2.6vw,54px);
  line-height:1.25;
  max-width:94%;
  white-space:pre-line;
}


/* =========================================================
   ANNIVERSAIRES
   ========================================================= */

.birthday-page-grid{
  height:calc(100% - 70px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.birthday-today,
.birthday-upcoming{
  padding:34px;
}

.birthday-today{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.cake{
  font-size:80px;
}

.birthday-big{
  font-size:clamp(32px,3.5vw,72px);
  font-weight:950;
  line-height:1.12;
}

.birthday-age{
  font-size:clamp(28px,2.6vw,52px);
  color:var(--gold);
  margin-top:16px;
}

.birthday-main-entry{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.birthday-main-photo{
  width:clamp(120px,14vw,240px);
  height:clamp(120px,14vw,240px);
  border-radius:22px;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.25);
}

.birthday-wish{
  font-size:clamp(26px,2.7vw,54px);
  font-weight:900;
  line-height:1.2;
}

.upcoming-list{
  display:grid;
  gap:10px;
}

.upcoming-item{
  display:grid !important;
  grid-template-columns:58px 105px 1fr auto !important;
  align-items:center;
  gap:12px !important;
  padding:10px 12px !important;

  border-bottom:1px solid var(--line);

  font-size:clamp(17px,1.35vw,26px);
}

.birthday-thumb{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.2);
}

.birthday-placeholder{
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
}

.upcoming-date{
  color:var(--gold);
  font-weight:900;
}

.upcoming-name{
  font-weight:850;
}

.upcoming-age{
  color:#d5e0eb;
}


/* =========================================================
   RÉSERVATIONS
   ========================================================= */

#page-reservations{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
}

#page-reservations.active{
  display:grid;
}

.reservation-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
  flex-shrink:0;
}

.summary-box{
  padding:16px 18px;
  text-align:center;
}

.summary-number{
  font-size:clamp(30px,3vw,58px);
  font-weight:950;
}

.summary-label{
  font-size:clamp(14px,1vw,20px);
  color:#cbd7e3;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.availability-wrap{
  min-height:0;
  height:auto;
  overflow:hidden;
  padding:12px;
}

.availability-table{
  width:100%;
  height:100%;
  table-layout:fixed;

  border-collapse:separate;
  border-spacing:5px;

  font-size:clamp(12px,.92vw,18px);
}

.availability-table th{
  padding:5px;
  color:#dce7f2;
}

.availability-table td{
  padding:6px;
  text-align:center;
  border-radius:9px;
}

.availability-table .material{
  width:20%;
  text-align:left;
  font-weight:850;
  background:rgba(255,255,255,.05);
}

.availability-table .green{
  background:#237443;
}

.availability-table .yellow{
  background:#f4c430;
  color:#111;
}

.availability-table .red{
  background:#bc1e27;
}

.availability-table .unknown{
  background:#53616f;
}


/* =========================================================
   MÉTÉO CHALLANS
   ========================================================= */

.weather-page-layout{
  height:calc(100% - 70px);

  display:grid;
  grid-template-rows:auto 1fr;
  gap:20px;
}

.weather-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.weather-main-card{
  padding:28px;

  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;
}

.weather-risks{
  padding:22px;
}

.forecast-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
}

.forecast-day{
  padding:18px 10px;
  text-align:center;
}

.forecast-name{
  font-weight:900;
  font-size:18px;
}

.forecast-icon{
  font-size:54px;
  margin:10px 0;
}

.forecast-max{
  font-size:30px;
  font-weight:950;
}

.forecast-min{
  font-size:19px;
  color:#afbdca;
}

.forecast-rain{
  font-size:15px;
  color:#9ed3ff;
  margin-top:8px;
}


/* =========================================================
   AX-LES-THERMES — MÉTÉO
   ========================================================= */

.ax-weather-page{
  height:calc(100% - 70px);

  display:grid;
  grid-template-columns:1fr .65fr;
  grid-template-rows:auto minmax(0,1fr);

  gap:20px;
}

.ax-weather-main{
  padding:30px;
  min-height:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ax-current{
  display:flex;
  align-items:center;
  gap:22px;
}

.ax-weather-icon{
  font-size:clamp(70px,7vw,125px);
}

.ax-temperature{
  font-size:clamp(58px,5.5vw,105px);
  font-weight:950;
  line-height:.95;
}

.ax-weather-text{
  font-size:clamp(20px,1.6vw,31px);
  color:#c8d7e5;
  margin-top:8px;
}

.ax-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:25px;
}

.ax-metrics span{
  padding:14px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  text-align:center;
  font-weight:750;
  font-size:clamp(16px,1.15vw,23px);
}

.ax-slopes-status{
  padding:30px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;

  text-align:center;

  font-size:clamp(26px,2.5vw,48px);
  font-weight:950;

  transition:
    background .4s ease,
    transform .4s ease;
}

.ax-slopes-status strong{
  font-size:.7em;
  letter-spacing:.08em;
}

.ax-slopes-status.open{
  background:
    linear-gradient(
      145deg,
      #197443,
      #0b4429
    );

  box-shadow:
    inset 0 0 45px rgba(71,255,149,.08),
    0 12px 32px rgba(0,0,0,.22);
}

.ax-slopes-status.closed{
  background:
    linear-gradient(
      145deg,
      #a91d25,
      #651017
    );

  box-shadow:
    inset 0 0 45px rgba(255,78,87,.08),
    0 12px 32px rgba(0,0,0,.22);
}

.ax-slopes-icon{
  font-size:clamp(55px,6vw,100px);
}

#page-ax-weather .ax-forecast{
  grid-column:1/-1;

  display:grid;
  grid-template-columns:repeat(5,1fr);

  gap:14px;
  min-height:0;
}

#page-ax-weather .ax-day{
  min-height:0;

  display:grid;
  place-items:center;

  gap:7px;
  padding:20px 10px;

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(20,43,70,.93),
      rgba(7,20,38,.95)
    );

  border:1px solid var(--line);

  text-align:center;

  font-size:clamp(18px,1.4vw,27px);
}

#page-ax-weather .ax-day b{
  font-size:1em;
}

#page-ax-weather .ax-day-icon{
  font-size:clamp(42px,4vw,72px);
}

#page-ax-weather .ax-day small{
  color:#9fb4c8;
  font-size:.72em;
}


/* =========================================================
   AX — WEBCAMS
   ========================================================= */

.webcam-full-card{
  height:calc(100% - 70px);
  padding:0;
  overflow:hidden;
  border-radius:20px;
}

.webcam-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  background:#000;
  overflow:hidden;
}

.webcam-frame{
  width:100%;
  height:100%;
  border:0;
  background:#000;
  display:block;
}

.webcam-status{
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  padding:24px;

  text-align:center;

  background:#050b14;
  color:#fff;

  font-size:clamp(18px,1.5vw,28px);

  z-index:2;
}

.webcam-status.hidden{
  display:none;
}

.webcam-link{
  display:inline-block;

  margin-top:14px;
  padding:10px 16px;

  border-radius:10px;

  background:#d71920;
  color:#fff;

  text-decoration:none;
  font-weight:900;
}


/* =========================================================
   BANDEAU ACTUALITÉS
   ========================================================= */

.ticker{
  display:grid;
  grid-template-columns:195px 1fr;
  align-items:stretch;

  background:#071426;

  border-top:1px solid rgba(255,255,255,.18);
}

.direct-box{
  background:var(--red);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  font-size:25px;
  font-weight:950;
  letter-spacing:.04em;
}

.direct-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fff;

  animation:blink 1.2s infinite;
}

.ticker-text{
  display:flex;
  align-items:center;

  padding:10px 28px;

  font-size:clamp(20px,1.55vw,31px);
  line-height:1.15;

  overflow:hidden;
}

.ticker-copy{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@keyframes blink{
  50%{
    opacity:.2;
  }
}


/* =========================================================
   STATUS / DIAGNOSTIC
   ========================================================= */

.status-bar{
  display:inline-block;
  margin-left:16px;
  padding:4px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.07);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  vertical-align:middle;
}

.status-ok{
  color:#70db8e;
}

.status-warn{
  color:#ffd65a;
}

.status-error{
  color:#ff767b;
}

.diagnostic{
  position:absolute;

  left:28px;
  top:126px;

  z-index:30;

  width:min(480px,42vw);

  padding:16px;

  background:rgba(2,8,15,.96);

  border:1px solid var(--line);
  border-radius:14px;

  box-shadow:0 15px 40px #0008;

  transition:.3s;
}

.diagnostic.hidden{
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
}

.diag-title{
  font-weight:950;
  font-size:18px;
  margin-bottom:10px;
}

.diag-row{
  display:grid;
  grid-template-columns:1fr auto;

  gap:10px;

  padding:7px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

  font-size:14px;
}

.diag-pending{
  color:#ffd65a;
}

.diag-loading{
  color:#7cc5ff;
}

.diag-ok{
  color:#70db8e;
}

.diag-error{
  color:#ff767b;
}

.diag-time{
  color:#9eacb9;
}


/* =========================================================
   OVERLAYS
   ========================================================= */

.overlay{
  position:fixed;
  inset:0;

  z-index:100;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  background:#02060b;

  opacity:0;
  visibility:hidden;

  transition:.3s;
}

.overlay.show{
  opacity:1;
  visibility:visible;
}

.overlay img{
  width:min(330px,30vw);
  max-height:35vh;
  object-fit:contain;
}

.overlay-time{
  font-size:clamp(80px,12vw,220px);
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

.overlay-brand{
  font-size:clamp(24px,2.8vw,56px);
  font-weight:900;
  letter-spacing:.08em;
}


/* =========================================================
   JINGLE HORAIRE
   ========================================================= */

.hour-overlay{
  background:
    radial-gradient(
      circle at 50% 45%,
      #173b60 0,
      #071426 42%,
      #02060b 100%
    );

  overflow:hidden;
}

.hour-overlay:before,
.hour-overlay:after{
  content:"";

  position:absolute;

  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;

  width:42vw;
  height:42vw;

  animation:hourPulse 4.5s ease-out infinite;
}

.hour-overlay:after{
  animation-delay:1.5s;
}

.hour-content{
  position:relative;
  z-index:3;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.hour-logo{
  width:min(250px,20vw);
  max-height:28vh;
  object-fit:contain;

  filter:drop-shadow(0 20px 35px rgba(0,0,0,.45));

  animation:
    hourLogoIn .9s cubic-bezier(.2,.8,.2,1);
}

.hour-line{
  width:min(700px,62vw);
  height:3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d71920 22%,
      #fff 50%,
      #d71920 78%,
      transparent
    );

  margin:18px 0;

  animation:hourLine 1.1s ease both;
}

.hour-overlay .overlay-time{
  animation:hourTimeIn .8s .12s both;
}

.hour-overlay .overlay-brand{
  max-width:80vw;
  animation:hourBrandIn .8s .28s both;
}

.hour-sweep{
  position:absolute;
  inset:-30%;

  background:
    linear-gradient(
      115deg,
      transparent 42%,
      rgba(255,255,255,.10) 49%,
      transparent 56%
    );

  animation:hourSweep 3.8s ease-in-out infinite;
}

@keyframes hourPulse{
  0%{
    transform:scale(.55);
    opacity:.45;
  }

  100%{
    transform:scale(1.4);
    opacity:0;
  }
}

@keyframes hourLogoIn{
  from{
    transform:translateY(-28px) scale(.88);
    opacity:0;
  }

  to{
    transform:none;
    opacity:1;
  }
}

@keyframes hourTimeIn{
  from{
    transform:scale(.72);
    opacity:0;
    letter-spacing:.18em;
  }

  to{
    transform:scale(1);
    opacity:1;
    letter-spacing:.02em;
  }
}

@keyframes hourBrandIn{
  from{
    transform:translateY(22px);
    opacity:0;
  }

  to{
    transform:none;
    opacity:1;
  }
}

@keyframes hourLine{
  from{
    transform:scaleX(0);
    opacity:0;
  }

  to{
    transform:scaleX(1);
    opacity:1;
  }
}

@keyframes hourSweep{
  0%,
  25%{
    transform:translateX(-35%);
  }

  70%,
  100%{
    transform:translateX(35%);
  }
}


/* =========================================================
   ALERTES VIGILANCE
   ========================================================= */

.alert-overlay{
  overflow:hidden;
}

.alert-overlay:before{
  content:"";

  position:absolute;
  inset:-30%;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0 2px,
      transparent 2px 34px
    );

  animation:alertMove 7s linear infinite;
}

.alert-content{
  position:relative;
  z-index:3;

  width:min(1200px,88vw);

  padding:42px;
}

.alert-icon{
  font-size:clamp(72px,9vw,170px);
  line-height:1;

  animation:alertIcon 1.4s ease-in-out infinite;
}

.alert-kicker{
  font-size:clamp(20px,2vw,38px);
  font-weight:900;
  letter-spacing:.22em;
  margin-bottom:12px;
}

.alert-overlay.yellow{
  background:
    linear-gradient(
      145deg,
      #ffd400,
      #f2bd00
    );

  color:#111;
}

.alert-overlay.orange{
  background:
    radial-gradient(
      circle at center,
      #f88a18 0,
      #d85e00 56%,
      #9e3b00 100%
    );
}

.alert-overlay.red{
  background:
    radial-gradient(
      circle at center,
      #e11b28 0,
      #a9000a 60%,
      #620006 100%
    );

  animation:redPulse 1.3s ease-in-out infinite alternate;
}

.alert-overlay.red .alert-title{
  text-shadow:0 0 30px rgba(255,255,255,.25);
}

.alert-title{
  font-size:clamp(48px,6vw,112px);
  font-weight:950;
  line-height:1.02;
  text-transform:uppercase;
}

.alert-detail{
  font-size:clamp(28px,2.8vw,54px);
  margin-top:22px;
  font-weight:750;
}

.alert-department{
  font-size:clamp(20px,1.8vw,34px);
  letter-spacing:.16em;
  margin-top:14px;
  text-transform:uppercase;
}

.alert-rule{
  height:4px;
  width:min(720px,70vw);

  margin:28px auto;

  background:rgba(255,255,255,.75);
}

@keyframes alertMove{
  to{
    transform:translate3d(8%,8%,0);
  }
}

@keyframes alertIcon{
  50%{
    transform:scale(1.08);
  }
}

@keyframes redPulse{
  from{
    filter:brightness(.92);
  }

  to{
    filter:brightness(1.12);
  }
}


/* =========================================================
   RASSEMBLEMENT
   ========================================================= */

.assembly-overlay{
  z-index:210 !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      #21547f 0,
      #071426 54%,
      #01040a 100%
    ) !important;
}

.assembly-overlay.show{
  opacity:1 !important;
  visibility:visible !important;
}

.assembly-content{
  width:min(1150px,88vw);
}

.assembly-icon{
  font-size:clamp(76px,9vw,160px);
  animation:assemblyBounce 1.1s ease-in-out infinite;
}

.assembly-title{
  font-size:clamp(52px,6vw,118px) !important;
  font-weight:950;
  line-height:1.04;
  text-transform:uppercase;

  text-shadow:
    0 10px 35px rgba(0,0,0,.45);
}

.assembly-subtitle{
  font-size:clamp(38px,4.6vw,92px) !important;
  color:#ffc928 !important;

  margin-top:22px;

  font-weight:850;

  letter-spacing:.08em;
  text-transform:uppercase;
}

@keyframes assemblyBounce{
  50%{
    transform:translateY(-8px);
  }
}


/* =========================================================
   VEILLE
   ========================================================= */

.sleep-overlay{
  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 35%,
      #102b47 0,
      #050b12 42%,
      #010305 78%
    );
}

.sleep-overlay:before,
.sleep-overlay:after{
  content:"";

  position:absolute;
  inset:-35%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.12) 0 1px,
      transparent 2px
    );

  background-size:75px 75px;

  opacity:.16;

  animation:sleepDrift 28s linear infinite;
}

.sleep-overlay:after{
  background-size:115px 115px;
  opacity:.1;

  animation-duration:44s;
  animation-direction:reverse;
}

.sleep-content{
  position:relative;
  z-index:2;
  text-align:center;
}

.sleep-logo{
  animation:sleepLogo 5s ease-in-out infinite;

  filter:
    drop-shadow(
      0 18px 36px rgba(0,0,0,.55)
    );
}

.sleep-label{
  font-size:clamp(34px,4vw,72px);
  font-weight:950;
  letter-spacing:.24em;
  margin-top:18px;
}

.sleep-clock{
  font-size:clamp(60px,8vw,150px);
  font-weight:950;
  letter-spacing:.04em;

  margin-top:16px;

  font-variant-numeric:tabular-nums;
}

.sleep-date{
  font-size:clamp(20px,2vw,38px);
  margin-top:8px;
  color:#cbd8e5;
  text-transform:capitalize;
}

.sleep-status{
  font-size:clamp(14px,1.2vw,22px);
  margin-top:22px;
  color:#8fa7bd;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@keyframes sleepLogo{
  0%,
  100%{
    transform:translateY(0) scale(1);
    opacity:.92;
  }

  50%{
    transform:translateY(-10px) scale(1.025);
    opacity:1;
  }
}

@keyframes sleepDrift{
  from{
    transform:
      translate3d(0,0,0)
      rotate(0);
  }

  to{
    transform:
      translate3d(8%,5%,0)
      rotate(8deg);
  }
}


/* =========================================================
   BOUTON SON
   ========================================================= */

.sound-button{
  position:fixed;

  right:18px;
  bottom:96px;

  z-index:60;

  border:0;
  border-radius:12px;

  padding:10px 14px;

  background:#d71920;
  color:#fff;

  font-weight:800;

  cursor:pointer;
}

.sound-button.enabled{
  background:#237443;
}


/* =========================================================
   RÉGIE
   ========================================================= */

.control-button{
  position:fixed;

  right:18px;
  bottom:152px;

  z-index:70;

  width:44px;
  height:44px;

  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;

  background:rgba(7,20,38,.92);

  color:#fff;
  font-size:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:
    0 8px 24px rgba(0,0,0,.35);
}

.control-button:hover{
  background:#173653;
}

.control-panel{
  position:fixed;
  inset:0;

  z-index:150;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.72);

  opacity:0;
  visibility:hidden;

  transition:.25s;
}

.control-panel.show{
  opacity:1;
  visibility:visible;
}

.control-card{
  width:min(900px,90vw);
  max-height:88vh;

  overflow:auto;

  background:#081727;

  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;

  padding:26px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.6);
}

.control-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:20px;
}

.control-title{
  font-size:28px;
  font-weight:950;
}

.control-close{
  border:0;
  background:transparent;
  color:#fff;

  font-size:30px;

  cursor:pointer;
}

.control-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.control-grid button{
  min-height:58px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;

  background:#132b46;
  color:#fff;

  font-size:16px;
  font-weight:800;

  cursor:pointer;

  padding:10px;
}

.control-grid button:hover{
  background:#1c4268;
}

.control-grid .danger{
  background:#9f1b22;
}

.control-grid .warning{
  background:#b45b12;
}


/* =========================================================
   TV 1366 PX ET PETITS ÉCRANS
   ========================================================= */

@media(max-width:1366px){

  :root{
    --header-h:90px;
    --ticker-h:62px;
  }

  .logo{
    width:67px;
    height:67px;
  }

  header{
    grid-template-columns:78px 1fr auto;
    padding:8px 18px;
  }

  .page{
    padding:15px 18px 12px;
  }


  .diagnostic{
    top:98px;
    left:18px;
  }

  .info-home,
  .weather-home{
    padding:18px;
  }

  .home-info-message{
    font-size:clamp(22px,2vw,34px);
  }

  .info-page-message{
    font-size:clamp(27px,2.5vw,44px);
  }

  .risk-card{
    min-height:76px;
    padding:9px;
  }

  .reservation-summary{
    gap:8px;
  }

  .summary-box{
    padding:10px;
  }

  .forecast-day{
    padding:10px 6px;
  }

  .forecast-icon{
    font-size:38px;
  }

  .ticker{
    grid-template-columns:155px 1fr;
  }

  .direct-box{
    font-size:21px;
  }

  .ticker-text{
    padding:7px 20px;
    font-size:clamp(18px,1.45vw,25px);
  }

  .birthday-thumb{
    width:44px;
    height:44px;
  }

  .upcoming-item{
    grid-template-columns:
      48px
      90px
      1fr
      auto !important;
  }

  .ax-weather-page{
    gap:12px;
  }

  .ax-weather-main{
    padding:18px;
  }

  .ax-weather-icon{
    font-size:62px;
  }

  .ax-temperature{
    font-size:58px;
  }

  .ax-weather-text{
    font-size:18px;
  }

  .ax-metrics{
    margin-top:14px;
    gap:6px;
  }

  .ax-metrics span{
    padding:8px 5px;
    font-size:14px;
  }

  .ax-slopes-status{
    padding:16px;
    gap:14px;
    font-size:clamp(22px,2.1vw,34px);
  }

  .ax-slopes-icon{
    font-size:54px;
  }

  #page-ax-weather .ax-forecast{
    gap:8px;
  }

  #page-ax-weather .ax-day{
    padding:9px 5px;
    font-size:clamp(14px,1.15vw,19px);
  }

  #page-ax-weather .ax-day-icon{
    font-size:35px;
  }

  .sound-button{
    bottom:68px;
  }

  .control-button{
    bottom:116px;
  }

}

.status-bar:empty{
  display:none;
}
/* =========================================================
   AX 3 DOMAINES — CONDITIONS DIGISNOW
   ========================================================= */

.ax-domain-live{
  height:calc(100% - 70px);
  position:relative;
  padding:12px;
  overflow:hidden;
  background:#fff;
  color:#071426;
}

.ax-digisnow-container{
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.ax-digisnow-container widget-digisnow-ski-area{
  display:block;
  width:100%;
  transform:scale(.60);
  transform-origin:top center;
}

.ax-domain-loading{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#071426;
  color:#fff;

  font-size:clamp(24px,2vw,42px);
  font-weight:850;

  z-index:5;
}

.ax-domain-loading.hidden{
  display:none;
}
/* V7 PRO — icônes météo SVG animées et transitions GPU */
.meteo-animated{display:block;width:100%;height:100%;object-fit:contain;max-height:100%;}
.weather-icon,.ax-weather-icon{display:flex;align-items:center;justify-content:center;min-width:0;}
.weather-icon .meteo-animated{width:clamp(85px,9vw,160px);height:clamp(85px,9vw,160px);}
.ax-weather-icon .meteo-animated{width:clamp(110px,11vw,190px);height:clamp(110px,11vw,190px);}
.forecast-icon .meteo-animated,.ax-day-icon .meteo-animated{width:100%;height:100%;min-height:50px;}
main::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;transform:translateX(-115%);background:linear-gradient(110deg,transparent 0%,transparent 18%,#d71920 19%,#d71920 30%,#071426 31%,#071426 72%,transparent 73%);}
main.tv-transition::after{animation:none;}
@keyframes tvWipe{0%{opacity:0;transform:translateX(-115%)}18%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(115%)}}
@media(prefers-reduced-motion:reduce){main.tv-transition::after{animation:none}.page,.page-next-enter{transition:none!important;animation:none!important}.page-transition.play .page-transition-glow,.page-transition.play .page-transition-band,.page-transition.play .page-transition-logo,.page-transition.play .page-transition-title,.page-transition.play{animation:none!important;opacity:0!important}}

/* V7.1 — correctifs météo / anniversaires / transition logo */
.meteo-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.meteo-fallback{display:none;align-items:center;justify-content:center;width:100%;height:100%;font-size:clamp(42px,4vw,84px);line-height:1;}
.forecast-icon .meteo-fallback,.ax-day-icon .meteo-fallback{font-size:clamp(28px,2.4vw,46px);}

.page-next-enter{animation:pageContentFadeIn 1.45s ease both;}
@keyframes pageContentFadeIn{0%{opacity:0;transform:translateY(16px) scale(.992)}100%{opacity:1;transform:none}}

.page-transition{position:absolute;left:0;right:0;top:var(--header-h);bottom:var(--ticker-h);z-index:80;pointer-events:none;overflow:hidden;opacity:0;background:rgba(7,20,38,0);}
.page-transition.play{animation:transitionScreen 4s ease both;}
.page-transition-glow{position:absolute;inset:0;background:radial-gradient(circle at center, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 22%, rgba(7,20,38,0) 64%);opacity:0;}
.page-transition-band{position:absolute;left:-35%;right:-35%;top:50%;height:180px;margin-top:-90px;background:linear-gradient(90deg, rgba(7,20,38,0) 0%, rgba(18,50,82,.8) 14%, rgba(215,25,32,.92) 34%, rgba(255,255,255,.30) 50%, rgba(215,25,32,.92) 66%, rgba(18,50,82,.8) 86%, rgba(7,20,38,0) 100%);filter:blur(6px);transform:translateX(-120%) scaleX(.88);opacity:0;box-shadow:0 0 36px rgba(215,25,32,.24);}
.page-transition-logo{position:absolute;top:50%;left:50%;width:320px;height:320px;object-fit:contain;transform:translate(-50%,-58%) scale(.76);opacity:0;filter:drop-shadow(0 24px 50px rgba(0,0,0,.42));}
.page-transition-title{position:absolute;left:50%;top:calc(50% + 180px);transform:translateX(-50%);font-size:clamp(36px,3vw,56px);font-weight:900;letter-spacing:.22em;color:#fff;opacity:0;text-shadow:0 10px 28px rgba(0,0,0,.45);}
.page-transition.play .page-transition-glow{animation:pageGlow 4s ease both;}
.page-transition.play .page-transition-band{animation:pageBandSlide 4s cubic-bezier(.2,.74,.2,1) both;}
.page-transition.play .page-transition-logo{animation:pageLogoHero 4s cubic-bezier(.22,.77,.22,1) both;}
.page-transition.play .page-transition-title{animation:pageTitleHero 4s ease both;}
@keyframes transitionScreen{0%{opacity:0;background:rgba(7,20,38,0)}10%{opacity:1;background:rgba(7,20,38,.82)}76%{opacity:1;background:rgba(7,20,38,.78)}100%{opacity:0;background:rgba(7,20,38,0)}}
@keyframes pageGlow{0%{opacity:0}15%{opacity:.85}55%{opacity:.55}100%{opacity:0}}
@keyframes pageBandSlide{0%{opacity:0;transform:translateX(-120%) scaleX(.88)}14%{opacity:1}38%{opacity:1;transform:translateX(-8%) scaleX(1)}62%{opacity:1;transform:translateX(8%) scaleX(1)}86%{opacity:.85}100%{opacity:0;transform:translateX(120%) scaleX(.9)}}
@keyframes pageLogoHero{0%{opacity:0;transform:translate(-50%,-58%) scale(.72)}16%{opacity:1}38%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:0;transform:translate(-50%,-44%) scale(.92)}}
@keyframes pageTitleHero{0%{opacity:0;letter-spacing:.35em}20%{opacity:.96}45%{letter-spacing:.26em}75%{opacity:.92}100%{opacity:0;letter-spacing:.18em}}


/* V8 — corrections d'animation et des réservations */
#page-reservations{grid-template-rows:auto auto auto minmax(0,1fr) auto!important;padding:13px 22px 10px;gap:5px;}
#page-reservations .page-heading{font-size:clamp(22px,2vw,34px);margin:0;}
#page-reservations .reservation-summary{gap:8px;margin:0;}
#page-reservations .summary-box{padding:6px 8px;}
#page-reservations .summary-number{font-size:clamp(25px,2.5vw,40px);}
#page-reservations .summary-label{font-size:clamp(10px,.8vw,15px);}
.reservation-events-panel{padding:8px 14px;min-height:0;overflow:hidden;}
.reservation-events-panel .panel-title{font-size:clamp(12px,.93vw,17px);margin:0 0 5px;}
.reservation-events-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;}
.reservation-event{display:flex;gap:10px;align-items:center;min-width:0;font-size:clamp(12px,1vw,17px);white-space:nowrap;overflow:hidden;}
.reservation-event strong{overflow:hidden;text-overflow:ellipsis;max-width:42%;}
.reservation-event span:last-child{overflow:hidden;text-overflow:ellipsis;}
.reservation-event-tag{font-weight:900;font-size:.78em;color:#ffc928;}
.reservation-event-empty{opacity:.7;padding:4px;}
#page-reservations .availability-wrap{padding:5px;min-height:0;}
#page-reservations .availability-table{border-spacing:3px;font-size:clamp(10px,.75vw,14px);}
#page-reservations .availability-table td,#page-reservations .availability-table th{padding:2px 3px;}
#page-reservations .reservation-slot{padding:4px 2px;}
#page-reservations .reservation-slot small{font-size:clamp(8px,.7vw,11px);}
#page-reservations .material{font-size:clamp(10px,.85vw,15px);}
.ticker-copy{animation:none!important;transform:none!important;transition:none!important;}
.ticker-copy.ticker-fade-in{animation:tickerFade 1.15s ease both!important;}
@keyframes tickerFade{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.birthday-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:12;}
.confetti-piece{position:absolute;top:-24px;width:10px;height:16px;opacity:0;border-radius:2px;animation:confettiDrop 3s linear both;}
@keyframes confettiDrop{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0deg)}9%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),105vh,0) rotate(680deg)}}
/* Grand logo toujours accompagné de la bande. Transition de 5,5 s sans son. */
.page-transition.play{animation:transitionScreen 5.5s ease both!important;}
.page-transition.play .page-transition-glow{animation:pageGlow 5.5s ease both!important;}
.page-transition.play .page-transition-band{animation:v8Band 5.5s cubic-bezier(.2,.74,.2,1) both!important;}
.page-transition.play .page-transition-logo{animation:v8Logo 5.5s ease both!important;}
.page-transition.play .page-transition-title{animation:pageTitleHero 5.5s ease both!important;}
.page-transition-logo{width:min(40vw,480px)!important;height:min(45vh,420px)!important;}
@keyframes v8Band{0%{opacity:0;transform:translateX(-120%)}15%{opacity:1}35%{opacity:1;transform:translateX(-12%)}75%{opacity:1;transform:translateX(12%)}100%{opacity:0;transform:translateX(120%)}}
@keyframes v8Logo{0%{opacity:0;transform:translate(-50%,-55%) scale(.72)}16%{opacity:1}35%{opacity:1;transform:translate(-50%,-50%) scale(1)}76%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
@media(prefers-reduced-motion:reduce){.confetti-piece{animation:none!important;display:none}.ticker-copy.ticker-fade-in{animation:none!important}}

/* AMICALE 047 TV — transition plein écran et panneaux de gare */
.page-transition{position:fixed!important;inset:0!important;z-index:99990!important;background:#071426!important;opacity:0;visibility:hidden;pointer-events:none;}
.page-transition.play{visibility:visible;animation:amicaleFullScreen 5s ease both!important;}
.page-transition-logo{width:min(43vw,620px)!important;height:min(48vh,520px)!important;top:43%!important;}
.page-transition-title{top:calc(43% + min(24vh,260px))!important;letter-spacing:.15em!important;}
.page-transition-band{height:230px!important;margin-top:-115px!important;}
.page-transition.play .page-transition-logo{animation:amicaleLogoFull 5s ease both!important;}
.page-transition.play .page-transition-band{animation:amicaleBandFull 5s ease both!important;}
.page-transition.play .page-transition-title{animation:amicaleTitleFull 5s ease both!important;}
@keyframes amicaleFullScreen{0%{opacity:0}12%,76%{opacity:1}100%{opacity:0}}
@keyframes amicaleLogoFull{0%{opacity:0;transform:translate(-50%,-47%) scale(.85)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
@keyframes amicaleBandFull{0%{opacity:0;transform:translateX(-110%)}25%,65%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(110%)}}
@keyframes amicaleTitleFull{0%,15%{opacity:0}28%,75%{opacity:1}100%{opacity:0}}
.station-page{display:flex;flex-direction:column;gap:16px;background:radial-gradient(ellipse at top,#203044,#09111c 72%)!important;}
.station-page.active{display:flex}
.station-header{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:57px;color:#ffce45;}
.station-header h1{margin:0;font-size:clamp(21px,2vw,36px);letter-spacing:.075em}
.station-header>div,.station-header>span{font-size:clamp(15px,1.2vw,24px);text-transform:uppercase}
.station-dual{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0}
.station-board{background:#080c12;border:2px solid #33404e;border-radius:8px;min-width:0;padding:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px #0008}
.station-board-heading{font-size:clamp(28px,2.3vw,44px);font-weight:900;color:#fbd25b;letter-spacing:.08em;margin-bottom:14px}
.station-columns,.station-row{display:grid;grid-template-columns:75px minmax(0,1.4fr) minmax(0,1.3fr) 48px;gap:6px;align-items:center}
.station-columns{font-size:clamp(14px,.95vw,20px);color:#9daabd;padding-bottom:10px;border-bottom:1px solid #465463}
.station-rows{overflow:hidden;flex:1;min-height:0;padding-top:8px}
.station-row{margin:6px 0;min-height:50px}
.station-flap{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#252d36 0 48%,#090d14 49% 52%,#1b232d 53% 100%);padding:12px 8px;border-radius:4px;color:#f8f8ee;font-size:clamp(13px,1.03vw,21px);font-weight:800;box-shadow:inset 0 1px #49515c,0 2px 4px #0007}
.station-name,.station-material{font-size:clamp(18px,1.25vw,24px)}
.station-quantity{color:#ffce45;justify-content:center}
.station-time{color:#ffce45}
.station-empty{padding:46px 12px;text-align:center;color:#b9c4ce;font-size:28px}
.station-footer{display:flex;justify-content:space-between;gap:20px;color:#9eacbe;font-size:clamp(13px,1vw,19px);letter-spacing:.07em}
.station-hidden{display:none}
.station-planning-wrap{min-height:0;flex:1;overflow:hidden;background:#080c12;border:2px solid #33404e;border-radius:8px;padding:12px}
.station-planning-table{border-spacing:5px;border-collapse:separate;width:100%;height:100%;table-layout:fixed}
.station-planning-table th:first-child{width:24%}
.station-planning-table td,.station-planning-table th{text-align:center;padding:2px}
.station-planning-table th small{display:block;color:#d9e1ed;font-size:clamp(10px,.9vw,16px);padding-top:4px}
.station-planning-table .station-flap{justify-content:center;font-size:clamp(13px,1.1vw,22px)}
.station-planning-table .planning-material{justify-content:flex-start}
.station-green{color:#82efa7}.station-yellow{color:#ffde66}.station-red{color:#ff7777}.station-unknown{color:#9daabd}
.station-flipping .station-flap{animation:stationFlip .72s ease both;animation-delay:var(--flip-delay,0ms);transform-origin:center}
@keyframes stationFlip{0%{transform:perspective(450px) rotateX(-85deg);opacity:.25}60%{transform:perspective(450px) rotateX(9deg);opacity:1}100%{transform:perspective(450px) rotateX(0);opacity:1}}
.info-page-message{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:1100px){.station-dual{grid-template-columns:1fr}.station-board{min-height:0}.station-row{min-height:35px}.station-flap{padding:7px 5px}}


/* V8.2 — palettes individuelles, muettes, et habillage dynamique plein écran */
.station-character-board{display:flex;align-items:center;justify-content:flex-start;gap:2px;min-width:0;overflow:hidden;white-space:nowrap;width:100%;}
.station-letter{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:clamp(18px,1.45vw,30px);height:clamp(40px,3.7vw,68px);padding:0 2px;border-radius:3px;font:900 clamp(20px,1.8vw,34px)/1 'Arial Narrow',Arial,sans-serif;color:#f8f5e8;background:linear-gradient(to bottom,#39414c 0%,#2b3340 46%,#0a0d14 47%,#1d2632 55%,#313945 100%);box-shadow:inset 0 1px 0 #636d78,0 2px 3px #0009;backface-visibility:hidden;}
.station-letter.station-space{min-width:8px;background:transparent;box-shadow:none;}
.station-letter-active{animation:letterMechanicalFlip .11s linear both;}
@keyframes letterMechanicalFlip{0%{transform:perspective(170px) rotateX(-85deg);filter:brightness(1.6)}100%{transform:perspective(170px) rotateX(0);filter:brightness(1)}}
.station-whole{display:flex;width:100%;justify-content:flex-start;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:clamp(42px,3.7vw,68px);padding:0 12px;font-size:clamp(18px,1.55vw,28px);letter-spacing:.06em;}
.station-whole-active{animation:stationFlip .72s ease both;animation-delay:var(--flip-delay,0ms)}
.station-row{grid-template-columns:minmax(88px,.82fr) minmax(0,2.25fr) minmax(0,1.75fr) minmax(64px,.6fr);min-height:74px;}
.station-columns{grid-template-columns:minmax(88px,.82fr) minmax(0,2.25fr) minmax(0,1.75fr) minmax(64px,.6fr);}
.station-planning-table .station-character-board{justify-content:center}
.station-planning-table .station-letter{min-width:clamp(14px,1.1vw,22px);height:clamp(34px,2.9vw,56px);font-size:clamp(16px,1.2vw,24px)}
.page-transition.play{animation:v82Screen 5s linear both!important;}
.page-transition{background:#071426!important;}
.page-transition.play .page-transition-band{animation:v82Band 5s cubic-bezier(.2,.75,.25,1) both!important;}
.page-transition.play .page-transition-logo{animation:v82Logo 5s cubic-bezier(.2,.7,.2,1) both!important;}
.page-transition-title{width:min(94vw,1500px);text-align:center;top:calc(44% + min(24vh,260px))!important;font-size:clamp(18px,2.5vw,42px)!important;letter-spacing:.065em!important;white-space:normal;line-height:1.15}
.page-transition.play .page-transition-title{animation:v82Title 5s ease both!important;}
.page-transition-stripe{position:absolute;left:-30%;width:160%;height:14px;top:27%;transform:translateX(-110%) skewX(-22deg);background:#e32630;box-shadow:0 0 35px #e3263077;opacity:0;}
.page-transition-stripe.stripe-three{top:77%;height:8px;background:#f5f7f9;}
.page-transition.play .stripe-two{animation:v82StripeA 5s ease-in-out both;}
.page-transition.play .stripe-three{animation:v82StripeB 5s ease-in-out both;}
@keyframes v82Screen{0%{opacity:0}9%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes v82Band{0%{opacity:0;transform:translateX(-120%)}14%{opacity:1;transform:translateX(-25%)}32%{opacity:1;transform:translateX(0)}68%{opacity:1;transform:translateX(14%)}100%{opacity:0;transform:translateX(125%)}}
@keyframes v82Logo{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes v82Title{0%,13%{opacity:0}28%,74%{opacity:1}100%{opacity:0}}
@keyframes v82StripeA{0%{opacity:0;transform:translateX(-115%) skewX(-22deg)}25%{opacity:.8;transform:translateX(0) skewX(-22deg)}75%{opacity:.8;transform:translateX(4%) skewX(-22deg)}100%{opacity:0;transform:translateX(110%) skewX(-22deg)}}
@keyframes v82StripeB{0%{opacity:0;transform:translateX(115%) skewX(20deg)}28%{opacity:.5;transform:translateX(0) skewX(20deg)}74%{opacity:.5;transform:translateX(-3%) skewX(20deg)}100%{opacity:0;transform:translateX(-115%) skewX(20deg)}}
@media(prefers-reduced-motion:reduce){.station-letter-active,.station-whole-active{animation:none!important}.page-transition.play .page-transition-stripe{animation:none!important}}


/* V8.2.1 — logo au premier plan, devant tous les rubans */
.page-transition-glow{z-index:1}
.page-transition-band,.page-transition-stripe{z-index:2}
.page-transition-logo{z-index:5!important;width:min(52vw,760px)!important;height:min(53vh,580px)!important;top:41%!important;filter:drop-shadow(0 28px 60px rgba(0,0,0,.72)) drop-shadow(0 0 24px rgba(255,255,255,.18))!important;}
.page-transition-title{z-index:6!important;top:calc(41% + min(28vh,298px))!important;text-shadow:0 5px 25px rgba(0,0,0,.9)}
.page-transition.play .page-transition-logo{animation:v821LogoForeground 5s cubic-bezier(.2,.76,.23,1) both!important}
@keyframes v821LogoForeground{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.38);filter:blur(9px)}
  13%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(5px)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.12);filter:blur(0)}
  43%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  73%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}
  90%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}


/* =======================================================
   V8.7 — RÉSERVATIONS : VRAI DOUBLE TABLEAU DE GARE
   Deux panneaux pleine largeur, trois lignes visibles,
   colonnes séparées et planning 7 jours distinct.
   ======================================================= */
#page-reservations.station-page,
#page-reservation-planning.station-page{
  display:flex!important;
  flex-direction:column!important;
  grid-template-rows:none!important;
  padding:17px 26px 14px!important;
  gap:13px!important;
  background:radial-gradient(ellipse at 50% -15%,#263c52 0%,#0a1523 60%,#050c15 100%)!important;
}
#page-reservations .station-header,
#page-reservation-planning .station-header{
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 48px;min-height:48px;margin:0;
  color:#fff;border-bottom:2px solid rgba(235,240,247,.13);padding-bottom:9px;
}
#page-reservations .station-header h1,
#page-reservation-planning .station-header h1{
  font-size:clamp(22px,2.1vw,38px)!important;
  font-weight:900;letter-spacing:.035em;line-height:1.1;
}
#page-reservations .station-header #stationDate,
#page-reservation-planning .station-header>span{
  font-size:clamp(14px,1.18vw,22px);color:#e9c668;font-weight:800;white-space:nowrap;
}
#page-reservations .station-dual{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:17px!important;
  flex:1 1 auto;min-height:0;min-width:0;width:100%;
}
#page-reservations .station-board{
  display:flex!important;flex-direction:column!important;min-width:0;min-height:0;
  width:100%;padding:13px 18px 11px!important;
  background:linear-gradient(160deg,#0b1018 0%,#0b121c 100%);
  border:2px solid #445566;border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.38);
}
#page-reservations .station-board:first-child{border-left:8px solid #dc4145}
#page-reservations .station-board:last-child{border-left:8px solid #59a5d7}
#page-reservations .station-board-heading{
  flex:0 0 auto;display:flex;align-items:center;min-height:39px;
  margin:0 0 6px!important;
  font-size:clamp(22px,1.95vw,36px)!important;line-height:1.08;
  font-weight:900;letter-spacing:.055em;color:#ffdb70;
}
#page-reservations .station-columns,
#page-reservations .station-row{
  display:grid!important;
  grid-template-columns:minmax(110px,11%) minmax(110px,11%) minmax(0,36%) minmax(0,33%) minmax(72px,9%)!important;
  column-gap:12px!important;
  align-items:center;min-width:0;
}
#page-reservations .station-columns{
  flex:0 0 auto;padding:0 6px 8px;margin-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.20);
  color:#bfcbd8;font-size:clamp(14px,1.05vw,20px)!important;
  font-weight:800;letter-spacing:.05em;
}
#page-reservations .station-rows{
  display:grid!important;grid-template-rows:repeat(3,minmax(0,1fr));
  gap:7px!important;flex:1 1 auto;min-height:0;
  overflow:hidden!important;padding:0!important;
}
#page-reservations .station-row{
  height:auto!important;max-height:none!important;min-height:0!important;
  margin:0!important;padding:3px 6px;
  background:linear-gradient(90deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border:1px solid rgba(231,237,247,.12);border-radius:6px;
}
#page-reservations .station-row:nth-child(even){background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(255,255,255,.035));}
#page-reservations .station-character-board{gap:2px!important;overflow:hidden;width:100%;}
#page-reservations .station-letter{
  width:var(--station-tile-width,clamp(18px,1.5vw,30px))!important;
  min-width:0!important;flex:0 0 var(--station-tile-width,clamp(18px,1.5vw,30px))!important;
  height:clamp(36px,3.0vw,60px)!important;
  font-size:var(--station-tile-font,clamp(19px,1.6vw,32px))!important;
  padding:0!important;border-radius:3px;
}
#page-reservations .station-letter.station-space{background:transparent;box-shadow:none;flex-basis:9px!important;width:9px!important;}
#page-reservations .station-whole{
  height:clamp(36px,3vw,60px)!important;
  font-size:clamp(19px,1.65vw,32px)!important;
  line-height:1.08;max-width:100%;padding:0 15px!important;
}
#page-reservations .station-quantity{justify-content:center;color:#ffe082}
#page-reservations .station-empty{
  grid-row:1/-1;display:flex;align-items:center;justify-content:center;
  padding:0;text-align:center;color:#c4ceda;font-size:clamp(19px,1.65vw,30px);
}
#page-reservations .station-footer,
#page-reservation-planning .station-footer{
  flex:0 0 26px;display:flex;justify-content:space-between;align-items:center;
  color:#aab9c8;font-size:clamp(12px,.88vw,17px);
  white-space:nowrap;gap:20px;
}
/* La page suivante est distincte et doit rester entièrement visible. */
#page-reservation-planning .station-planning-wrap{
  flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;
  background:#0a0f18;border:2px solid #425364;border-radius:10px;
  padding:14px 16px;
}
#page-reservation-planning .station-planning-table{
  width:100%;height:100%;table-layout:fixed;border-spacing:7px 5px;
}
#page-reservation-planning .station-planning-table th:first-child{width:25%}
#page-reservation-planning .station-planning-table th,
#page-reservation-planning .station-planning-table td{padding:3px;overflow:hidden;}
#page-reservation-planning .station-planning-table .station-whole{
  min-width:0;max-width:100%;justify-content:flex-start;
  font-size:clamp(17px,1.35vw,26px);height:clamp(38px,3.3vw,60px);
  padding:0 9px;
}
#page-reservation-planning .station-planning-table .station-character-board{justify-content:center;gap:1px;}
#page-reservation-planning .station-planning-table .station-letter{
  min-width:0;width:var(--station-tile-width,clamp(15px,1.25vw,23px));
  flex:0 0 var(--station-tile-width,clamp(15px,1.25vw,23px));
  height:clamp(30px,2.6vw,51px);font-size:var(--station-tile-font,clamp(16px,1.26vw,24px));
}
#page-reservation-planning .station-planning-table th small{
  color:#c7d4e3;font-size:clamp(12px,.88vw,17px)
}
@media(max-width:1100px){
  #page-reservations .station-columns,#page-reservations .station-row{
    grid-template-columns:minmax(86px,11%) minmax(86px,11%) minmax(0,34%) minmax(0,35%) minmax(54px,9%)!important;
    column-gap:5px!important;
  }
  #page-reservations .station-board{padding:9px 11px 8px!important}
  #page-reservations .station-columns{font-size:12px!important}
  #page-reservations .station-board-heading{font-size:21px!important;min-height:27px}
  #page-reservations .station-dual{gap:10px!important}
  #page-reservations .station-letter{height:clamp(30px,3vw,46px)!important}
  #page-reservations .station-whole{height:clamp(30px,3vw,46px)!important;font-size:clamp(15px,1.7vw,22px)!important}
}

/* V8.8 — tableaux noirs à lettres dorées ; prénom + initiale, matériel en un volet */
#page-reservations.station-page{background:radial-gradient(ellipse at 50% 0,#152539,#060a10 75%)!important}
#page-reservations .station-dual{gap:20px!important}
#page-reservations .station-board{background:#090b0e!important;border-color:#3e4750;box-shadow:inset 0 1px rgba(255,255,255,.06),0 11px 30px rgba(0,0,0,.42)}
#page-reservations .station-board-heading{color:#dfbb52!important}
#page-reservations .station-columns,
#page-reservations .station-row{
  grid-template-columns:minmax(104px,11%) minmax(114px,12%) minmax(0,34%) minmax(0,34%) minmax(65px,9%)!important;
  column-gap:14px!important;
}
#page-reservations .station-columns{color:#b9a774!important;border-bottom:1px solid #5b4a24!important}
#page-reservations .station-rows{gap:10px!important}
#page-reservations .station-row{min-height:0!important;padding:5px 12px!important;border-radius:7px;border:1px solid #393e42!important;background:linear-gradient(180deg,#191d22 0%,#11151b 100%)!important}
#page-reservations .station-character-board{gap:3px!important;min-width:0;overflow:hidden}
#page-reservations .station-letter,
#page-reservations .station-whole{
  background:linear-gradient(to bottom,#111317 0%,#090a0c 46%,#414348 48%,#050608 50%,#080a0d 55%,#131519 100%)!important;
  color:#c49a32!important;
  border:1px solid #3d3d3d!important;
  border-radius:4px!important;
  text-shadow:0 1px 0 #020303,0 0 2px rgba(216,173,65,.17)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 3px 6px #0009!important;
  font-family:'Arial Narrow','Roboto Condensed',Arial,sans-serif!important;
  font-weight:900!important;
}
#page-reservations .station-letter{
  height:clamp(44px,3.85vw,74px)!important;
  font-size:var(--station-tile-font,clamp(23px,2.15vw,40px))!important;
  line-height:1!important;
}
#page-reservations .station-letter.station-space{background:transparent!important;border:0!important;box-shadow:none!important}
#page-reservations .station-whole{
  display:flex;align-items:center;justify-content:flex-start;
  height:clamp(44px,3.85vw,74px)!important;
  font-size:clamp(22px,1.85vw,36px)!important;
  padding:0 18px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  letter-spacing:.045em;
}
#page-reservations .station-fixed{
  display:flex;align-items:center;justify-content:flex-start;
  min-width:0;
  color:#f2ead2;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,2.25vw,42px);
  white-space:nowrap;
  line-height:1.1;
}
#page-reservations .station-fixed-date{color:#dcdad6}
#page-reservations .station-fixed-time{color:#e8c36a}
#page-reservations .station-fixed-qty{justify-content:center;color:#d7b452}
#page-reservations .station-letter-active{animation:stationLetterMechanical .108s linear both!important}
#page-reservations .station-whole-active{animation:stationLetterMechanical .108s linear both!important}
@keyframes stationLetterMechanical{
  0%{transform:perspective(500px) rotateX(-88deg);filter:brightness(1.65)}
  48%{transform:perspective(500px) rotateX(-22deg);filter:brightness(1.18)}
  100%{transform:perspective(500px) rotateX(0);filter:brightness(1)}
}
@media(max-width:1150px){
  #page-reservations .station-columns,#page-reservations .station-row{
    grid-template-columns:minmax(77px,11%) minmax(88px,12%) minmax(0,35%) minmax(0,34%) minmax(52px,8%)!important;
    column-gap:7px!important
  }
  #page-reservations .station-letter{height:clamp(38px,4.5vw,55px)!important}
  #page-reservations .station-whole{height:clamp(38px,4.5vw,55px)!important;font-size:clamp(17px,1.8vw,26px)!important}
  #page-reservations .station-fixed{font-size:clamp(20px,2.2vw,32px)}
}

/* ====================================================================
   V8.9 — affichage gare épuré : pas de double encadrement des palettes.
   Les effets mécaniques sont réservés aux départs / retours.
   ==================================================================== */
#page-reservations.station-page{
  background:radial-gradient(ellipse at 50% -30%,#1a3049 0%,#0b1726 55%,#070d17 100%)!important;
  padding:19px 31px 15px!important;
  gap:14px!important;
}
#page-reservations .station-dual{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:17px!important;
  flex:1 1 auto;min-height:0;width:100%;
}
#page-reservations .station-board{
  background:linear-gradient(180deg,rgba(25,35,48,.92),rgba(13,21,32,.95))!important;
  border:1px solid rgba(184,197,211,.25)!important;
  border-left:5px solid #d34c49!important;
  box-shadow:0 12px 26px #0004!important;
  border-radius:11px!important;
  padding:12px 25px 10px!important;
  overflow:hidden;min-width:0;min-height:0;
}
#page-reservations .station-board:last-child{border-left-color:#6ca7dc!important}
#page-reservations .station-board-heading{
  font-size:clamp(22px,1.65vw,34px)!important;
  font-weight:900!important;line-height:1.1;color:#e6bf59!important;
  margin:0 0 6px!important;min-height:35px!important;
  text-shadow:none!important;letter-spacing:.045em!important;
}
#page-reservations .station-columns,
#page-reservations .station-row{
  grid-template-columns: minmax(104px,7.2fr) minmax(116px,7.8fr) minmax(0,40fr) minmax(0,38fr) minmax(66px,7fr)!important;
  column-gap:clamp(9px,1.12vw,24px)!important;
  align-items:center!important;
  box-sizing:border-box!important;
  width:100%;
}
#page-reservations .station-columns{
  border-bottom:1px solid rgba(214,225,237,.22)!important;
  padding:0 6px 9px!important;
  margin-bottom:3px!important;
  color:#aebcd0!important;
  font-size:clamp(12px,1vw,19px)!important;
  line-height:1.25;
}
#page-reservations .station-rows{
  display:grid!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;overflow:hidden!important;
  padding:0!important;min-height:0;flex:1;
}
#page-reservations .station-row,
#page-reservations .station-row:nth-child(even){
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(203,214,230,.14)!important;
  border-radius:0!important;
  box-shadow:none!important;
  margin:0!important;
  min-height:0!important;
  padding:6px 6px!important;
}
#page-reservations .station-row:last-child{border-bottom:0!important}
#page-reservations .station-fixed{
  font-size:clamp(20px,1.8vw,34px)!important;
  font-weight:850!important;
  letter-spacing:.015em;
  min-width:0;
}
#page-reservations .station-fixed-date{color:#e2e9f2!important}
#page-reservations .station-fixed-time{color:#efcf7e!important}
#page-reservations .station-fixed-qty{color:#efcf7e!important;font-size:clamp(22px,1.9vw,36px)!important}
/* Chiffres et lettres seulement dans leurs propres volets, séparés du fond. */
#page-reservations .station-character-board{
  display:flex!important;justify-content:flex-start;align-items:center;
  gap:clamp(2px,.20vw,4px)!important;
  min-width:0;width:100%;height:auto;overflow:hidden!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;
}
#page-reservations .station-letter{
  position:relative;
  width:var(--station-tile-width,30px)!important;
  min-width:0!important;
  flex:0 0 var(--station-tile-width,30px)!important;
  height:clamp(40px,3.5vw,64px)!important;
  padding:0!important;
  border:1px solid #3b4047!important;
  border-radius:3px!important;
  color:#e2ba55!important;
  background:linear-gradient(180deg,#16191d 0%,#090b0e 47%,#34363a 49%,#06080b 51%,#15181c 100%)!important;
  text-shadow:0 1px 2px #000!important;
  font-size:var(--station-tile-font,clamp(21px,1.7vw,34px))!important;
  box-shadow:inset 0 1px #4a4d52,0 2px 4px rgba(0,0,0,.28)!important;
}
#page-reservations .station-letter.station-space{
  border:0!important;background:transparent!important;box-shadow:none!important;
  flex:0 0 10px!important;width:10px!important;
}
/* Le matériel reste un seul grand panneau noir, séparé des palettes du nom. */
#page-reservations .station-whole{
  display:flex;align-items:center;justify-content:flex-start;
  min-width:0!important;width:100%!important;height:clamp(42px,3.5vw,64px)!important;
  background:linear-gradient(180deg,#151719 0%,#090b0f 47%,#383a3d 49%,#080a0c 51%,#171a1e 100%)!important;
  color:#e2ba55!important;
  border:1px solid #41454a!important;
  border-radius:4px!important;
  padding:0 20px!important;
  box-shadow:inset 0 1px #52555a,0 2px 4px #0005!important;
  font-size:clamp(20px,1.7vw,33px)!important;
  letter-spacing:.03em!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#page-reservations .station-empty{
  grid-row:1/-1!important;justify-content:center!important;
  color:#c9d5e5!important;font-size:clamp(22px,1.65vw,32px)!important;
}
/* Planning : rendu simple, coloré, sans volet ni animation. */
#page-reservation-planning .station-planning-wrap{
  background:#101d2e!important;
  border:1px solid #3a5069!important;
  padding:12px 14px!important;
}
#page-reservation-planning .station-planning-table{
  border-spacing:6px 6px!important;
  border-collapse:separate!important;
  table-layout:fixed!important;
  height:100%;width:100%;
}
#page-reservation-planning .station-planning-table thead th{
  background:#21334a!important;border-radius:7px!important;
  color:#f2f4f7!important;vertical-align:middle!important;
  padding:8px 4px!important;
}
#page-reservation-planning .station-planning-table .planning-header-material{text-align:left;padding-left:20px!important}
#page-reservation-planning .planning-day-head,
#page-reservation-planning .planning-day-date{display:block;text-align:center;line-height:1.2}
#page-reservation-planning .planning-day-head{font-size:clamp(14px,1.25vw,23px);font-weight:900;color:#f2d17c}
#page-reservation-planning .planning-day-date{font-size:clamp(13px,1vw,20px);font-weight:600;color:#bccfe1;margin-top:5px}
#page-reservation-planning .station-planning-table tbody th{
  background:rgba(35,52,74,.86)!important;
  border-radius:7px!important;padding:7px 14px!important;
}
#page-reservation-planning .planning-material-label{text-align:left!important}
#page-reservation-planning .planning-material-icon{font-size:clamp(19px,1.7vw,33px);margin-right:9px;vertical-align:middle}
#page-reservation-planning .planning-material-name{font-size:clamp(15px,1.25vw,24px);font-weight:800;color:#eff4fc;vertical-align:middle;overflow-wrap:anywhere}
#page-reservation-planning .station-planning-table tbody td{padding:3px!important}
#page-reservation-planning .planning-status{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border-radius:7px;min-height:62px;height:100%;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.09);padding:7px 3px;
}
#page-reservation-planning .planning-status strong{font-size:clamp(17px,1.3vw,26px);font-variant-numeric:tabular-nums;line-height:1.16}
#page-reservation-planning .planning-status small{font-size:clamp(10px,.78vw,16px);line-height:1.2;margin-top:5px;letter-spacing:.03em}
#page-reservation-planning .planning-status-free{background:#173e36;color:#9aebc3}
#page-reservation-planning .planning-status-partial{background:#4a3b19;color:#ffe3a0}
#page-reservation-planning .planning-status-full{background:#4b2327;color:#ffb1b1}
#page-reservation-planning .planning-status-unknown{background:#2d3743;color:#c6d1db}
@media(max-width:1150px){
  #page-reservations .station-board{padding:9px 12px 7px!important}
  #page-reservations .station-columns,#page-reservations .station-row{
    grid-template-columns:minmax(74px,7fr) minmax(82px,8fr) minmax(0,39fr) minmax(0,39fr) minmax(47px,7fr)!important;
    column-gap:7px!important;
  }
  #page-reservations .station-letter{height:42px!important}
  #page-reservations .station-whole{height:42px!important;font-size:19px!important;padding:0 9px!important}
  #page-reservation-planning .planning-status small{display:none}
}


/* AMICALE TV V9.0 : affichage numérique type CATI (sans palette ni animation mécanique). */
#page-reservations.cati-page{
  display:flex!important;flex-direction:column;gap:clamp(9px,1.1vh,18px)!important;
  padding:clamp(12px,1.6vh,22px) clamp(18px,2.1vw,42px) clamp(9px,1.1vh,18px)!important;
  background:#071324!important;color:#fff;
}
#page-reservations.cati-page:not(.active){display:none!important}
.cati-page-header{display:flex;justify-content:space-between;align-items:end;gap:18px;flex:0 0 auto}
.cati-kicker{color:#8ab1dc;font-weight:800;letter-spacing:.14em;font-size:clamp(11px,1vw,17px)}
.cati-page-header h1{margin:4px 0 0;color:#fff;font-size:clamp(27px,2.65vw,49px);font-weight:900;letter-spacing:.025em;line-height:1.05}
.cati-current-date{color:#b4cee6;font-size:clamp(13px,1.25vw,22px);font-weight:700;text-align:right;white-space:nowrap;text-transform:uppercase}
.cati-dual{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.55vh,20px);min-height:0;flex:1}
.cati-board{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;border-radius:5px;border:1px solid rgba(255,255,255,.13);background:#06265b;box-shadow:0 4px 20px rgba(0,0,0,.22)}
.cati-arrivals{background:#07513e}
.cati-board-title{display:flex;align-items:center;gap:13px;flex:0 0 auto;padding:8px 20px;min-height:clamp(43px,5.1vh,65px);font-weight:900;font-size:clamp(25px,2.25vw,40px);letter-spacing:.035em;color:white;background:#063c8a}
.cati-arrivals .cati-board-title{background:#086f54}
.cati-board-title small{margin-left:auto;font-size:clamp(12px,1vw,17px);letter-spacing:.13em;color:#e3ebf7;font-weight:800}
.cati-board-mark{font-weight:900;color:#ffda46}
.cati-columns,.cati-row{display:grid;grid-template-columns:minmax(78px,10fr) minmax(112px,13fr) minmax(170px,25fr) minmax(225px,40fr) minmax(66px,12fr);gap:0;align-items:center;min-width:0}
.cati-columns{height:clamp(22px,3vh,36px);flex:0 0 auto;padding:0 clamp(10px,1vw,19px);font-weight:900;color:#cbdaef;font-size:clamp(12px,.91vw,17px);letter-spacing:.09em;background:rgba(0,0,0,.23)}
.cati-columns>span:nth-last-child(1){text-align:center}
.cati-rows{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cati-row{flex:1;min-height:0;padding:0 clamp(10px,1vw,19px);border-top:1px solid rgba(255,255,255,.11);font-size:clamp(20px,1.85vw,34px);font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.cati-row:nth-child(odd){background:rgba(21,97,180,.62)}
.cati-row:nth-child(even){background:rgba(5,36,91,.65)}
.cati-arrivals .cati-row:nth-child(odd){background:rgba(24,129,92,.66)}
.cati-arrivals .cati-row:nth-child(even){background:rgba(5,71,52,.64)}
.cati-row>div{min-width:0;padding-right:clamp(4px,.9vw,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cati-date{color:#ebf1ff;font-weight:800;font-size:clamp(20px,1.7vw,32px)}
.cati-hour{color:#ffe33d;font-weight:950;font-size:clamp(29px,2.65vw,48px);letter-spacing:-.035em}
.cati-person{color:#fff;font-weight:900}
.cati-material{color:#f5f8ff;font-weight:750}
.cati-row .cati-quantity{padding:0;text-align:center;overflow:visible}
.cati-quantity span{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(52px,5vw,95px);height:clamp(40px,4.8vh,64px);padding:3px 8px;background:#f5f7fc;color:#092857;border-radius:3px;font-size:clamp(19px,1.8vw,34px);font-weight:950}
.cati-arrivals .cati-quantity span{color:#07513e}
.cati-empty{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;font-size:clamp(19px,1.8vw,32px);font-weight:750;color:#e5ecfa}
.cati-footer{display:flex;justify-content:space-between;flex:0 0 auto;gap:14px;font-size:clamp(11px,.95vw,18px);font-weight:750;letter-spacing:.11em;color:#91aaca}
#page-reservations .station-hidden{display:none!important}
@media(max-width:1200px){
  .cati-columns,.cati-row{grid-template-columns:minmax(60px,10fr) minmax(78px,13fr) minmax(125px,25fr) minmax(145px,40fr) minmax(48px,12fr)}
  .cati-row{font-size:clamp(17px,1.7vw,23px)}
  .cati-hour{font-size:clamp(22px,2.1vw,31px)}
  .cati-quantity span{min-width:42px}
}
@media(max-height:720px){
  .cati-board-title{min-height:37px;padding:4px 14px}
  .cati-columns{height:22px}
  .cati-quantity span{height:32px}
}


/* V9.1 : planning complet, pagination autonome et couleurs plus affirmées.
   Toutes ces règles restent DANS la balise style : aucun code visible à l'écran. */
#page-reservation-planning.station-page{
  gap:clamp(7px,1vh,13px)!important;
  padding:clamp(11px,1.45vh,20px) clamp(15px,1.7vw,32px) clamp(10px,1.1vh,14px)!important;
}
#page-reservation-planning .station-header{flex:0 0 48px!important;min-height:48px!important}
#page-reservation-planning .planning-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:clamp(14px,1.07vw,20px);font-weight:850;color:#e6eefa}
#page-reservation-planning .planning-page-count{font-style:normal;color:#ffd15d;font-size:clamp(12px,.9vw,17px);font-weight:900;letter-spacing:.06em}
#page-reservation-planning .station-planning-wrap{min-height:0!important;overflow:hidden!important;padding:clamp(5px,.6vw,11px)!important;background:#0b1a2e!important;border:2px solid #42617d!important}
#page-reservation-planning .station-planning-table{
  width:100%!important;height:100%!important;table-layout:fixed!important;
  border-collapse:separate!important;border-spacing:clamp(2px,.3vw,6px) clamp(2px,.36vh,5px)!important;
}
#page-reservation-planning .station-planning-table th:first-child{width:29%!important}
#page-reservation-planning .station-planning-table thead th{
  background:#213f62!important;border:1px solid #3b6084!important;
  padding:clamp(4px,.55vh,8px) 3px!important;
}
#page-reservation-planning .station-planning-table tbody th{
  background:#152f4a!important;border:1px solid #35597b!important;
  padding:4px clamp(7px,.8vw,15px)!important;
}
#page-reservation-planning .station-planning-table tbody td{padding:1px!important}
#page-reservation-planning .planning-material-label{
  white-space:normal!important;text-align:left!important;vertical-align:middle!important;
  overflow:visible!important;line-height:1.18!important;
}
#page-reservation-planning .planning-material-icon{display:inline-block;font-size:clamp(21px,1.7vw,32px)!important;margin-right:7px!important}
#page-reservation-planning .planning-material-name{
  display:inline!important;font-size:clamp(17px,1.3vw,25px)!important;font-weight:900!important;
  line-height:1.2!important;color:#fff!important;overflow-wrap:anywhere!important;white-space:normal!important;
}
#page-reservation-planning .planning-day-head{color:#ffdd82!important;font-size:clamp(13px,1.05vw,21px)!important}
#page-reservation-planning .planning-day-date{color:#e8f2ff!important;font-size:clamp(13px,1vw,19px)!important;margin-top:3px!important}
#page-reservation-planning .planning-status{
  min-height:0!important;height:100%!important;box-sizing:border-box!important;
  border:2px solid transparent!important;border-radius:6px!important;
  padding:clamp(3px,.5vh,8px) 1px!important;
  font-weight:900!important;
}
#page-reservation-planning .planning-status strong{font-size:clamp(19px,1.55vw,29px)!important;line-height:1.09!important;color:#fff!important;font-weight:950!important}
#page-reservation-planning .planning-status small{display:block!important;font-size:clamp(10px,.82vw,15px)!important;color:rgba(255,255,255,.96)!important;margin-top:4px!important;letter-spacing:.035em!important}
#page-reservation-planning .planning-status-free{background:#11704f!important;border-color:#30b883!important;box-shadow:inset 0 0 0 1px #155940!important}
#page-reservation-planning .planning-status-partial{background:#936013!important;border-color:#f7b842!important;box-shadow:inset 0 0 0 1px #87500b!important}
#page-reservation-planning .planning-status-full{background:#992b3d!important;border-color:#f06b7c!important;box-shadow:inset 0 0 0 1px #7e1e30!important}
#page-reservation-planning .planning-status-unknown{background:#344b62!important;border-color:#7590a9!important}
#page-reservation-planning .planning-no-data{font-size:clamp(18px,1.5vw,26px);font-weight:700;color:#bcd0e3;padding:25px!important;text-align:center}
#page-reservation-planning .station-footer{flex:0 0 25px!important;gap:10px!important;font-size:clamp(11px,.76vw,15px)!important}
@media(max-width:1400px){
  #page-reservation-planning .planning-status strong{font-size:clamp(17px,1.55vw,23px)!important}
  #page-reservation-planning .planning-material-name{font-size:clamp(15px,1.35vw,21px)!important}
  #page-reservation-planning .planning-status small{font-size:clamp(9px,.85vw,13px)!important}
}

/* =======================================================
   AMICALE TV V9.2 : motion design + éphéméride grand écran
   ======================================================= */
.panel{
  /* Transparence réduite : fonds plus opaques, lecture améliorée. */
  background:linear-gradient(145deg,rgba(20,43,70,.978),rgba(7,20,38,.988));
}
/* Entrées discrètes : animation uniquement lorsque la page devient visible. */
.page.page-next-enter .panel:not(.webcam-full-card),
.page.page-next-enter .forecast-grid>*,
.page.page-next-enter .ax-forecast>*,
.page.page-next-enter .upcoming-item{
  animation:tv92Reveal .8s cubic-bezier(.22,.75,.25,1) both;
}
.page.page-next-enter .panel:nth-of-type(2),
.page.page-next-enter .forecast-grid>*:nth-child(2),
.page.page-next-enter .ax-forecast>*:nth-child(2),
.page.page-next-enter .upcoming-item:nth-child(2){animation-delay:.16s}
.page.page-next-enter .forecast-grid>*:nth-child(3),
.page.page-next-enter .ax-forecast>*:nth-child(3),
.page.page-next-enter .upcoming-item:nth-child(3){animation-delay:.29s}
.page.page-next-enter .forecast-grid>*:nth-child(n+4),
.page.page-next-enter .ax-forecast>*:nth-child(n+4),
.page.page-next-enter .upcoming-item:nth-child(n+4){animation-delay:.38s}
.page.page-next-enter .cati-board{animation:tv92Reveal .7s ease both}
.page.page-next-enter .cati-arrivals{animation-delay:.18s}
.page.page-next-enter .cati-row{animation:tv92RowIn .5s ease both}
.page.page-next-enter .cati-row:nth-child(2){animation-delay:.12s}
.page.page-next-enter .cati-row:nth-child(3){animation-delay:.24s}
.page.page-next-enter .station-planning-table{animation:tv92Reveal .7s ease both}
.page.page-next-enter .station-planning-table td{animation:tv92Cell .55s ease both}
.page.page-next-enter .station-planning-table td:nth-child(2){animation-delay:.08s}
.page.page-next-enter .station-planning-table td:nth-child(3){animation-delay:.13s}
.page.page-next-enter .station-planning-table td:nth-child(4){animation-delay:.18s}
.page.page-next-enter .station-planning-table td:nth-child(n+5){animation-delay:.23s}
@keyframes tv92Reveal{0%{opacity:0;transform:translateY(13px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tv92RowIn{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:translateX(0)}}
@keyframes tv92Cell{0%{opacity:.4}100%{opacity:1}}
/* Accueil : mouvement extrêmement lent, hors du texte. */
#page-home.active .info-home::after{
  content:'';position:absolute;right:-120px;bottom:-170px;width:360px;height:360px;border:1px solid rgba(255,201,40,.17);border-radius:50%;pointer-events:none;
  animation:tv92Pulse 18s ease-in-out infinite alternate;
}
#page-home .info-home{position:relative}
@keyframes tv92Pulse{0%{transform:scale(.93);opacity:.2}100%{transform:scale(1.07);opacity:.7}}
/* Éphéméride : les fonds sont fournis dans EphemeridePhotos.html */
#page-ephemeride.ephem-page{
  padding:0!important;position:absolute;isolation:isolate;
  display:block!important;background:#071324!important;color:white;
}
#page-ephemeride.ephem-page:not(.active){display:none!important}
.ephem-photo{position:absolute;inset:0;background-position:center center;background-size:cover;transition:opacity 3s ease;opacity:0;transform:scale(1.012);}
.ephem-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,16,32,.28),rgba(4,12,27,.12) 45%,rgba(5,16,32,.34)),linear-gradient(0deg,rgba(4,13,26,.34),transparent 55%);pointer-events:none;}
.ephem-ui{position:relative;height:100%;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(9px,1.3vh,19px);padding:clamp(15px,2vh,29px) clamp(18px,2.2vw,42px) clamp(9px,1.1vh,17px)}
.ephem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.ephem-overline{font-size:clamp(10px,.85vw,16px);font-weight:900;letter-spacing:.19em;color:#f2dca7;text-shadow:0 2px 7px #000c}
.ephem-head h1{font-size:clamp(26px,2.8vw,52px);font-weight:950;letter-spacing:.07em;margin:3px 0 0;line-height:1.05;text-shadow:0 4px 16px #000a}
.ephem-date{font-size:clamp(17px,1.4vw,27px);margin-top:5px;text-transform:capitalize;text-shadow:0 3px 9px #000c}
.ephem-mode{flex-shrink:0;min-width:180px;background:rgba(4,14,30,.94);border:1px solid rgba(255,255,255,.31);padding:12px 20px;border-radius:12px;text-align:center;font-size:clamp(16px,1.1vw,22px);font-weight:950;letter-spacing:.07em;box-shadow:0 8px 26px #0005}
.ephem-grid{display:grid;grid-template-columns:minmax(0,.77fr) minmax(0,2.45fr) minmax(0,.92fr);gap:clamp(9px,1.1vw,20px);min-height:0;align-items:stretch}
.ephem-card{min-width:0;min-height:0;background:rgba(5,17,35,.935);border:1px solid rgba(255,255,255,.26);border-radius:16px;box-shadow:0 15px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12);overflow:hidden;backdrop-filter:blur(9px);}
.ephem-feast,.ephem-moon-card{display:flex;flex-direction:column;padding:clamp(16px,1.5vw,29px);}
.ephem-label{font-size:clamp(12px,1.06vw,20px);font-weight:900;color:#f8dfb1;letter-spacing:.07em;line-height:1.3}
.ephem-feast{border-left:5px solid #ec6663}
.ephem-saint{margin-top:clamp(18px,3vh,40px);font-size:clamp(21px,1.65vw,32px);font-weight:900;line-height:1.23;overflow-wrap:anywhere}
.ephem-card-foot{margin-top:auto;padding-top:14px;color:#b7c9d8;font-size:clamp(10px,.82vw,15px);line-height:1.35}
.ephem-card-foot a{color:#d6e8ff;text-underline-offset:3px}
.ephem-moon-card{border-left:5px solid #bbcff3}
.ephem-moon-phase{margin-top:clamp(15px,3vh,37px);font-size:clamp(20px,1.5vw,30px);line-height:1.15;font-weight:900}
.ephem-moon-illum{margin-top:10px;color:#d3e4fc;font-size:clamp(15px,1.1vw,20px);font-weight:700}
.ephem-moon-rule{height:1px;background:rgba(255,255,255,.24);margin:clamp(12px,2.5vh,36px) 0}
.ephem-moon-event{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:clamp(9px,1.4vh,20px);font-size:clamp(13px,.96vw,19px);color:#dce7f6}
.ephem-moon-event strong{color:white;font-size:clamp(15px,1.14vw,22px);white-space:nowrap}
.ephem-arc-card{display:flex;flex-direction:column;padding:clamp(12px,1.1vw,23px) clamp(15px,1.3vw,26px) clamp(12px,1.2vw,23px);}
.ephem-arc-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:950;letter-spacing:.07em;color:#ffe7b6;font-size:clamp(14px,1.1vw,23px)}
#ephemNow{letter-spacing:0;color:#fff;font-size:clamp(17px,1.4vw,27px)}
.ephem-chart{display:block;width:100%;height:100%;flex:1;min-height:90px;overflow:visible;margin:0 auto}
.ephem-horizon{stroke:#c5cbd9;stroke-width:2;opacity:.8;fill:none}
.ephem-arc-path{stroke:rgba(255,233,150,.43);stroke-width:6;fill:none;stroke-linecap:round}
.ephem-arc-progress{stroke:url(#ephemPathGlow);stroke-width:7;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,198,88,.66))}
.ephem-arc-progress.moon{stroke:#dbeaff;filter:drop-shadow(0 0 5px #bcd5f799)}
.ephem-arc-path.moon{stroke:#9db6d184}
.ephem-body-halo{fill:#ffdba6;opacity:.13;filter:url(#ephemSoftGlow);animation:tv92Glow 2.7s infinite alternate ease-in-out}
.ephem-body-main{fill:#ffe171;filter:drop-shadow(0 0 12px #ffb51a)}
.ephem-body-shine{fill:#fff5c4;opacity:.8}
.ephem-body.moon .ephem-body-main{fill:#e7efff;filter:drop-shadow(0 0 10px #c4dafa)}
.ephem-body.moon .ephem-body-halo{fill:#d4e9fc}
.ephem-body.moon .ephem-body-shine{fill:#ffffff}
.ephem-moon-hidden #ephemBody{opacity:.15}
.ephem-axis-label{font-size:18px;font-weight:850;fill:#f2f4fc;letter-spacing:1px}
@keyframes tv92Glow{from{transform:scale(.9);opacity:.17}to{transform:scale(1.3);opacity:.38}}
.ephem-stats{flex-shrink:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:6px}
.ephem-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-left:1px solid rgba(255,255,255,.21);padding:3px 4px}
.ephem-stats>div:first-child{border-left:0}
.ephem-stats small{font-size:clamp(11px,.83vw,17px);color:#f7e0b3;letter-spacing:.035em;font-weight:900}
.ephem-stats strong{margin-top:6px;font-size:clamp(20px,2vw,40px);font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.ephem-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,18px)}
.ephem-timecell{display:flex;flex-direction:column;gap:7px;padding:clamp(12px,1.15vw,20px);border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(5,17,35,.915);box-shadow:0 6px 19px #0005;min-width:0;position:relative;overflow:hidden}
.ephem-timecell:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:#718fbf;opacity:.9}
.ephem-timecell[data-period="morning"]:before{background:#ffa646}
.ephem-timecell[data-period="day"]:before{background:#f6d151}
.ephem-timecell[data-period="sunset"]:before{background:#f06167}
.ephem-timecell.current{background:rgba(9,31,59,.965);border-color:rgba(255,238,166,.8);box-shadow:0 0 0 1px #ffda5b4f,inset 0 0 23px #eab8661f,0 8px 20px #0005}
.ephem-timecell b{font-size:clamp(13px,1vw,21px);letter-spacing:.04em}
.ephem-timecell span{font-size:clamp(12px,.99vw,20px);font-weight:750;color:#ecf0fa;white-space:nowrap}
.ephem-bottomline{text-align:center;font-size:clamp(9px,.7vw,14px);letter-spacing:.13em;font-weight:750;color:#e4e8f2;text-shadow:0 2px 6px #000;line-height:1.2}
.page.page-next-enter .ephem-card,.page.page-next-enter .ephem-timecell{animation:tv92Reveal .9s ease both}
.page.page-next-enter .ephem-arc-card{animation-delay:.13s}
.page.page-next-enter .ephem-moon-card{animation-delay:.23s}
.page.page-next-enter .ephem-timecell:nth-child(2){animation-delay:.14s}
.page.page-next-enter .ephem-timecell:nth-child(3){animation-delay:.24s}
.page.page-next-enter .ephem-timecell:nth-child(4){animation-delay:.34s}
@media(max-width:1280px){
  .ephem-grid{grid-template-columns:minmax(0,.78fr) minmax(0,2.1fr) minmax(0,.92fr)}
  .ephem-feast,.ephem-moon-card{padding:12px}
  .ephem-label{font-size:12px}
  .ephem-saint{font-size:20px}
  .ephem-moon-phase{font-size:19px}
  .ephem-timeline{gap:7px}
  .ephem-timecell{padding:11px 8px}
  .ephem-timecell span{font-size:12px}
}
@media(max-height:690px){
  .ephem-ui{gap:7px;padding:9px 17px 7px}
  .ephem-head h1{font-size:25px}
  .ephem-date{font-size:15px}
  .ephem-stats strong{font-size:20px}
  .ephem-arc-card{padding:9px}
  .ephem-timecell{padding:8px}
  .ephem-timecell b{font-size:12px}
  .ephem-timecell span{font-size:11px}
  .ephem-bottomline{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .ephem-photo,.ephem-body-halo,.page.page-next-enter .ephem-card,.page.page-next-enter .ephem-timecell{animation:none!important;transition:none!important}
}
body.motion-off .page.page-next-enter *,body.motion-off .ephem-body-halo{animation:none!important}
body.motion-off .ephem-photo{transition:none!important}


/* ===============================================
   AMICALE TV V9.3 — Habillage par saison/événement
   Contrast lisibilité prioritaire, CATI inchangé.
   =============================================== */
:root{--tv-theme-bg:#071426;--tv-theme-accent:#e32630;--tv-theme-soft:#ffc928;--tv-theme-glow:#f6a9a9}
body{background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--tv-theme-bg),#527bad 18%) 0%,var(--tv-theme-bg) 66%,#040a16 100%)}
header{border-bottom:2px solid var(--tv-theme-accent)!important;box-shadow:0 3px 28px color-mix(in srgb,var(--tv-theme-glow),transparent 82%)}
#app .panel-title{border-left-color:var(--tv-theme-accent)}
#app .page-heading{text-shadow:0 0 22px color-mix(in srgb,var(--tv-theme-glow),transparent 85%)}
#pageTransition.page-transition{background:var(--tv-theme-bg)!important}
#pageTransition .page-transition-band{background:linear-gradient(90deg,transparent 0%,var(--tv-theme-bg) 13%,var(--tv-theme-accent) 32%,var(--tv-theme-soft) 50%,var(--tv-theme-accent) 69%,var(--tv-theme-bg) 87%,transparent 100%)!important;box-shadow:0 0 46px var(--tv-theme-glow)!important}
#pageTransition .page-transition-glow{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--tv-theme-glow),transparent 55%),transparent 62%)}
#pageTransition .page-transition-stripe.stripe-two{background:var(--tv-theme-accent)}
#pageTransition .page-transition-stripe.stripe-three{background:var(--tv-theme-soft)}
#pageTransition .page-transition-logo{object-fit:contain}
/* On ne modifie pas la charte des lignes CATI ni les couleurs métier du planning. */
#page-reservations .cati-board,#page-reservation-planning .station-planning-wrap{filter:none!important}
.theme-ambient,.theme-transition-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.theme-ambient{z-index:8;opacity:.52}
.theme-transition-particles{z-index:4;opacity:.82}
.theme-piece{position:absolute;left:var(--x);top:-15px;width:var(--size);height:var(--size);border-radius:50%;background:white;opacity:.66;animation:tv93Fall var(--duration) linear var(--delay) infinite;transform:translate3d(0,-30px,0)}
.theme-transition-particles .theme-piece{top:-25px;width:calc(var(--size) * 1.35);height:calc(var(--size) * 1.35);opacity:.86;animation-duration:calc(var(--duration) * .55)}
.theme-piece.theme-petals{background:#f3b7d7;border-radius:70% 0 65% 0;transform:rotate(25deg)}
.theme-piece.theme-leaves{background:#e6a048;border-radius:85% 0 85% 0;box-shadow:0 0 2px #7b3a15}
.theme-piece.theme-sun{background:#ffe1a6;box-shadow:0 0 13px #ffca70;opacity:.36;animation-name:tv93Float}
.theme-piece.theme-sparkles,.theme-piece.theme-glow{background:#ffe391;box-shadow:0 0 15px #ffd35e;animation-name:tv93Float}
.theme-piece.theme-tricolor:nth-child(3n+1){background:#3e84e4}
.theme-piece.theme-tricolor:nth-child(3n+2){background:#fff}
.theme-piece.theme-tricolor:nth-child(3n){background:#df424c}
.theme-piece.theme-snow{background:#f6fdff;box-shadow:0 0 5px #bfecff}
@keyframes tv93Fall{0%{transform:translate3d(0,-32px,0) rotate(0deg);opacity:0}10%{opacity:.7}85%{opacity:.58}100%{transform:translate3d(var(--offset),105vh,0) rotate(310deg);opacity:0}}
@keyframes tv93Float{0%{transform:translate3d(0,25vh,0) scale(.6);opacity:0}25%{opacity:.8}80%{opacity:.4}100%{transform:translate3d(var(--offset),-60vh,0) scale(1.1);opacity:0}}
/* Éphéméride : 4 photographies x 4 rendus saisonniers = 16 ambiances. */
.ephem-photo-season--hiver{filter:brightness(.91) saturate(.70) contrast(1.04) hue-rotate(8deg)}
.ephem-photo-season--printemps{filter:brightness(1.06) saturate(1.12) contrast(1.02)}
.ephem-photo-season--ete{filter:brightness(1.08) saturate(1.17) sepia(.08) contrast(1.02)}
.ephem-photo-season--automne{filter:brightness(.98) sepia(.31) saturate(1.23) contrast(1.07)}
#page-ephemeride.ephem-page .ephem-overline,#page-ephemeride.ephem-page .ephem-label{color:var(--tv-theme-soft)}
#page-ephemeride.ephem-page .ephem-feast{border-left-color:var(--tv-theme-accent)}
#page-ephemeride.ephem-page .ephem-timecell.current{border-color:var(--tv-theme-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tv-theme-glow),transparent 58%),0 12px 22px #0006}
#page-ephemeride.ephem-page .ephem-photo-shade{background:linear-gradient(90deg,rgba(5,16,32,.31),rgba(4,12,27,.12) 45%,rgba(5,16,32,.36)),linear-gradient(0deg,rgba(4,13,26,.37),transparent 55%)}
/* Ambiance glacée et chaude à Noël, touches événementielles sur la page */
:root[data-theme="noel"] #page-ephemeride.ephem-page .ephem-card{box-shadow:0 12px 36px #0007,0 0 22px #ffde9c14}
:root[data-theme="halloween"] #page-ephemeride.ephem-page .ephem-card{border-color:#e39c6c55}
:root[data-theme="octobre_rose"] #page-ephemeride.ephem-page .ephem-card{border-color:#f9a5d655}
/* Commande de test intégrée à la régie */
.theme-picker{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;background:rgba(255,255,255,.075);border:1px solid #ffffff33;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:800;color:#fff}
.theme-picker select{background:#0c2843;color:white;border:1px solid #ffffff66;border-radius:7px;padding:9px 12px;min-width:225px;max-width:100%;font-size:14px}
.theme-picker .theme-active-name{font-size:12px;color:#ffdeae}
body.motion-off .theme-piece{animation:none!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.theme-piece{animation:none!important;opacity:0!important}}



/* =========================================================
   PACK AUTOMNE — FEUILLES FOURNIES
   ========================================================= */
.theme-ambient[data-season-layer^="automne"]{opacity:.94}
.theme-transition-particles[data-season-layer^="automne"]{opacity:1}
.theme-piece.theme-leaf-image{
  width:var(--leaf-size,42px);
  height:var(--leaf-size,42px);
  border-radius:0;
  background:transparent center/contain no-repeat;
  opacity:var(--leaf-opacity,.64);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.24));
  transform:translate3d(0,-40px,0) rotate(var(--rotate-start,0deg));
}
.theme-ambient .theme-piece.theme-leaf-image{
  animation-name:tv93LeafDrift;
  animation-timing-function:linear;
}
.theme-transition-particles .theme-piece.theme-leaf-image{
  animation-name:tv93LeafSweep;
  animation-timing-function:linear;
}
.theme-corner{
  position:absolute;
  width:var(--corner-size,170px);
  height:var(--corner-size,170px);
  background:transparent center/contain no-repeat;
  opacity:var(--corner-opacity,.78);
  pointer-events:none;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));
  z-index:0;
}
.theme-corner.corner-tl{left:-24px;top:-18px;transform:rotate(var(--corner-rotate,-15deg))}
.theme-corner.corner-tr{right:-18px;top:-12px;transform:rotate(var(--corner-rotate,15deg))}
.theme-corner.corner-bl{left:-22px;bottom:-18px;transform:rotate(var(--corner-rotate,-12deg))}
.theme-corner.corner-br{right:-18px;bottom:-18px;transform:rotate(var(--corner-rotate,12deg))}
@keyframes tv93LeafDrift{
  0%{transform:translate3d(0,-9vh,0) rotate(var(--rotate-start,-10deg));opacity:0}
  10%{opacity:var(--leaf-opacity,.56)}
  50%{transform:translate3d(var(--offset,30px),45vh,0) rotate(calc(var(--rotate-start,-10deg) + 18deg));opacity:var(--leaf-opacity,.56)}
  100%{transform:translate3d(calc(var(--offset,30px) * -1),108vh,0) rotate(var(--rotate-end,28deg));opacity:0}
}
@keyframes tv93LeafSweep{
  0%{transform:translate3d(0,-14vh,0) rotate(var(--rotate-start,-15deg));opacity:0}
  12%{opacity:var(--leaf-opacity,.96)}
  55%{transform:translate3d(var(--offset,50px),55vh,0) rotate(calc(var(--rotate-start,-15deg) + 32deg));opacity:var(--leaf-opacity,.96)}
  100%{transform:translate3d(calc(var(--offset,50px) * -1),112vh,0) rotate(var(--rotate-end,50deg));opacity:0}
}