:root{--ink:#27241f}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{font-family:Arial,"Helvetica Neue",sans-serif;color:#27241f}
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2.5vmin;background:radial-gradient(ellipse at 50% 40%,#30362f,#1b2520 75%,#131b17)}
.frame{position:relative;width:min(96vw,calc(94vh * 1.96),1450px);aspect-ratio:1.95;padding:1.25vw;border-radius:12px;background:linear-gradient(105deg,#513725,#896449 10%,#65452f 24%,#806048 55%,#4d3224 92%);box-shadow:inset 0 2px 2px #f0c59d77,inset 0 -5px 7px #26150ca6,5px 9px 0 #1a120e,10px 16px 23px #0007}
.frame:before{content:"";position:absolute;inset:5px;border:1px solid #d5a77b78;border-radius:8px;pointer-events:none}
.paper{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;border:2px solid #4b3426;background:radial-gradient(ellipse 63% 65% at 49% 41%,#fff9eb 0%,#ffefd4 68%,#eac091 100%);box-shadow:inset 0 0 20px #b77e4a70}
.paper:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(175deg,transparent 0 16px,#9c744510 17px,transparent 18px);opacity:.32}
.shoji{position:absolute;z-index:1;top:0;bottom:0;width:4.0%;display:flex;flex-direction:column;justify-content:space-evenly;background:linear-gradient(90deg,#d5a56f,#fff4dc 42%,#fff9e9 58%,#dfb57f);box-shadow:inset 0 0 9px #98603255}
.shoji.left{left:0;border-left:4px solid #62412e;border-right:4px solid #62412e}.shoji.right{right:0;border-left:4px solid #62412e;border-right:4px solid #62412e}
.shoji span{height:3px;background:#705038;box-shadow:0 1px 1px #0003}
.clock{position:absolute;z-index:2;top:0;bottom:0;width:48%;text-align:center;min-width:0}
.frclock{left:2.5%}.jpclock{right:2.5%}
.clock header,.clock .digital,.clock .date,.clock .weather{position:absolute;left:0;right:0;width:100%;margin:0}
.clock header{top:7.4%}.country{display:flex;align-items:center;justify-content:center;gap:7px;font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:2.62vw;font-weight:400;letter-spacing:.012em;white-space:nowrap}.city{font-size:1.5vw;font-style:italic;margin-top:5px;letter-spacing:.015em}
.flag{display:inline-block;width:2.4vw;height:.95vw;border:1px solid #7773;box-shadow:0 1px 2px #0002;flex-shrink:0}.france{background:linear-gradient(90deg,#153c93 0 33.33%,white 33.33% 66.66%,#ed3036 66.66%)}.japan{background:radial-gradient(circle,#bc2632 0 33%,transparent 35%),white}
.clock .digital{top:25%;display:flex;justify-content:center;align-items:baseline;gap:6px;white-space:nowrap}
.digital time{font-family:"Bahnschrift","Bahnschrift SemiCondensed","Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:10.05vw;font-weight:400;letter-spacing:-.055em;line-height:1.1;font-variant-numeric:tabular-nums;text-shadow:.4px .7px 1px #38291e35}
.seconds{font-size:5.45vw}
 .clock .date{top:56.8%;font-family:"Arial Narrow",Arial,sans-serif;font-size:2.02vw;white-space:nowrap}
.clock .weather{top:67%;display:flex;flex-direction:column;align-items:center;gap:1.2vw}
.weather-main{display:flex;align-items:center;justify-content:center;gap:10px}.weather-icon{font-size:4.35vw;min-width:1.2em;line-height:1}.weather-words{display:flex;flex-direction:column;align-items:flex-start;font-size:2.35vw}.weather-words small{font-size:1.35vw}.sun{padding-top:20px;font-size:1.35vw;line-height:1;white-space:nowrap}
.separator{position:absolute;z-index:3;left:50%;top:7.5%;height:84%;width:52px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center}.line{width:1.25px;background:#302b25;flex:1}.medallion{width:6.9vw;height:6.9vw;flex-shrink:0;border-radius:50%;overflow:hidden}.medallion img{display:block;width:100%;height:100%;object-fit:cover}
.screen-note{position:absolute;bottom:0;opacity:0;font-size:11px;color:#e8cfab}.screen-note.show{opacity:1}
@media(max-aspect-ratio:1/1){.frame{width:96vw;aspect-ratio:4/5}.shoji{width:5%}.clock{left:7%!important;right:auto!important;width:86%;height:45%;bottom:auto}.frclock{top:2%}.jpclock{top:53%}.separator{top:47%;height:6%;width:75%;left:50%;flex-direction:row}.line{height:1.25px;width:auto;flex:1}.clock header{top:8%}.clock .digital{top:28%}.clock .date{top:53%}.clock .weather{top:66%;gap:5px}.digital time{font-size:10vw}.country{font-size:3.5vw}.city{font-size:1.8vw}.clock .date{font-size:2.2vw}.sun{font-size:1.6vw}.weather-icon{font-size:4vw}.weather-words{font-size:2.5vw}}

/* V2.1 : sceau bonsaï et typographie affinée, sans déplacer la composition */
.digital time{font-family:"Roboto Condensed","Bahnschrift SemiCondensed","Arial Narrow",Arial,sans-serif;font-weight:300;letter-spacing:-.035em}
.seconds{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;font-weight:300}
.medallion{position:relative;background:radial-gradient(circle at 45% 40%,#fff8e7,#f1d3a9);border:1.2px solid #302b25;box-shadow:0 0 0 2px #f7e5c8;display:grid;place-items:center;overflow:hidden}
.medallion img{width:94%;height:92%;object-fit:contain;object-position:center center}
/* Variante avec pot : remplacer dans index.html bonsai-no-pot.png par bonsai-with-pot.png */

/* V2.2 — hiérarchie et placement, sans toucher aux grandes heures ni au cadre */
.clock header{top:7.4%}
.country{font-size:1.52vw;gap:.48vw}
.city{font-size:.9vw;font-style:normal;margin-top:5px;letter-spacing:.015em}
.flag{width:1.85vw;height:1.16vw}
.clock .date{top:52.8%;font-size:1.45vw}
.clock .weather{top:64.5%;height:28%;gap:0}
.weather-main{gap:.8vw}
.weather-icon{display:flex;align-items:center;justify-content:center;width:3vw;height:3vw;min-width:0;font-size:initial;line-height:1}
.weather-icon svg{width:100%;height:100%;stroke:#302b25;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;fill:none;overflow:visible}
.weather-words{font-size:1.7vw}
.weather-words small{font-size:1.03vw}
.sun{position:absolute;top:76%;left:0;right:0;padding-top:0;font-size:.96vw;line-height:1.35}
@media(max-aspect-ratio:1/1){
 .country{font-size:3.5vw}
 .city{font-size:1.8vw}
 .clock .date{top:53%;font-size:2.2vw}
 .clock .weather{top:66%;height:30%}
 .sun{top:66%;font-size:1.6vw}
 .weather-icon{width:4vw;height:4vw}
 .weather-words{font-size:2.5vw}
 .weather-words small{font-size:2vw}
}

/* V2.3 — l'écran est destiné à un véritable caisson en bois. */
.stage{padding:0;background:#211f1a;min-height:100vh}
.frame{width:min(100vw,calc(100vh * 1.95));max-width:none;aspect-ratio:1.95;padding:.35vw;border-radius:0;background:#64452f;box-shadow:none}
.frame:before{display:none}
.paper{border:0;box-shadow:none}
/* Hiérarchie plus lisible, sans réduire les heures */
.clock header{top:7.4%}
.country{font-size:2.05vw;gap:.7vw}
.city{font-size:1.35vw;margin-top:7px}
.flag{width:2.3vw;height:1.4vw}
.clock .date{top:52.8%;font-size:1.9vw}
.weather-icon{width:3.55vw;height:3.55vw}
.weather-words{font-size:2.1vw}
.weather-words small{font-size:1.4vw}
.sun{font-size:1.32vw;line-height:1.3}
/* Les secondes sont systématiquement sur deux caractères et légèrement remontées. */
.clock .digital{align-items:baseline;gap:.5vw}
.seconds{display:inline-block;min-width:2ch;line-height:1;position:relative;top:-.12em;font-variant-numeric:tabular-nums}
@media(max-aspect-ratio:1/1){
 .frame{width:100vw;aspect-ratio:4/5}
 .country{font-size:3.8vw}
 .city{font-size:2.3vw}
 .flag{width:4vw;height:2.5vw}
 .clock .date{font-size:2.6vw}
 .weather-words{font-size:2.8vw}
 .weather-words small{font-size:2.1vw}
 .sun{font-size:1.9vw}
 .weather-icon{width:4.5vw;height:4.5vw}
 .seconds{font-size:5vw}
}


/* V2.4 — corrections demandées : aucun changement de météo, shoji, bonsaï. */
/* L'unité vw suit la largeur du panneau, et non la fenêtre du navigateur. */
.paper{}
.clock header{top:5.7%}
.country{font-size:2.35vw;font-weight:700;letter-spacing:.005em}
.city{font-size:1.38vw;font-weight:400}
/* Plus d'amplitude aux grandes heures, sans réduire leur présence. */
.clock .digital{top:23.5%;gap:1.05vw}
.digital time{font-size:11.25vw;letter-spacing:-.025em;font-weight:400}
.seconds{font-size:4.45vw;top:-.08em;min-width:2ch}
/* Date remontée : on laisse le reste de la composition inchangé. */
.clock .date{top:51.1%}
@media(max-aspect-ratio:1/1){
 .clock header{top:6%}
 .country{font-size:3.8vw}
 .clock .digital{top:28%;gap:8px}
 .digital time{font-size:10vw}
 .seconds{font-size:5vw}
 .clock .date{top:53%}
}

/* V2.5 — ajustements ponctuels validés sur V2.4. */
/* Drapeaux +28 %, proportions propres à chaque pavillon. */
.flag{width:2.94vw;height:1.79vw}
/* Secondes remontées, sans toucher à leur taille ou leur espacement. */
.seconds{top:-.27em}
/* Date rapprochée discrètement. */
.clock .date{top:50.0%}
/* Séparateur légèrement plus soutenu, épaisseur identique. */
.line{background:#29241f}
@media(max-aspect-ratio:1/1){
 .flag{width:5.12vw;height:3.2vw}
 .seconds{top:-.27em}
 .clock .date{top:52%}
}

/* V2.6 — trois retouches ciblées depuis la V2.5. */
/* Heure et date descendent ensemble, sans toucher aux autres blocs. */
.clock .digital{top:24.7%}
.clock .date{top:51.2%}
/* Heures +3%, secondes inchangées. */
.digital time{font-size:11.59vw}
/* Drapeaux : même largeur, +12% en hauteur. */
.flag{height:2.005vw}
@media(max-aspect-ratio:1/1){
 .clock .digital{top:29.2%}
 .clock .date{top:53.2%}
 .digital time{font-size:10.3vw}
 .flag{height:3.58vw}
}


/* V2.7 : comparateur TYPO UNIQUEMENT — géométrie V2.6 inchangée */
.font-lab{position:fixed;z-index:20;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 10px;background:#20201eee;color:#fff;border:1px solid #ffffff35;border-radius:8px;box-shadow:0 3px 14px #0005;font:13px Arial,sans-serif;white-space:nowrap}
.font-lab button{font:inherit;color:#f5e8d1;background:#45413a;border:1px solid #ffffff40;border-radius:5px;padding:6px 9px;cursor:pointer}
.font-lab button[aria-pressed="true"]{background:#d5b88d;color:#171512}
.font-lab button:last-child{padding:6px 11px}
body[data-clock-font="roboto"] .digital time,body[data-clock-font="roboto"] .seconds{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:300}
body[data-clock-font="barlow"] .digital time,body[data-clock-font="barlow"] .seconds{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:400}
body[data-clock-font="original"] .digital time,body[data-clock-font="original"] .seconds{font-family:"Bahnschrift","Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-weight:400}
@media(max-width:700px){.font-lab{gap:4px;font-size:10px;bottom:4px;padding:5px}.font-lab button{padding:5px}}

.font-lab[hidden]{display:none}

/* V2.8 — seul le poids de Roboto Condensed change, géométrie intacte */
body[data-clock-font="roboto400"] .digital time,body[data-clock-font="roboto400"] .seconds{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:400}
body[data-clock-font="roboto500"] .digital time,body[data-clock-font="roboto500"] .seconds{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:500}

/* V2.9 : rails shoji simples, positions explicites, sans effet lumineux ou relief ajouté. */
.shoji{display:block;background:#f6e7cc;box-shadow:none;border-color:#60432e!important;border-left-width:3px!important;border-right-width:3px!important}
.shoji .rail{position:absolute;left:0;right:0;height:3px;background:#60432e;box-shadow:none;transform:none}
.shoji .rail-a{top:14%}
.shoji .rail-b{top:34%}
.shoji .rail-c{top:59%}
.shoji .rail-d{top:81%}
/* Le montant droit est légèrement décalé : ce n'est pas un motif répété. */
.shoji.right .rail-a{top:16%}
.shoji.right .rail-b{top:38%}
.shoji.right .rail-c{top:61%}
.shoji.right .rail-d{top:83%}

/* V3.0 — rails de repère uniquement ; aucun motif ni relief.
   Le futur habillage sera physique, imprimé en 3D. */
.shoji,.shoji.left,.shoji.right{
  width:4%;background:transparent;box-shadow:none;
  border:0!important;pointer-events:none;
}
.shoji.left{border-right:2px solid #302b25!important}
.shoji.right{border-left:2px solid #302b25!important}
/* L'image bonsai-no-pot.png possède un canal alpha : le papier reste visible. */
.medallion{
  background:transparent!important;
  border:2px solid #302b25;
  box-shadow:none!important;
}
.medallion img{background:transparent;object-fit:contain}
@media(max-aspect-ratio:1/1){
  .shoji,.shoji.left,.shoji.right{width:5%}
}


/* V3.1 — finition physique : trois corrections ciblées. */
/* L'habillage bois sera reel : aucun liseré marron ni marge autour du panneau. */
.frame{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.paper{border:0!important;box-shadow:none!important}
/* Les trois traits ont la meme epaisseur, les deux reperes lateraux restent en place. */
.line{width:2px;background:#302b25}
/* Cercle sans ombre ni effet propre, bordure nette de 2px. */
.medallion{border:2px solid #302b25!important;box-shadow:none!important;background:transparent!important}
@media(max-aspect-ratio:1/1){.line{width:auto;height:2px}}

/* iPad mini 1 / Safari iOS 9: fallback geometry */
.stage{min-height:100vh;height:100vh;overflow:hidden}
.frame{width:100vw;height:51.28vw;max-height:100vh;max-width:195vh;aspect-ratio:auto;margin:auto}
.paper{height:100%;width:100%}
/* Avoid modern grid-only centering for the bonsai */
.medallion{display:flex;align-items:center;justify-content:center}
/* Narrow old tablet: use screen width for text; preserve two clocks side by side */
@media (orientation:landscape) and (max-width:1100px){
.country{font-size:2.9vw}.city{font-size:1.65vw}
.digital time{font-size:11.1vw}.seconds{font-size:4.1vw}
.clock .date{font-size:2.1vw}.weather-words{font-size:2.1vw}
.weather-words small{font-size:1.4vw}.sun{font-size:1.35vw}
.flag{width:3.2vw;height:2.15vw}.medallion{width:7vw;height:7vw}
}
@media (orientation:portrait){.frame{width:100vw;height:125vw;max-height:100vh}}

/* iOS 9 : mode application web depuis écran d’accueil. */
html,body{min-height:100%;-webkit-text-size-adjust:100%;}
@media screen and (max-width:1024px) and (orientation:landscape){
 .stage{height:100vh;min-height:0;}
}

/* Compatibilite Safari 9 : images de drapeaux, pas de gradients CSS requis */
.flag.france,.flag.japan{display:inline-block;object-fit:fill;background:none!important;border:0;vertical-align:middle;}
/* Meilleure utilisation de la hauteur, sans modifier les proportions des horloges */
@media (orientation:landscape) and (max-width:1100px){
 .stage{height:100vh!important;min-height:0!important;}
 .frame{width:100vw!important;height:51.28vw!important;max-height:100vh!important;}
}

/* TokiDesk 2026-10-14 — responsive full-viewport landscape layout.
   iOS 9 compatible: no clamp(), min(), CSS custom properties or aspect-ratio required. */
@media screen and (orientation:landscape){
 html,body{width:100%;height:100%;overflow:hidden}
 .stage{position:relative;width:100vw;height:100vh;min-height:0;overflow:hidden;display:block;padding:0;background:#fff1d9}
 .frame{position:relative;top:0;left:0;margin:0!important;width:100vw!important;max-width:none!important;height:100vh!important;max-height:none!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .paper{position:relative;width:100%;height:100%;border:0;box-shadow:none}
 .clock{width:46%;}
 .frclock{left:3%}.jpclock{right:3%}
 .clock header{top:6%}
 .country{font-size:3.65vh;gap:1.0vh}
 .city{font-size:2.3vh;margin-top:.5vh}
 .flag{width:4.1vh!important;height:2.8vh!important}
 .clock .digital{top:25%;gap:.8vh;align-items:baseline}
 .digital time{font-size:18vh;line-height:1.05;letter-spacing:-.035em}
 .seconds{font-size:6.5vh;min-width:2ch}
 .clock .date{top:52%;font-size:3.05vh}
 .clock .weather{top:64%;height:29%}
 .weather-main{gap:1.9vh}
 .weather-icon{width:5.6vh;height:5.6vh;min-width:5.6vh}
 .weather-words{font-size:3.25vh}
 .weather-words small{font-size:2.05vh}
 .sun{top:78%;font-size:2.05vh}
 .separator{top:8%;height:84%}
 .medallion{width:8vh;height:8vh}
 .shoji,.shoji.left,.shoji.right{width:3%}
}
/* Very wide or shallow landscape screens: keep both clocks inside their columns. */
@media screen and (orientation:landscape) and (min-aspect-ratio:21/9){
 .digital time{font-size:17vh}
}