/* Se Loger en 2050 - pages communes. Charge une fois, gardee en cache :
   c'est pour cela qu'elle n'est pas recopiee dans chaque page. */
:root{--plane:#f7f2e8;--surface:#fffdf8;--ink:#2f2b26;--ink2:#5d574e;
      --filet:#e2d9c8;--faible:#6b8f5f;--modere:#b5793f;--fort:#a8443a;
      --trait:#4a443c;--bleu:#7ea7bd;--vert:#95b08d;--terre:#d9a385;--ocre:#e7cd9b}
/* Le sombre s'applique si le poste le demande ET que le visiteur n'a pas
   choisi le clair au moulin, ou si le visiteur l'a choisi au moulin. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){color-scheme:dark;--plane:#17161a;--surface:#201f24;
       --ink:#f2ece1;--ink2:#c2bab0;--filet:#34323a;--faible:#8fb583;--modere:#d59a63;
       --fort:#d9736a;--trait:#cfc6b8}}
:root[data-theme="dark"]{color-scheme:dark;--plane:#17161a;--surface:#201f24;
       --ink:#f2ece1;--ink2:#c2bab0;--filet:#34323a;--faible:#8fb583;--modere:#d59a63;
       --fort:#d9736a;--trait:#cfc6b8}
*{box-sizing:border-box}
body{background:var(--plane);color:var(--ink);margin:0 auto;max-width:46rem;
     padding:2rem 1rem 4rem;
     font:16px/1.55 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
nav{font-size:.85rem;color:var(--ink2);margin-bottom:1.2rem}
nav a{color:inherit}
.tete{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.tete>div{flex:1 1 20rem;min-width:0}
h1{font-size:1.75rem;line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.1rem;margin:2rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--filet)}
.usage{margin:.2rem 0 .8rem}
.annonces a{font-weight:500;text-decoration:underline wavy var(--terre);
  text-underline-offset:5px;text-decoration-thickness:1px;margin:0 .15rem}
.vers-carte{margin:.4rem 0 1rem;padding:.7rem .9rem;background:var(--surface);
  border:1px solid var(--terre);border-radius:13px 9px 15px 10px}
.vers-carte a{font-weight:500;text-decoration:underline wavy var(--terre);
  text-underline-offset:5px;text-decoration-thickness:1px}
.vers-carte span{display:block;margin-top:.3rem;color:var(--ink2);font-size:.88rem}
.chapo{color:var(--ink2);font-size:.95rem}
.vignette{flex:0 0 190px;margin:0}
.vignette img{width:190px;height:auto;display:block}
.moulin-theme{padding:0;margin:0;border:0;background:none;cursor:pointer;display:block;
 border-radius:10px;color:inherit;-webkit-tap-highlight-color:transparent}
.moulin-theme:focus-visible{outline:2px solid var(--bleu);outline-offset:4px}
.moulin{width:190px;height:auto;display:block;overflow:visible}
.moulin .ailes{transform-box:fill-box;transform-origin:50% 50%}
.moulin .cb-aile{transform-box:fill-box;transform-origin:4% 58%}
.moulin .cb-flou{filter:blur(2.4px);transform-box:fill-box;transform-origin:8% 50%}
.moulin .fleur-v{transform-box:fill-box;transform-origin:50% 100%}
.nuit-ciel{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:no-preference){
 .moulin .ailes{animation:moulin 9s linear infinite}
 .moulin .fleur-v{animation:vent 6.5s ease-in-out infinite}
 .moulin .colibri-v{animation:surplace 7s ease-in-out infinite}
 .moulin .cb-aile-h{animation:aileh .062s linear infinite alternate}
 .moulin .cb-aile-b{animation:aileb .062s linear infinite alternate}
 .moulin .cb-flou-h{animation:flouh .062s linear infinite alternate}
 .moulin .cb-flou-b{animation:floub .062s linear infinite alternate}
 .nuit-ciel{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
 .moulin .colibri-v{transition:opacity .5s ease}}
/* LA NUIT : la lune se leve, le colibri s'en va, les ailes s'arretent la ou
   elles sont (en pause, pas remises a zero - un moulin ne se recale pas). */
:root[data-theme="dark"] .nuit-ciel{opacity:1;transform:none}
:root[data-theme="dark"] .moulin .colibri-v{opacity:0}
:root[data-theme="dark"] .moulin .ailes,
:root[data-theme="dark"] .moulin .fleur-v{animation-play-state:paused}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .nuit-ciel{opacity:1;transform:none}
 :root:not([data-theme="light"]) .moulin .colibri-v{opacity:0}
 :root:not([data-theme="light"]) .moulin .ailes,
 :root:not([data-theme="light"]) .moulin .fleur-v{animation-play-state:paused}}
@keyframes moulin{to{transform:rotate(360deg)}}
@keyframes vent{0%,100%{transform:rotate(0)}18%{transform:rotate(-9deg)}60%{transform:rotate(2deg)}}
@keyframes surplace{0%,100%{transform:translate(150px,42px) scale(.82)}
 50%{transform:translate(146px,48px) scale(.82)}}
@keyframes aileh{from{transform:rotate(-7deg) scaleY(1)}to{transform:rotate(16deg) scaleY(.82)}}
@keyframes aileb{from{transform:rotate(6deg) scaleY(.9)}to{transform:rotate(-14deg) scaleY(1)}}
@keyframes flouh{from{opacity:.3;transform:scaleY(1.06)}to{opacity:.12;transform:scaleY(.82)}}
@keyframes floub{from{opacity:.16;transform:scaleY(.9)}to{opacity:.3;transform:scaleY(1.05)}}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:.92rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--filet);vertical-align:top}
th{font-weight:500;width:56%}
td.n1{color:var(--faible)}td.n2{color:var(--modere)}td.n3{color:var(--fort);font-weight:600}
td.u{color:var(--ink2);font-size:.85rem}
.liste{columns:2;column-gap:1.5rem;padding-left:1.1rem;margin:0}
.liste li{break-inside:avoid;margin:.15rem 0}
.rien{color:var(--ink2)}
.portrait{margin-top:1.2rem}
.portrait .photo{float:right;margin:.2rem 0 .8rem 1.1rem;max-width:240px}
.portrait .photo img{width:100%;height:auto;display:block;border-radius:4px}
.portrait figcaption{font-size:.72rem;line-height:1.35;color:var(--ink2);margin-top:.3rem}
.portrait figcaption a{color:inherit}
.portrait .chiffres{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:.3rem 0 .8rem}
.portrait .chiffres small{color:var(--ink2)}
.portrait blockquote{margin:0 0 .6rem;padding:.1rem 0 .1rem .9rem;border-left:3px solid var(--filet)}
.portrait blockquote p{margin:.3rem 0}
.portrait .source{clear:both;font-size:.78rem;color:var(--ink2)}
@media (max-width:30rem){.portrait .photo{float:none;max-width:none;margin:0 0 .8rem}
 .portrait .photo img{max-height:220px;object-fit:cover}}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.classement th,table.classement td{white-space:nowrap}
table.classement th[scope=row]{font-weight:400;width:auto}
table.classement td{font-variant-numeric:tabular-nums}
table.climat th[scope=row]{width:44%}
table.climat thead th{font-weight:500;font-size:.85rem;color:var(--ink2)}
table.climat td{font-variant-numeric:tabular-nums;white-space:nowrap}
table.voisines th[scope=row]{font-weight:400;width:auto}
table.voisines td{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
table.voisines thead th{font-weight:500;font-size:.85rem;color:var(--ink2);text-align:right}
table.voisines thead th:first-child{text-align:left}
.moins{font-size:.8rem;color:var(--ink2);text-decoration:underline wavy var(--vert);
  text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
table.climat .u{color:var(--ink2);font-size:.82rem}
h3{font-size:1rem;margin:1.4rem 0 .5rem}
h3 small{font-weight:400;color:var(--ink2)}
footer{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--filet);
       font-size:.8rem;color:var(--ink2)}
a{color:inherit}
@media (max-width:30rem){.liste{columns:1}.vignette{flex:1 1 100%}}