/* doc.css — feuille des pages documentaires. Meme palette, memes polices et meme echelle que la page d'accueil : ces pages sont du meme site, pas un blog accroche a cote. La difference est qu'elles se lisent : mesure courte et interlignage large, la ou l'accueil se parcourt. Le texte est centre comme partout ailleurs sur le site, ce qui impose de tenir la mesure encore plus court — au centre, l'oeil doit chercher le debut de chaque ligne. */ :root{ --or:#A87E2E; --or-clair:#DCAE55; --lagune:#86B8DB; --sable:#F4E6D0; --encre-lag:#2A3550; --encre:#201E1D; --blanc:#fff; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',-apple-system,'Segoe UI',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--sable);color:var(--encre); font:400 18px/1.7 var(--sans);-webkit-font-smoothing:antialiased; text-align:center} .wrap{max-width:760px;margin:0 auto;padding:0 28px} a{color:var(--or)} h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.14;margin:0} /* ---------------------------------------------------------------- barre */ header{position:sticky;top:0;z-index:20;background:rgba(244,230,208,.94); backdrop-filter:blur(8px);border-bottom:1px solid #e6d6ba} .barre{max-width:1000px;margin:0 auto;padding:16px 28px;text-align:left; display:flex;align-items:center;justify-content:space-between;gap:20px} .marque{display:flex;align-items:center;gap:18px;text-decoration:none} .marque .rondel{width:64px;height:64px;flex:none} .marque .lettrage{height:58px;width:auto;display:block} /* Le bandeau des cinq pages, sous le logo et les langues. La page courante porte un trait : sans lui, un bandeau de cinq liens identiques ne dit pas ou l'on se trouve. */ .rubans{border-top:1px solid rgba(168,126,46,.28)} .rubans .barre{justify-content:center;flex-wrap:wrap;gap:6px 26px; padding:14px 28px 16px;text-align:center} .rubans a{font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase; color:var(--or);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent} .rubans a:hover{border-bottom-color:var(--or)} .rubans a[aria-current="page"]{border-bottom-color:var(--or)} @media(max-width:560px){.rubans .barre{gap:6px 16px;font-size:11px}} .lang{display:flex;gap:2px;border:1px solid var(--or);border-radius:999px;overflow:hidden} .lang a{padding:6px 13px;text-decoration:none;font:500 12px/1.4 var(--sans); letter-spacing:.14em;color:var(--or)} .lang a[aria-current="page"]{background:var(--or);color:var(--sable)} /* ---------------------------------------------------------------- tete */ main{padding:96px 0 90px} .fil{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase; color:var(--or);margin:0 0 34px} .fil a{text-decoration:none} h1{font-size:clamp(36px,5.4vw,60px);font-style:italic;max-width:18ch; margin-left:auto;margin-right:auto} .chapeau{font-family:var(--serif);font-size:clamp(20px,2.3vw,25px); color:#4a4640;margin:20px auto 0;max-width:52ch} .filet{width:108px;height:2px;background:var(--or);border:0;margin:34px auto 38px} /* ------------------------------------------------------- justification */ /* Le texte courant est justifie, la derniere ligne restant centree. Le compose ainsi tient les deux exigences a la fois : le bloc a deux bords nets, et la page garde son axe — une derniere ligne alignee a gauche dans une mise en page centree se voit comme un accroc. Un paragraphe d'une seule ligne, lui, est entierement « derniere ligne » : il reste donc centre, exactement comme avant. La cesure automatique n'est pas un ornement : sans elle, justifier une colonne de soixante signes en francais ouvre des rivieres de blanc entre les mots. Le navigateur coupe selon la langue declaree par . */ .essai p,.lieu p:not(.situe),.chapeau{ text-align:justify;text-align-last:center; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* ---------------------------------------------------------------- essai */ .essai p{margin:0 auto 1.15em;max-width:60ch} .essai h2{font-size:clamp(26px,3.2vw,34px);margin:44px 0 16px} .essai em{font-style:italic} /* ------------------------------------------------------------ questions Les questions frequentes, posees telles que les gens les tapent. La mise en forme est celle des notices de lieu, et non une mise en forme a elle : meme filet dore, meme largeur de colonne, meme justification a derniere ligne centree. Le corps de la page est centre ; une reponse alignee a gauche derriere un filet lateral se voyait comme une piece rapportee. */ .questions{margin:64px 0 0} .qr{padding:26px 0;border-top:1px solid rgba(168,126,46,.28)} /* last-of-type et non last-child : le bloc JSON-LD ferme la section, et c'est lui le dernier enfant. Le filet du bas ne se posait donc jamais. */ .qr:last-of-type{border-bottom:1px solid rgba(168,126,46,.28)} .qr h3{font-size:23px;margin:0 auto 12px;max-width:46ch} .qr p{margin:0 auto;max-width:58ch; text-align:justify;text-align-last:center; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* ---------------------------------------------------------------- liste */ h2{font-size:clamp(28px,3.6vw,40px);margin:64px 0 10px} .compte{font:400 15px/1.6 var(--sans);color:#6b6459;margin:0 0 34px} .lieu{padding:26px 0;border-top:1px solid rgba(168,126,46,.28)} .lieu:last-child{border-bottom:1px solid rgba(168,126,46,.28)} .lieu h3{font-size:25px} .num{display:block;font:500 13px/1 var(--sans);color:var(--or); letter-spacing:.1em;margin-bottom:9px} .situe{font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase; color:var(--or);margin:9px 0 12px} .lieu p:not(.situe){margin:0 auto;max-width:58ch} .vue{margin:22px auto 0;max-width:46ch} /* Une illustration de page respire plus large que celle d'une notice : elle ouvre un chapitre au lieu d'accompagner un paragraphe. */ .vue-page{max-width:100%;margin:38px auto 46px} .vue-page img{border-radius:8px} .vue img{width:100%;height:auto;border-radius:6px;display:block} .vue figcaption{font-family:var(--serif);font-style:italic;font-size:15px; color:#6b6459;margin-top:9px} @media(max-width:640px){ .lieu p:not(.situe){max-width:none} /* Sur un telephone, la moitie d'une colonne etroite ne montre plus rien : les images reprennent toute la largeur. */ .vue,.vue-page{max-width:100%} } /* ---------------------------------------------------------------- appel */ .appel{background:var(--encre-lag);color:var(--sable);border-radius:8px; padding:38px 34px;margin:64px 0 0;text-align:center} .appel p{margin:0 auto;max-width:46ch} .appel .boutons{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .bouton{display:inline-block;padding:14px 26px;border-radius:999px;text-decoration:none; font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--or-clair);color:var(--or-clair)} .bouton.or{background:var(--or-clair);color:var(--encre-lag);border-color:var(--or-clair)} .autres h2{font-size:26px;margin:56px 0 8px} .autres p{margin:0;font-size:16px} .compte,.fil{margin-left:auto;margin-right:auto} /* ---------------------------------------------------------------- pied */ footer{background:var(--encre-lag);color:var(--sable);margin-top:70px; padding:40px 0 34px;font-size:15px} footer a{color:var(--or-clair)} /* L'enseigne en pied, comme sur la page d'accueil : le rondel, puis le lettrage en version claire — la meme sur fond bleu que sur fond sable serait illisible. */ .pied-marque{display:flex;flex-direction:column;align-items:center;gap:20px; padding-bottom:30px;margin-bottom:26px; border-bottom:1px solid rgba(220,174,85,.28)} .pied-marque .rondel{width:84px;height:84px} .pied-marque .lettrage{width:min(320px,72vw);height:auto;display:block} .atelier{margin:0 0 18px;padding-bottom:16px; border-bottom:1px solid rgba(220,174,85,.28)} /* Le credit des sources : petit, en retrait, mais sur chaque page. Il ne se justifie pas — c'est une note, pas un texte suivi. */ .credits{font-size:12.5px;line-height:1.6;color:rgba(244,230,208,.62); max-width:74ch;margin:0 auto 16px;text-align:center;text-align-last:center} .pied{margin:0}