/* science.css la (nouvelle fin 2023) allure de mon site sur la science */
/* header : contient la navbar, barre de navigation en haut
centered: contient div "wrapper" ou div "maxlargeur" qui ne contient que des articles
- aside-gauche 320px max 150px min : un sommaire local optionnel
- aside-droite 320px max 230px min : d'autres articles proposés. passe en bas si pas assez de place
- section 500px max la section principale au centre, contient des rubriques et des articles
soit 320+320+500 = 1140 150+230+500 = 880
footer : bas de page
*/
/* toutes les valeurs sont pour des écrans larges. après on trouve les paramètres lors de la réduction */
@font-face { font-family: 'OpenSans-Regular'; src: url(com/OpenSans-Regular.ttf) format('truetype'); }
@font-face { font-family: 'OpenSans-Bold'; src: url(com/OpenSans-Bold.ttf) format('truetype'); }
@font-face { font-family: 'space age'; src: url(com/space-age.ttf) format('truetype'); }
@font-face { font-family: 'Montserrat-thin'; src: url(com/Montserrat-thin.ttf) format('truetype'); }
@font-face { font-family: 'Montserrat-Regular'; src: url(com/Montserrat-Regular.ttf) format('truetype'); }
:root { --monrouge: #D3001A; }
/* * { border: red solid 1px; } */
/* infâme ruse pour décaler la position d'une cible #anchor par rapport au haut de la page */
:target:before { content:""; display:block; height:50px; margin:-50px 0 0; }
body { margin: 0px; padding: 0px; background: repeat url(com/snow.jpg); }
body .main video { width: 100%; }
/* les bloc articles : généralités et points communs */
.blocAA { background: transparent; border-bottom: 1px solid; border-color: grey; }
.blocAA a { text-decoration: none;}
.blocAA a div.toclick:hover { background-color: #E4FF00; }
.bloctit { margin: 0; padding: 5px 0 0 0; font-size:16px; color: black; font-weight: bold; }
.bloccat { margin: 0; padding: 10px 0 0 0; font-size:11px; color: var(--monrouge); text-transform: capitalize; }
.blocdat { margin: 5px; padding: 10px 0 0 0; font-size:11px; color: grey; }
.bloccom { margin: 0; padding: 5px 0 5px 5px; font-size:13px; color: grey; text-align:justify; font-style: italic; line-height: 1em; }
.bloctxt { font-family: Arial; }
/* le menu des pages d'accueil */
.blocAccueil .catdat { margin: 0; padding: 5px; }
/* les blocs article : à droite, pas d'image, en-dessous d'abord image et texte à coté, puis largeur min à 320px */
.blocArticle .blocim1 { margin: 0; padding: 0; display: none; }
.blocArticle .blocim2 { margin: 0; padding: 0; display: none; }
.blocArticle .bloctxt { margin: 0; display: flex; flex-flow: column nowrap;}
/* sur la largeur max, deux types : blocArLarge blocAr320px (toujours dans une classe maxlargeur) */
.maxlargeur { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; }
.blocArLarge { width: 100%; margin: 5px 0 0 0; padding: 0; }
.blocArLarge .blocim1 { display: block; width: 280px; }
.blocArLarge .blocim1 img { width: 100%; }
.blocArLarge .blocim2 img { width: 100%; }
.blocArLarge .toclick { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; padding: 0; margin: 0;}
.blocArLarge .blocim2 { display: none; }
.blocArLarge .bloctxt { max-width: 320px; margin: 0 0 0 10px; display: flex; flex-flow: column nowrap; }
/* la suite des articles, tassés */
.blocAr320px { margin: 0 5px 0 5px; }
.blocAr320px .blocim1 { display: none; }
.blocAr320px .blocim2 img { width: 320px; height: 170px; }
.blocAr320px .bloctxt { display: block; width: 320px; padding: 0; margin: 0; }
.blocAr320px .bloctit { height: 39px; display: inline-block; }
.blocAr320px .bloccom { height: 64px; }
/* les séparateurs en montserrat */
.blocTitre { font-family: 'Montserrat-thin', sans-serif; font-size: 1.5em; color: #2c3e50;
margin-bottom: .5em; display: flex; align-items: center; text-align: center; }
.blocTitre span {padding: 0 10px; }
.blocTitre::before, .blocTitre::after { content: ""; height: 1px; background: #7b8792; flex: 1; }
.maxlargeur .blocTitre { width: 100%; margin: 50px 0 0 0; }
.localclick:hover { background-color: #E4FF00; }
/* le wrapper peut avoir aside droite et gauche, et gérer un article central de 500px */
.wrapper { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start; }
.aside-gauche { order: 1; }
.main { order: 2; width: 500px; flex: 0 0 500px;} /* ce sera la section principale, avec une largeur fixe à 500px, réductible avec petit écran */
.aside-droite { order: 3; }
.makelarge { opacity: 0;}
.makelarge::after { content: "abcdefghijklmnopqrstuvwxyzabcdefgh"; }
/* ********************************* aside-gauche : le sommaire local ********************* */
.aside-gauche { opacity: 0; background: black; position: sticky; top: 50px;
font-family: 'Montserrat-Regular'; font-size: 14px;
max-width: 320px; min-width: 200px;
margin: 0 10px 0 0; padding: 0 10px 0 10px; transition: all 0.5s ease; }
.aside-gauche div { font-size: 20px; margin: 0 0 10px 0; color: white;}
.aside-gauche.compact div { font-size: 15px; margin: 0 0 0 3px; }
.aside-gauche.current { opacity: 1; transition: all 0.5s ease; }
.aside-gauche a { color: white; text-decoration: none; color: white; }
.aside-gauche a.current { color: var(--monrouge); font-weight: bold; }
.aside-gauche ul { list-style: none; border-left: 1px solid #fff; padding: 0; margin: 0; }
.aside-gauche ul li { margin: -0px 0px 5px 20px; position: static;}
.aside-gauche ul li::before { content: '\2B24'; color: white; position: absolute; left: 0px; width: 21px; text-align: center; }
.aside-gauche .pages a { color: yellow; }
.aside-gauche.compact a { font-size: 12px; }
/* ********************************* aside-droite : les liens vers d'autres articles ****** */
.aside-droite { background: transparent; min-width: 250px; max-width: 320px; padding: 10px 0px 10px 10px; position: sticky; top: 50px;}
.aside-droite .blocAA { opacity: 0.5; }
.aside-droite .blocAA:hover { opacity: 1; }
.aside-droite img { max-width: 100%; }
/* plus assez de place en largeur pour tout mettre : les liens vers d'autres articles descendent après l'article principal */
/* limite à 250 + 10 + 500 + 10 + 250 = 1020 */
@media screen and (max-width: 1000px) {
.wrapper { flex-flow: row wrap; justify-content: center; }
.aside-gauche { left: 0px; flex: 1 1 150px;}
.aside-droite { max-width: 700px; margin: 50px 0 0 0; padding: 0 ;}
.aside-droite .blocAA { opacity: 1; }
.blocAccueil { margin: 0; }
.blocAccueil .bloctxt { padding: 10px 0 0 0; }
.blocAccueil .catdat { padding: 5px; }
.blocAccueil .bloccom { padding: 0 0 5px 5px; }
.blocArticle { max-width: 900px; padding: 0; }
.blocArticle .toclick { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding: 0; margin: 0;}
.blocArticle .blocim1 { display: block; width: 280px; }
.blocArticle .blocim2 { display: none; }
.blocArticle .bloctxt { max-width: 320px; margin: 0 0 0 10px; }
}
/* l'écran est vraiment petit en largeur, il ne reste que la section principale */
/* limite à 250 + 10 + 500 = 760 */
@media screen and (max-width: 760px) {
.main { flex: 0 1 510px; width: 0; }
.aside-gauche { display: none; }
}
/* moins de 500 px : on réduit les blocs articles à 320px de large */
@media screen and (max-width: 520px) {
.blocArticle .toclick { flex-flow: column;}
.blocArticle .blocim1 { display: none; }
.blocArticle .blocim2 { display: block; width: 320px; }
.blocArticle .bloctxt { display: block; width: 320px; padding: 0; margin: 0; }
.blocArLarge .toclick { margin: auto; }
.blocArLarge .blocim1 { display: none; }
.blocArLarge .blocim2 { display: block; width: 320px; }
.blocArLarge .bloctxt { display: block; width: 320px; padding: 0; margin: 0; }
.blocAr320px .bloccom { height: auto; }
.blocAr320px .blocim2 { height: auto; }
.blocAr320px .bloctit { display: inline; }
}
/* ********************************* section principale centrale ***************************** */
/* valeurs par défaut */
section { font-family: OpenSans-Regular, Arial, Helvetica, sans-serif; }
/* marges gauche et droite */
section P, section LI, section UL, section OL,
section H1, section H2, section H3, section H4, section H5
{ margin-left: 3px; margin-right: 3px; }
/* alignement */
section P, section LI, section UL, section OL
{ text-align: justify; }
/* polices */
section H1 { font-family: OpenSans-Bold; }
.spaceage { font-family: "space age"; }
/* taille des polices */
section H1 { font-size:28px; }
section H2 { font-size:24px; }
section H3 { font-size:18px; }
section H4 { font-size:16px; }
section P,
section LI { font-size:14px; line-height: 1.2em;}
.smiley { font-size: 24px; }
/* marges top bottom */
section P,
section H1, section H2, section H3, section H4, section H5
{ margin-top: 4px; margin-bottom: 4px; }
section UL, section OL { margin-top: 0px; margin-bottom: 4px; }
section LI { margin-top: 0px; margin-bottom: 0px; }
/* pour remplacer les codes obsoletes, en particulier sur les fonts */
.strike { text-decoration: line-through; }
.font_red { color: red; }
.font_green { color: green; }
.font_white { color: white; }
.font_vert { color: #80FF80; }
.font_blue { color: blue; }
.center { text-align: center; }
.compacte li { font-size: 12px; }
.aparte { font-size: 11px; margin-top: 11px; margin-bottom: 11px; margin-left: 22px; }
section img { max-width: 100%; display: block; margin-left: auto; margin-right: auto;}
.groupe { display: flex; flex-flow: row wrap; }
/* pour la navigation avec les flèches back/next */
.bn { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 0px; }
.bnh { margin-bottom: 20px; }
.bn_f { flex-basis: 58px; flex-shrink: 0; width: 58px; height: 40px; } /* flèches */
.bn_c { flex-basis: 500px; /* largeur min titre au milieu */ }
.bn_back { background: url(com/tour_back.gif); margin-right: 3px; }
.bn_next { background: url(com/tour_next.gif); margin-left: 3px; }
.bn_c.subtitle { text-align: center; margin: 0;}
.bn2 { font-family:'Montserrat-Regular',sans-serif; font-size:15px; line-height:1em; background-color:#ffccff; text-decoration: none;
width:50%; margin:2px; display:flex; flex-flow:row nowrap; align-items:center; }
.bn2b { justify-content: flex-start; }
.bn2n { justify-content: flex-end; text-align: right;}
.maintitle { margin: 40px 0 20px 0; padding: 0 0 5px 0; text-shadow: grey 0px 0px 20px; border-bottom: 6px solid var(--monrouge); color: black;}
a div.maintitle>h1 { text-decoration: underline blue solid 1; }
.subtitle { margin: 0 0 20px 0; padding: 0 0 0px 0; background: pink; border: 3px solid var(--monrouge); border-radius: 3px; text-align: center; }
.subsection { margin: 30px 0 10px 0; padding: 0 0 5px 0; border-bottom: 3px solid var(--monrouge); }
.subtitle3 { margin: 30px 0 0 0; padding: 0 0 5px 0; color: var(--monrouge); }
/* les textos */
.textoL { width: 60%; padding: 8px; margin-top: 8px; margin-bottom: 8px; border-radius: 8px;
color: black; font-family: "OpenSans-Regular"; font-size:14px; line-height: 1em;
background-color: #50FFE0; }
.textoR { width: 60%; padding: 8px; margin-top: 8px; margin-bottom: 8px; border-radius: 8px;
color: black; font-family: "OpenSans-Regular"; font-size:14px; line-height: 1em;
background-color: #50FF50; margin-left: auto; margin-right: 0;}
.intro { border-radius: 3px; background-color: silver; padding: 3px; }
.intro p,
.intro li { font-size:16px; }
/* un bloc d'info supplémentaire, qu'on peut généralement sauter */
.acote { background-color: #ffffaa; border-radius: 3px; padding-top: 5px; padding-bottom: 5px; margin-top: 15px; margin-bottom: 15px;}
.acote p {font-size:12px; margin-right:5px; margin-left:50px;}
.acote li {font-size:12px; margin-right:5px;}
.acote > ul {margin-left:50px;}
.acote > ol {margin-left:50px;}
/* exergue avec une barre sur le coté */
.exergue { margin: 10px 0px 10px 0px; padding: 5px 5px 5px 30px; border-left: 10px solid #00137f; background-color: #DEDEFF; }
.exergue P,
.exergue LI {font-size:13px;}
.exergue .subtitle3 { margin: 0 0 0 0; }
/* une emphase encadrée */
.enfaz { border-radius: 3px; background-color: #ffe8e8; padding: 10px; margin-top: 20px; margin-bottom: 20px; }
.enfaz P,
.enfaz LI {font-size:13px;}
/* une citation */
.cite { border-radius: 3px; background-color: #aaeeff; padding: 10px 0 10px 0; margin-top: 10px; margin-bottom: 10px; }
.cite P {font-size:12px; font-style: italic; margin-right:5px; margin-left:50px;}
.cite LI {font-size:12px; font-style: italic; margin-right:5px; margin-left:70px;}
/* légende sous une image ou un schéma */
.legende { font-style: italic; font-size: 11px; line-height: 1em; margin-bottom:10px; text-align: center; font-family: OpenSans-Regular; line-height: 1em; margin-top: 0; margin-bottom:10px; }
/* une légende vraiment longue */
.llegende { background-color: #ffffff; border-radius: 3px; padding-top: 0px; padding-bottom: 5px; margin-top: 0px; margin-bottom: 15px;}
.llegende p {font-size:12px; margin-right:5px; margin-left:50px;}
.llegende li {font-size:12px; margin-right:5px; text-indent:-20px;}
.llegende > ul {margin-left:15px; list-style-type: none;}
.llegende > ol {margin-left:15px;}
/* pour écrire les formules mathématiques */
.formule { margin-left: 50px; font-size: 14px; line-height: 1em; font-family: OpenSans-Regular; color: #00008f; }
.acote .formule { margin-left: 70px; font-size: 12px;}
.marge_tb { margin-bottom: 15px; margin-top: 15px; }
/* A */
.vector { position: relative; display:inline-block; }
.vector:after { position: absolute; display:block; content:'→'; top:-0.6em; }
/* date en haut de page */
.date { font-size: 12px; color: grey; line-height: 1em; margin-top: 4px; margin-bottom: 4px; }
/* du code informatique */
.code { border-radius: 3px; background-color: #aaffaa; margin: 1px; }
.code P { font-family: "Courier"; font-size:11px; margin-right:5px; margin-left:20px;}
/* pour faire des infobulles
usage: texte qui sera surligné
La description avec une image.
sauf ce cet abruti de span ne sait pas calculer sa largeur automatiquement: il prend la largeur du "texte qui sera surligné"
il faut donc forcer la largeur localement si besoin est.
*** une bulle d'info qui apparait */
.infobulle { color: blue; }
.infobulle span { display:none; font-size:12px; line-height: 1.2em; color:black; background:white; padding:2px; border-radius:4px; border:1px solid black; }
.infobulle:hover span { display:block; position:absolute; z-index:10; width:auto; margin-top:15px; margin-left:0px; }
/* la même chose sur la mécanique, mais c'est un apparté */
.apparte { background-color: #ffff44; color: blue; }
.apparte span { display:none; font-size:14px; line-height: 1.2em; color: black; background:#ffff99; padding:2px; border-radius:4px; border:1px solid black; }
.apparte:hover span { display:block; position:absolute; z-index:10; width:auto; margin-top:15px; margin-left:0px; }
/* les tables, mais pas tres developpé */
table { border-collapse: collapse; font-size:12px; margin: auto; }
.local td { border: 1px solid black; padding: 0px 5px 0px 5px; text-align:center;}
.local .tl { text-align :left;}
.local .tr { text-align :right;}
/* pour ces saloperies de video youtube qui s'affiche mal en changeant la largeur de la fenêtre */
.objectyoutube { position: relative; height: 0; padding-bottom: 56.25%; /* 16:9 */ }
.objectyoutube object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* ******************************************** EN-TETE ******************************* */
header { width: 100%; background: url(com/ardoise.webp); }
header .logotop { display: flex; justify-content: space-between; }
/* on fixe la taille de base, on n'autorise pas de grossir mais on peut maigrir */
header .logo_gauche { flex: 0 1 150px; max-height: 150px;}
header .logo_milieu { flex: 0 1 650px; max-height: 260px; cursor: pointer;}
header .logo_droite { flex: 0 1 150px; max-height: 150px;}
header img { max-width: 100%; }
header video { margin: auto; max-width: 100%;}
/* le menu des autres sites */
header .sites:hover .topnav { display: flex; }
header .topnav { display:none; flex-flow: column nowrap; position: absolute; top: 60px; z-index: 10; padding: 5px; margin: 5px;
font-size:20px; font-family:OpenSans-Bold; color: white; background: chartreuse; }
header .topsubnav { background: #444444; padding: 10px; font-size: 16px; color: white; text-decoration: none; }
header .topsubnav:hover { background: #909090; }
/* ******************************************** SEARCH ******************************* */
.groupecentre { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; font-family: OpenSans-Regular, sans-serif; font-size: 12px;}
.groupeevenly { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-evenly; }
.key_line { margin-top: 5px;
border : 1px solid; border-radius: 3px; border-color: #555555;
background-color: #bbbbbb;
} /* keyline avant les autres, dans cet ordre */
.key_selected { background-color: #99ff99; }
.key_text { }
.key_etou { width: 50px; text-align: center; font-family: 'OpenSans-Bold'; font-size: 14px; padding-top: 3px;}
input {font-family: 'OpenSans-Bold'; text-align: center; font-size: 14px; }
/* ********************************* NAVIGATION #topmenu ******************************
deux niveaux, le principal et des sous-menus
grand écran : une ligne de menus
sous-menus affichés au survol, en colonne avec une hauteur max
petit écran : idem mais affiché en colonne
*/
#topmenu { width: 100%; position: sticky; position: -webkit-sticky; /* Safari */ top: 0px; z-index: 1; box-sizing: border-box;
display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: black;
margin-bottom: 10px; padding: 0; margin: 0; font-family:OpenSans-Regular; line-height: 30px;}
#topmenu .burger { order: 3; }
#topmenu .gauche { order: 1; }
#topmenu .navbar { order: 2; }
/* ce qui est à gauche */
#topmenu .gauche { height:50px; z-index: 3; display: flex; flex-direction: row; justify-content: flex-start; }
#topmenu a { height:50px; text-decoration: none; }
#topmenu .logo img { max-height: 50px; }
#topmenu .tobo img { max-height: 50px; }
#topmenu .tobo { position: relative; width: 50px; }
#topmenu .tobohelp { display: none; position: absolute; z-index: 2; text-align: center; line-height: 1em; font-family:OpenSans-Regular;
padding: 5px 5px; width: max-content; font-size: 20px; color: black; background: chartreuse; top:0px; }
#topmenu .tobodebut { left:-25px; }
#topmenu .tobofin { left: 0px; }
#topmenu .tobohome { left: 0px; padding: 15px 5px;}
#topmenu a.tobo:hover >div { display: block; }
/* navbar contient une liste horizontale de menus (verticale si petit écran) */
/* si beaucoup de menus, alors on wrappe */
#topmenu .navbar { display: flex; flex-flow: row-reverse wrap; justify-content: flex-end; padding: 0; }
#topmenu .navbar .item { height: 50px;
border-left:1px solid rgba(255,255,255,.5);
border-top: 1px solid rgba(255,255,255,.5); }
#topmenu .navbar a { padding: 0px 10px; margin: 0; height: 49px; display: inline-block; line-height: 47px;
background: black; color: white; font-size: 18px; text-decoration: none;
transition: color 0.3s ease; }
#topmenu .navbar a:hover { background: #606060; color: chartreuse;}
#topmenu .navbar .current { color: yellow; }
#topmenu .dropdown:after { content: "\25BC"; margin-left: 5px;} /* triangle ajouté en fin de texte */
/* hamburger : une ruse à trois bandes, input sert de déclencheur, invisible */
/* chaque bande est la boite avec une couleur en background, qui sera tournée ou rendue invisible */
#topmenu .burger { display: none; } /* pas de hamburger en écran large */
#topmenu input { display: none; }
#topmenu span { display: none; }
#topmenu input { position: absolute; right: 0px; cursor: pointer; opacity: 0; z-index: 2;
width: 35px; height: 50px; margin: 0; }
#topmenu span { width: 33px; height: 4px; border-radius: 3px; background: #cdcdcd;
position: relative; margin-bottom: 5px; z-index: 1;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
#topmenu span#top { transform-origin: 4px 0px;}
#topmenu span#mid { transform-origin: 0% 100%;}
#topmenu input:checked ~ div span#top { opacity: 1; transform: rotate( 45deg) translate( 3px,-1px); }
#topmenu input:checked ~ div span#mid { opacity: 1; transform: rotate(-45deg) translate(-5px,11px); }
#topmenu input:checked ~ div span#bot { opacity: 0; }
/* les sous-menus apparaissent en-dessous, quand on survole le menu correspondant */
/* position: absolute : ils sont séparés de topmenu */
#topmenu .navbar .item:hover .subnav { display: flex; }
#topmenu .subnav { display:none; flex-flow: row wrap; justify-content: flex-end; align-items: center;
position: absolute; right: 0; width: 100%;
padding: 0px; background: #606060; }
#topmenu .subnav a { font-size: 16px; color: white;
border-left:1px solid rgba(255,255,255,.5);
border-top: 1px solid chartreuse; box-shadow: -0px 4px 4px 0px rgba(127,255,0,0.5);}
#topmenu .subnav a:hover { background: #606060; }
/* pour les petits écrans, on passe en vertical, à la demande en cliquant le hamburger */
@media screen and (max-width: 1505px) {
#topmenu .burger { display: block; } /* activation du burger */
#topmenu input { display: block; }
#topmenu span { display: block; }
#topmenu .navbar { position: absolute; right: 0px; top: 50px;
flex-flow: column wrap; text-align: right;
display: none; }
#topmenu .navbar .item { border: 0; }
#topmenu input:checked ~ .navbar { display: flex;}
/* les sous-menus apparaissent en vertical à coté */
#topmenu .subnav { display: none; transform: translateY(-10px); list-style: none; width: 320px; right: 30px; background: transparent; }
#topmenu .navbar li:hover .subnav { display: list-item; }
}
/* bas de page */
footer { max-width:100%; }
footer P { font-family: "Times New Roman"; font-size:12px; text-align:center; margin:0; word-wrap: break-word;}
/* pour rappel :
top selector2 : tous les selector2 descendants de top
top > selector2 : uniquement les selector2 enfants directs (pas les petits-enfants)
top + selector2 : l'élément suivant, mais ce n'est pas un enfant
top ~ selector2 : tous les selector2 directement suivants (pas un enfant non plus)
---
position: static; flot normal, rien de spécial, non affecté par top, right, left, bottom
position: relative; position comme le flot normal, mais affecté par top, right, left, bottom
position: fixed; position fixe par rapport à l'écran = reste coincé en place
position: absolute; position relative à son ancêtre, retiré du flot normal = peuvent aller par-dessus les autres
position: sticky; dépend de la position du scroll dans la fenêtre, requiert un des top, right, left, bottom + webkit pour safari
*/