/* voyance-par-tchat.com — grammaire du gabarit 02-blog-info, seconde instanciation. * * esoterismes.com occupe deja ce gabarit, avec un bandeau clair fixe, une barre de * reperes chiffres a l'horizontale et une grille de fiches sur quatre colonnes. * Cette instanciation prend l'autre pente du meme gabarit : * * - la plaque photo, que la premiere instanciation n'employait pas, porte * l'ouverture ; * - les fiches passent sur DEUX colonnes larges au lieu de quatre etroites, ce qui * donne de la place au resume plutot qu'a la vignette ; * - les reperes chiffres deviennent un rail vertical en marge, et non une barre ; * - pas de tableau de donnees : les chiffres sont dans le rail. * * Convention de nommage : mots francais entiers, en minuscules, sans separateur. * Aucun des six autres annuaires n'ecrit ainsi — ils emploient un prefixe en kebab, * du BEM souligne, ou du camelCase. */ :root{ --ancre:#14303f; --corail:#d9615a; --ivoire:#fdfbf7; --trait:#dfe4e6; --gris:#5a6a72; --bleupale:#eaf1f4; } *{box-sizing:border-box} body{ margin:0;background:var(--ivoire);color:#182229; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:'Fraunces','Iowan Old Style',Georgia,serif;color:var(--ancre); font-weight:600;margin:0 0 .55em;letter-spacing:-.01em} h1{font-size:2.5rem;line-height:1.14} h2{font-size:1.62rem;line-height:1.24;margin-top:2.2rem} h3{font-size:1.14rem;line-height:1.32;margin-top:1.55rem; font-family:'Inter',sans-serif;font-weight:700;color:#1d3b4a} p{margin:0 0 1.08em} a{color:var(--corail);text-underline-offset:2px} a:hover{color:#b3433d} img{max-width:100%;height:auto;display:block} /* ------------------------------------------------------------------- entete */ .entete{background:var(--ancre);color:#e6eef2} .enteteinterne{display:flex;align-items:center;gap:24px;padding:16px 0;flex-wrap:wrap} .titremarque{font-family:'Fraunces',serif;font-size:1.4rem;color:#fff;text-decoration:none; font-weight:600} .titremarque em{font-style:italic;color:var(--corail)} .menu{display:flex;gap:19px;flex-wrap:wrap;margin-left:auto} .menu a{color:#c9d9e0;text-decoration:none;font-size:.88rem;font-weight:500} .menu a:hover,.menu a.active{color:#fff;text-decoration:underline; text-decoration-color:var(--corail);text-decoration-thickness:2px} /* --------------------------------------------------------------- plaque photo */ .plaquephoto{position:relative;background:var(--ancre);overflow:hidden} .plaquephoto img{width:100%;height:340px;object-fit:cover;opacity:.42} .plaquetexte{position:absolute;inset:0;display:flex;align-items:center} .plaquetexte .container{width:100%} .plaquetexte h1{color:#fff;max-width:20ch;text-shadow:0 2px 18px rgba(0,0,0,.4)} .plaquetexte h1 em{font-style:italic;color:#ffc9b6} .surtitre{display:inline-block;font-size:.76rem;text-transform:uppercase; letter-spacing:.15em;color:var(--corail);font-weight:700;margin-bottom:.7rem; background:rgba(20,48,63,.72);padding:4px 11px;border-radius:2px} /* ------------------------------------------------- corps + rail lateral droit */ .grillearticle{display:grid;grid-template-columns:1fr 238px;gap:40px; align-items:start;padding:34px 0 42px} .textecourant{max-width:none} .textecourant table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.93rem} .textecourant th{background:var(--bleupale);color:var(--ancre);text-align:left; padding:9px 12px;font-weight:700;font-size:.83rem;border-bottom:2px solid var(--ancre)} .textecourant td{border-bottom:1px solid var(--trait);padding:9px 12px;vertical-align:top} .rail{position:sticky;top:22px;border-left:3px solid var(--corail);padding-left:18px} .railfait{margin-bottom:22px} .railchiffre{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--ancre); line-height:1;display:block} .raillibelle{display:block;font-size:.84rem;color:var(--gris);margin-top:6px; line-height:1.45} .railnote{font-size:.79rem;color:var(--gris);border-top:1px solid var(--trait); padding-top:12px;margin-top:4px} /* ------------------------------------------- fiches, deux colonnes larges */ .titresection{display:flex;align-items:baseline;justify-content:space-between; gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ancre); padding-bottom:9px;margin:8px 0 26px} .titresection h2{margin:0} .titresection span{font-size:.84rem;color:var(--gris)} .grillefiches{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .fiche{background:#fff;border:1px solid var(--trait);border-radius:4px; display:flex;flex-direction:column;overflow:hidden} .fichevue{position:relative} .fichevue img{width:100%;height:168px;object-fit:cover;object-position:top center} .fichecote{position:absolute;top:10px;left:10px;background:var(--ancre);color:#fff; font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:2px; font-variant-numeric:tabular-nums} .fichecorps{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1} .fichetitre{font-size:1.1rem;margin:0 0 .3rem;font-family:'Inter',sans-serif; font-weight:700;line-height:1.3} .fichetitre a{color:var(--ancre);text-decoration:none} .fichetitre a:hover{color:var(--corail)} .fichetypo{font-size:.82rem;color:var(--gris);margin:0 0 .6rem} .ficheextrait{font-size:.94rem;margin:0 0 .9rem} .fichepoints{list-style:none;margin:0 0 1rem;padding:0;font-size:.87rem} .fichepoints li{padding-left:19px;position:relative;margin-bottom:4px} .fichepoints li:before{position:absolute;left:0;font-weight:700} .fichepoints li.atout:before{content:"+";color:#2f7d52} .fichepoints li.reserve:before{content:"\2212";color:#b3433d} .fichepied{margin-top:auto;display:flex;gap:9px;flex-wrap:wrap} .lienplein,.liencreux{text-decoration:none;font-weight:600;font-size:.85rem; padding:8px 15px;border-radius:3px;display:inline-block} .lienplein{background:var(--corail);color:#fff} .lienplein:hover{background:#b3433d;color:#fff} .liencreux{border:1px solid var(--ancre);color:var(--ancre)} .liencreux:hover{background:var(--ancre);color:#fff} /* --------------------------------------------------------------- constats */ .constats{border:1px solid var(--trait);background:#fff;border-radius:4px; padding:14px 16px;margin:22px 0} .releve{display:flex;gap:10px;align-items:baseline;padding:6px 0; border-top:1px solid var(--trait);font-size:.9rem} .releve:first-child{border-top:0} .releve .glyphe{font-weight:700;width:1.2em;flex:none} .releve.tenu .glyphe{color:#2f7d52} .releve.absent .glyphe{color:#adb6ba} .releve.absent{color:var(--gris)} /* ------------------------------------------------------------- bloc de sortie */ .sortie{background:var(--bleupale);border-radius:4px;padding:19px 22px;margin:30px 0 0} .sortie p{margin:0 0 .85rem;font-size:.95rem} .sortie small{display:block;margin-top:9px;color:var(--gris);font-size:.8rem} .capture{display:block;margin:0 0 22px} .capture img{border:1px solid var(--trait);border-radius:4px} .verdict{background:#fff;border-top:3px solid var(--corail); border-bottom:1px solid var(--trait);padding:24px 26px;margin:34px 0 0} .verdict h2{margin-top:0} .notemethode{font-size:.82rem;color:var(--gris);margin:14px 0 0} /* ------------------------------------------------------------------- pied */ .pied{background:var(--ancre);color:#a9c0cb;margin-top:46px;padding:26px 0} .pied span{font-size:.85rem;line-height:1.6;display:block;max-width:78ch} .pied a{color:#fff} @media (max-width:900px){ .grillearticle{grid-template-columns:1fr;gap:26px} .rail{position:static;border-left:0;border-top:3px solid var(--corail); padding-left:0;padding-top:16px;display:flex;flex-wrap:wrap;gap:22px} .railfait{margin-bottom:0;flex:1 1 130px} .grillefiches{grid-template-columns:1fr} .plaquephoto img{height:230px} h1{font-size:1.85rem} } /* Sommaire des rubriques : c'est de la navigation, pas du corps de texte. Il vit donc dans un