:root{color-scheme:light;--ink:#14271b;--muted:#59665f;--paper:#f6f4ee;--tile:#fcfbf8;--focus:#487052}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px 'DM Sans',sans-serif;caret-color:var(--ink)}::selection{background:#d6e1ce;color:var(--ink)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:5px}button{border:0;background:none}svg{flex-shrink:0}.icon{width:28px;height:28px}.shell{width:min(1180px,calc(100% - 88px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:24px 0 12px}.brand{display:flex;gap:9px;align-items:center;font:31px 'Libre Caslon Display',serif}.brand .icon{width:27px;height:29px}.clock{display:flex;align-items:center;gap:22px;font-size:14px}.clock #hour{font:24px 'Libre Caslon Display',serif;font-variant-numeric:tabular-nums;border-left:1px solid #d8ddd5;padding-left:22px}.welcome{text-align:center;margin:19px 0 30px}h1,h2,p{margin:0}h1{font:normal clamp(44px,4.7vw,68px)/1.05 'Libre Caslon Display',serif;letter-spacing:-.025em;text-wrap:balance}.welcome>p{margin-top:8px;font-size:18px;letter-spacing:.01em}form{width:min(750px,100%);margin:24px auto 0;display:flex;align-items:center;gap:16px;background:#fff;border-radius:40px;padding:8px 15px 8px 22px;box-shadow:0 9px 25px #2530250d;min-height:56px}.google{width:28px;height:28px}input[type=search]{border:0;background:none;min-width:0;flex:1;width:100%;height:40px;color:var(--ink);outline:none}input::placeholder{color:#657069;opacity:1}form:focus-within{outline:2px solid #81947b;outline-offset:2px}form input:focus-visible{outline:none}form button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}form button:hover{background:#edf2e9}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}.tile{display:block;background:var(--tile);border-radius:14px;overflow:hidden;box-shadow:0 5px 16px #25302508;transition:box-shadow .24s ease,transform .24s ease}.tile:hover{transform:translateY(-3px);box-shadow:0 12px 25px #25302515}.photo{aspect-ratio:2.04;background-image:url('assets/photographies.png');background-repeat:no-repeat;background-size:370.12% auto;background-color:#e5e1d6}.salon{background-image:url('assets/salon.webp');background-size:cover;background-position:center 54%}.nas{background-position:50.15% 37.69%}.proxmox{background-position:90.46% 37.69%}.mealie{background-position:8.88% 76.69%}.recette{background-position:50.15% 76.69%}.calibre{background-position:90.46% 76.69%}.caption{display:flex;align-items:center;gap:18px;padding:17px 23px;min-height:81px}.caption>.icon{width:35px;height:35px}.caption>div{min-width:0;flex:1}h2{font:normal 27px/1.1 'Libre Caslon Display',serif;letter-spacing:-.015em}.caption p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.4}.caption>.arrow{width:18px;height:18px;margin-left:3px}footer{margin-top:28px;padding:12px 0 18px;border-top:1px solid #dedfd7;display:flex;align-items:center;justify-content:space-between;gap:16px}footer p{font-size:11px;letter-spacing:.12em;color:var(--muted)}footer button{padding:7px;border-radius:50%}footer button:hover{background:#e7ebdf}footer .icon{width:20px;height:20px}#preferences{padding:18px 0 26px;border-top:1px solid #dedfd7}#preferences h2{font-size:25px;margin-bottom:14px}#preferences label{display:flex;gap:9px;align-items:center}input[type=checkbox]{accent-color:#365a40;width:17px;height:17px}#preferences p{color:var(--muted);font-size:13px;margin:10px 0 0 26px}@media(min-width:1500px){.shell{width:min(1328px,calc(100% - 140px))}header{padding-top:27px}.welcome{margin:28px 0 34px}h1{font-size:72px}form{margin-top:27px;min-height:60px;width:840px}.tiles{gap:20px 28px}.caption{min-height:90px;padding:18px 28px}.photo{aspect-ratio:2.04}.welcome>p{font-size:20px}}@media(max-width:1000px){.shell{width:calc(100% - 48px)}.caption{padding:16px 15px;gap:12px}.caption>.icon{width:27px;height:27px}h2{font-size:24px}.caption p{font-size:12px}.tiles{gap:18px}.clock{font-size:13px}}@media(max-width:740px){.shell{width:calc(100% - 36px)}header{padding-top:19px}.clock{gap:12px;font-size:11px}.clock #hour{font-size:21px;padding-left:12px}.brand{font-size:27px}.welcome{margin:31px 0 26px}h1{font-size:44px}.welcome>p{font-size:15px}form{margin-top:22px;padding-left:17px;gap:12px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.photo{aspect-ratio:2.04}.caption{gap:9px;padding:13px;min-height:80px}h2{font-size:23px}.caption p{font-size:11px}.caption>.arrow{display:none}.caption>.icon{width:23px;height:23px}footer{margin-top:23px}footer p{font-size:10px;letter-spacing:.06em}}@media(max-width:430px){.tiles{grid-template-columns:1fr;gap:18px}.photo{aspect-ratio:2.04}.caption{padding:16px 20px;gap:16px;min-height:79px}.caption>.icon{width:30px;height:30px}.caption>.arrow{display:block;width:18px;height:18px}h2{font-size:28px}.caption p{font-size:13px}h1{font-size:40px}.clock #date{max-width:85px;text-align:right}.clock #hour{font-size:20px}.brand{font-size:26px}footer p{max-width:260px;line-height:1.6}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:741px) and (max-height:900px){.shell{width:min(1100px,calc(100% - 64px))}header{padding:18px 0 8px}.welcome{margin:17px 0 25px}h1{font-size:54px}.welcome>p{font-size:17px}form{min-height:54px;margin-top:20px;width:min(750px,100%)}.caption{padding:16px 20px;min-height:80px}.tiles{gap:18px 24px}footer{margin-top:22px;padding:10px 0 12px}}
/* Courrier, placé juste avant la date. */
[hidden]{display:none!important}.clock{position:relative}.mail-widget{position:relative;display:flex;align-items:center}#mail-button{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:8px}#mail-button .icon{width:25px;height:25px}#mail-button:hover,#mail-button[aria-expanded=true]{background:#e7ebdf}#mail-badge{position:absolute;top:-1px;right:-5px;min-width:19px;height:19px;padding:0 4px;background:#9a4434;color:#fff;border-radius:12px;display:grid;place-items:center;font-size:10px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}.mail-needs-connection::after{content:'';width:7px;height:7px;background:#927042;border-radius:50%;position:absolute;top:5px;right:4px}#mail-panel{position:absolute;right:-1px;top:50px;width:360px;max-width:calc(100vw - 36px);padding:22px;background:#fcfbf8;border-radius:14px;box-shadow:0 14px 42px #14271b26;z-index:10;text-align:left;font-size:14px}#mail-panel h2{font-size:28px}#mail-summary{font-size:13px;line-height:1.5;margin:8px 0 14px;color:var(--muted)}.mail-account{padding:13px 0;border-top:1px solid #dedfd7}.mail-account:last-child{padding-bottom:0}.mail-inbox{display:flex;flex-direction:column;gap:5px;padding:5px;border-radius:5px;overflow-wrap:anywhere}.mail-inbox:hover{background:#edf0e7}.mail-inbox>span:first-child{font-weight:500;font-size:14px}.mail-status{font-size:12px;color:var(--muted)}.mail-actions{display:flex;gap:14px;padding:4px 5px 0}.mail-connect,.mail-disconnect{font-size:12px;color:#355d3e;text-decoration:underline;text-underline-offset:3px;padding:3px 0}.mail-disconnect:disabled{opacity:.5;cursor:wait}@media(max-width:740px){.clock{gap:10px}#mail-button{width:32px;height:32px;padding:4px}#mail-button .icon{width:23px;height:23px}#mail-panel{right:0;position:fixed;top:76px;right:18px}.mail-needs-connection::after{top:2px;right:0}}
/* Deux rangées complètes sur les écrans de portable. */
@media (min-width:741px) and (max-height:900px){
 .shell{width:min(1040px,calc(100% - 56px))}
 header{padding:14px 0 7px}
 .welcome{margin:10px 0 20px}
 h1{font-size:48px}
 .welcome>p{margin-top:6px;font-size:16px}
 form{margin-top:16px;min-height:50px;padding-top:5px;padding-bottom:5px}
 .tiles{gap:14px 20px}
 .tile{container-type:inline-size}
 .photo{height:clamp(90px,calc((100svh - 380px)/2),155px);aspect-ratio:auto}
 .nas,.proxmox{background-position-y:calc(-73.98cqw)}
 .mealie,.recette,.calibre{background-position-y:calc(-150.6cqw)}
 .caption{min-height:68px;padding:12px 17px;gap:13px}
 .caption>.icon{width:29px;height:29px}
 .caption>.arrow{width:17px;height:17px}
 .caption h2{font-size:25px}
 .caption p{font-size:12px;margin-top:4px}
 footer{margin-top:18px;padding:8px 0 12px}
}
@media (min-width:741px) and (max-height:650px){
 header{padding-top:10px}.welcome{margin-top:6px;margin-bottom:15px}
 h1{font-size:42px}.welcome>p{font-size:15px}form{margin-top:12px}
 footer{margin-top:13px;padding-top:6px}
}