/*
http://ch.lerolle.free.fr/include/astuces-body.php
/1com/css/style-rsrc.css ALT+SHIFT+Z pour voir les styles via Web Developer !!!!
voir une maquette de page utilisant cette feuille de style: http://ch.lerolle.free.fr/1com/css/style-!demo.htm
Tutoriel sur les types de sélecteurs (h1, p a ul li table etc...: http://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Syntaxe générale:
- règle: 1-n sélecteurs h1,h2,h3{1-n déclarations}
- sélecteur{déclaration1; déclaration2;}
- déclaration = propriété:valeur;
- règle@ définit une condition pour appliquer une règle: syntaxe: @règle (condition){règle}
exemple @media (min-width:56.25em){h1{font-size:2.75em; line-height:1.35;}} ou @import ou @counter-style
http://typecast.com/blog/a-more-modern-scale-for-web-typography
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
une sélection de 60 fontes gratuites, dont Google Fonts: http://blog.pasqunpeu.fr/la-selection-des-60-plus-belles-typographies-gratuites-du-web/
exemple: font-family: 'Damion', cursive;
*/
a:link {text-decoration:none; color:rgb(30,144,255); /* color:rgb(51,204,255) = bleucanard, blue=000,000,255, Dodgerblue=30,144,255 transition:all 2s; */}
a:visited {/* color:magenta; */ color:rgb(231,72,49); font-weight:bold;} /* Orange */
a:hover, /* survol par la souris {color:vert-lime; font-weight:bold;} */
a:focus, /* sélectionné via la touche de tabulation */
a:active /* lors du clic */
{outline:dotted Magenta 2px; /* text-decoration:underline; font-weight:bold; color:rgb(0,255,0); border-style:outset; */}
/* a:first-letter{color:red; text-transform:capitalize;} inopérant: gelé ! */
p{font-size:1em;} /* 1em = 16 PIXELS: C'EST LA TAILLE DE REFERENCE POUR LES PARAGRAPHES
,
DEFINIE PAR DEFAUT DANS TOUS LES NAVIGATEURS ...
pour les autrs éléments HTML, le W3C propose des tailles proportionnelles à 1em:
h1; 2em h2: 1.5em h3: 1.17em h4: 1em h5: 0.83em h6: 0.75em
les paragraphes de citation, listes, tableaux, styles sémantiques: 1em,
big: 1.17em small: 0.83em
p:first-letter {text-transform: uppercase;}
@font-face {font-family: Alike; src: local("Alike-Regular") } */
abbr,acronym{border-bottom:3px dotted /* #666 */; cursor:help;}
/* IDENTIFIANTS (ID):
les ID sont semblables aux classes, mais ne peuvent s'appeler qu'une seule fois dans une meme page:
exemple:
Le style s'applique à ce paragraphe
Mais pas à celui-là
*/
#mon-exception{color:red;}
/* CLASSES: DEBUT.
les CLASSES commencent par un point, et leur nom ne contient aucun espace...
elles peuvent s'appliquer à un DIV, P, SPAN, TBODY, TD, BLOCKQUOTE, OL, A (Anchor), à compléter...
EXEMPLE:
EXEMPLE STYLE+CLASS:
*/
.bordure-pointillee {border:dotted 2px grey;}
.bordure-ligne-fine {border:solid 1px grey; /* 0.1px n'est pas plus fin que 1px ...? */
/* box-shadow: 6px 6px 0px black; ça marche, intérêt discutable... */
/*arrondir les coins en haut à gauche et en bas à droite: ça marche, intérêt discutable...
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px; */}
.bordure-ligne-moyenne {border:solid 3px black;}
.bordure-aucune {border:0;}
.sommaire-ouvert {cursor:pointer;}
/* details{display:inline;
background-color:rgb(205,0,0);
padding-right:1.25em;}
summary{display:inline; /* évite que le fond du "summary" prenne toute une ligne !
background-color:rgb(205,92,92);} /* IndianRed */
/* Summary ou Details en display inline abandonnés, car supprime le ► et ▼, et les infobulles ne fonctionnent plus, exemple dans Citations.php ...?! */
/* INFOBULLES-DEBUT: cf livre 'CSS' de Christophe AUBRY page 183-184
Modèle à copier:
MOT-A-DÉFINIRDÉFINITION EN INFOBULLE
voir tous types de curseur sur http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
*/
/* Je mets en "facteur commun" toutes les clauses communes à toutes les tailles d'infobulles */
.infobulle-t1,.infobulle-t2,.infobulle-t3,.infobulle-t4,.infobulle-t6,.infobulle-t10{position:relative; top:0; left:0; border-bottom:2px dotted; cursor:help; color:rgb(102,102,102);}
.infobulle-t1 span,.infobulle-t2 span,.infobulle-t3 span,.infobulle-t4 span,.infobulle-t6 span,.infobulle-t10 span{display:none;}
/* tailles de t1 à t10, déterminée par 'width', le seul paramètre variable...
NB: text-shadow:unset n'empêche pas les ombres dans les h1: text-shadow:initial fonctionne...
letter-spacing:-1px voir si à garder: tasse les lettres ...
z-index:10 permet d'afficher l'infobulle par-dessus les images voisines cf Guide QuickStart CSS3 p292
top:1.50em = 24px ex 25 px empeche de survoler les liens !
font-family:Monotype Corsiva; est joli, mais peu lisible
letter-spacing:-1px; permet de tasser les caractères, mais est peu lisible */
.infobulle-t1:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:10em;}
.infobulle-t2:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:20em;}
.infobulle-t3:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:35em;}
.infobulle-t4:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:45em;}
.infobulle-t6:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:60em;}
.infobulle-t10:hover span{display:block;position:absolute;z-index:10;top:1.30em;left:0px;background-color:yellow;text-align:left;border:1px solid Black;font-family:Arial;font-size:initial;font-weight:normal;font-style:normal;text-shadow:initial;width:100em;}
/* INFOBULLES-FIN: */
.fonte-titre {font-family:Alike,times new roman,serif,sans-serif,arial;}
.fonte-corsiva {font-family:Monotype Corsiva;}
.fonte-courrier {font-family:Courier;}
.fonte-damion {font-family:Damion;}
.fonte-arial {font-family:Arial;}
.taillecar-h1 {font-size:2em;}
.taillecar-h2 {font-size:1.625em;}
.taillecar-h3 {font-size:1.375em;}
.taillecar-h4 {font-size:1.125em;}
.taillecar-h5 {font-size:0.917em;} /* = 1.125 * 0.815: déduit en fonction des autres rapports ... */
.taillecar-h6 {font-size:0.75em;}
.taillecar-gros {font-size:larger;}
.taillecar-petit{font-size:smaller;}
.espace-lettre-reduit{letter-spacing:-1px;} /* utile dans les logs; -2px diminue encore l'espace entre caractères ... */
.droit {font-style:normal;}
.italique {font-style:italic;}
.gras {font-weight:bold;}
.maigre {font-weight:normal;}
.souligne {text-decoration:underline;}
.ligne_dessus {text-decoration:overline;}
.barre {text-decoration:line-through;color:rgb(205,0,0);color:rgb(192,192,192);} /* plus court:
ou
... */
.rembourrage-haut {padding-top:1em;} /* padding = "rembourrage", permet d'espacer les
entre elles, important sur les smartphones ! */
.rembourrage-bas {padding-bottom:1em;}
.ligne-haute {line-height:3em;;}
.aff-en-ligne {display:inline;}
.aff-en-bloc {display:block;}
.centre {text-align:center;}
.center-essai {display: flex; align-items: center; justify-content: center;}
.c-a-gauche {text-align:left;}
.c-a-droite {text-align:right;}
.encadrer {border-style:ridge;border-width:4px;padding:0.3em;}
.encadrer-serre {border-style:ridge;border-width:4px;padding:0;}
.clignotant {animation:blinker 1s step-start infinite;} /* cf https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3 */
@keyframes blinker{50% {opacity:0;}}
.code-source {font-weight:bold; color:rgb(0,128,0); font-size:larger; background-color:rgb(255,255,255); /*
*/}
.nota-bene {font-weight:bold; text-decoration:underline; /* */}
/* DÉCALAGES & TABULATIONS */
/* décalage de tout le bloc */
.tab {display:inline-block;margin-left:3em;}/* https://www.1formatik.com/5879/comment-faire-une-tabulation-en-html */
.tabul-bloc {display:inline-block;margin-left:3em;}/* doublon volontaire, plus explicite que .tab !!! */
/* décalage de la 1ère ligne seulement: ou
*/
.marge-g-d-auto-80pc{width:80%; margin:0 auto;}/* 0 en vertical, auto en horizontal (centrage): utile pour les menus de debut de page, les citations en milieu de page, etc...
auto est remplacé par une valeur adaptée: permet de centrer un conteneur div horizontalement). */
.marge-g-d-auto-30pc{width:30%; margin:0 auto;}
.marge-gauche-3em {padding-left:3em;}/* plus élégant que decal-droite-xx ! */
.decal-droite-15px {margin-left:15px;}
.decal-droite-30px {margin-left:30px;}
.decal-droite-60px {margin-left:60px;}
.decal-droite-90px {margin-left:90px;}
.decal-droite-120px {margin-left:120px;}
.decal-droite-240px {margin-left:240px;}
.decal-droite-360px {margin-left:360px;}
.largeur-01-100 {width:1%;}
.largeur-02-100 {width:2%;}
.largeur-05-100 {width:5%;}
.largeur-10-100 {width:10%;}
.largeur-15-100 {width:15%;}
.largeur-20-100 {width:20%;}
.largeur-25-100 {width:25%;}
.largeur-30-100 {width:30%;}
.largeur-40-100 {width:40%;}
.largeur-50-100 {width:50%;}
.largeur-60-100 {width:60%;}
.largeur-70-100 {width:70%;}
.largeur-80-100 {width:80%;}
.largeur-85-100 {width:85%;}
.largeur-90-100 {width:90%;}
.largeur-95-100 {width:95%;}
.largeur-100-100 {width:100%;}
.align-vertical-haut {vertical-align:top;}
.align-vertical-milieu {vertical-align:middle;}
.align-vertical-bas {vertical-align:bottom;}
/* COULEURS: DEBUT
- http://www.pressibus.org/perso/html/frcouleurs.html#:~:text=Orange%20Corail%20Saumon 150 Couleurs+Noms FRANÇAIS et ANGLAIS. facile pour remonter d'un triplet RGB à son nom
car sous la forme 'Aliceblue: 240,248,255' + curseur pour varier les nuance...
- du code à la couleur:
https://rgb.to/0,255,0#:~:text=Colour%20schemes%20from,Get%20color%20inspiration (complémentaires, triades, tetrades, etc...)
ou http://www.proftnj.com/RGB3.htm#:~:text=Code%20Hex%C2%A0%3A,Couleur%20nommée%C2%A0%3A
ou https://www.colorschemer.com/online#:~:text=Generate%20matching%20color%20schemes,color%20palette%20below. Ligthen ou Darken Scheme pour faire varier la luminosité; )
- Nom HTML des COULEURS de base et X11: http://www.css-faciles.com/couleurs-css.php
- repérage de couleur: WebDeveloper > CSS > voir styles élément particulier: explicite .fonds-jaune en background-color: #ffff00 ; = rgb(255,255,0)
méthode de stylage directe: */
/* COULEURS TEXTE */
.noir {color:rgb(0,0,0);} /* Black */
.blanc {color:rgb(255,255,255);} /* White */
.blanc-casse {color:rgb(255,255,204);}
.beige-clair {color:rgb(255,255,153);}
.grisclair {color:rgb(192,192,192);} /* Silver */
.grisfonce {color:rgb(102,102,102);} /* DimGray */
.turquoise {color:rgb(64,224,208);} /* Turquoise */
.sarcelle {color:rgb(0,128,128);} /* Teal */
.marine {color:rgb(0,0,128);} /* Navy */
.magenta {color:rgb(255,0,255);} /* redondant: à supprimer asap */
.kaki {color:rgb(85,107,47);} /* DarkOliveGreen */
.rose {color:rgb(255,0,255);} /* Fuchsia #ff00ff = Magenta (=rose)*/
.roseindien {color:rgb(205,92,92);} /* IndianRed */
.rouge {color:rgb(205,0,0);} /* Red */
.rougevif {color:rgb(255,0,0);}
.orange {color:rgb(231,72,49);} /* Orange */
.vert-table {color:rgb(51,204,0);} /* historique des nouveautés */
.vert {color:rgb(0,128,0);} /* Green */
.vert-jardin {color:rgb(0,153,0);} /* texte "la campagne à la mer" */
.vertjaune {color:rgb(173,255,47);} /* GreenYellow */
.vert-lime {color:rgb(0,255,0);} /* Lime */
.bleucanard {color:rgb(51,204,255);} /* ? */
.bleu {color:rgb(0,0,255);} /* Blue */
.jaune {color:rgb(255,255,0);} /* Yellow */
.violet {color:rgb(128,0,128);} /* Purple */
.parme {color:rgb(153,0,153);} /* ? */
.cyan {color:rgb(128,0,255);} /* ? */
.magenta {color:rgb(204,0,204);} /* ? */
/* EFFETS TEXTE */
.relief{ /* lettres en relief pour les h1: https://www.alsacreations.com/tuto/lire/1414-css3-texte-shadow-ombre.html */
text-shadow:
0 1px 0 #eee,
0 2px 0 #e5e5e5,
-1px 3px 0 #C8C8C8,
-1px 4px 0 #C1C1C1,
-2px 5px 0 #B9B9B9,
-2px 6px 0 #B2B2B2,
-2px 7px 2px rgba(0,0,0, 0.6),
-2px 7px 8px rgba(0,0,0, 0.2),
-2px 7px 45px rgba(0,0,0, 0.4);
}
/* EFFETS IMAGE */
.opaque{opacity:0.9;}
/* COULEURS FONDS*/
.fonds-noir {background-color:rgb(0,0,0);}
.fonds-blanc {background-color:rgb(255,255,255);} /* affichage code source */
.fonds-blanc-casse {background-color:rgb(255,255,204);} /* versets en blanc cassé */
.fonds-beige-fonce {background-color:rgb(255,255,102);} /* versets en beige foncé !!!!!!!!!!!!!!! IDEM fonds-jaune: remplacer l'un par l'autre !!!*/
.fonds-beige-clair {background-color:rgb(255,255,153);} /* ex 255,255,153 rsrc/index.php en beige clair */
.fonds-grisclair {background-color:rgb(192,192,192);} /* chapitre applis Android */
.fonds-grispale {background-color:rgb(204,204,204);} /* versets en beige foncé */
.fonds-grisfonce {background-color:rgb(102,102,102);} /* CV intitulé de fonction */
.fonds-ciel {background-color:rgb(175,238,238);} /* chris-header */
.fonds-ciel-rgba-10 {background-color:rgba(175,238,238,.1);} /* estompé à 10% */
.fonds-ciel-rgba-20 {background-color:rgba(175,238,238,.2);} /* estompé à 20% */
.fonds-ciel-rgba-30 {background-color:rgba(175,238,238,.3);} /* estompé à 30% */
.fonds-ciel-rgba-40 {background-color:rgba(175,238,238,.4);} /* estompé à 40% */
.fonds-ciel-rgba-50 {background-color:rgba(175,238,238,.5);} /* estompé à 50% */
.fonds-ciel-rgba-60 {background-color:rgba(175,238,238,.6);} /* estompé à 60% */
.fonds-ciel-rgba-70 {background-color:rgba(175,238,238,.7);} /* estompé à 70% */
.fonds-ciel-rgba-80 {background-color:rgba(175,238,238,.8);} /* estompé à 80% */
.fonds-ciel-rgba-90 {background-color:rgba(175,238,238,.9);} /* estompé à 90% */
.fonds-bleu-intense {background-color:rgb(51,204,255);} /* rsrc-trailer */
.fonds-bleupale {background-color:rgb(204,204,255);} /* signature Aleth */
.fonds-jaune {background-color:rgb(255,255,102);} /* ex: 255,255,0 dernières nouvelles en jaune */
.fonds-jaune-leger {background-color:rgb(255,255,153);} /* jaune léger */
.fonds-vert {background-color:rgba(210,255,153,.6);}/* rsrc-header ex:179,255,82 ... atténué à 60% */
.fonds-rouge {background-color:rgb(205,0,0);} /* */
.fonds-rose {background-color:rgb(255,0,255);} /* */
.fonds-rosepale {background-color:rgb(255,192,203);} /* Pink */
.fonds-roseindien {background-color:rgb(205,92,92);} /* IndianRed */
.fonds-h4 {background-color:rgb(230,230,230); /* gris clair, ex 204,204,204 */
border-width:2px;
font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
font-size:1.125em; /* 1.125x body copy size = 18px */
line-height:1.11111111;}
/* COULEURS: FIN */
.hauteur-mini {line-height:0.1em;}
.hauteur-2em {line-height:2em;}
.hauteur-3em {line-height:3em;}
/* présentation de texte: tableau des options de retour à la ligne https://developer.mozilla.org/fr/docs/Web/CSS/white-space */
.insecable {white-space:nowrap;} /* Pas de retour à la ligne automatique même si le texte atteint la limite de la fenêtre.
NB:ne sera plus accepté en CSS3... */
.insecable2 {word-wrap: normal;} /* http://help.dottoro.com/lcjrcphh.php */
.espaces-crlf {white-space:pre;} /* "préservé": Les espaces successifs et les retours chariot sont affichés. */
.espaces-crlf-borde {white-space:pre-wrap;width:min-content;} /* "préservé mais bordé": wrap = > retour à la ligne si dépassement inefficace dans fichiers-divers..*/
.saut-de-page-force {page-break-before:always;}
/* .wrap ne semble pas utilisé nulle part ...
.wrap{ /* cf page 12 gauche: ne marche pas: pourquoi ?
padding:1.25em;
margin:0 auto;
max-width:18em;
column-count:4;
column-width:25%; /* vérifier: Console de Waterfox ne reconnait pas le % ...
column-gap:3em;}
*/
.columns4{-webkit-column-count:4; -webkit-column-gap:10px; -webkit-column-rule:0px dotted Black; -moz-column-count:4; -moz-column-gap:10px; -moz-column-rule:0px dotted Black;
column-count:4; column-gap:10px; column-rule:0px dotted Black;}
.columns3{-webkit-column-count:3; -webkit-column-gap:10px; -webkit-column-rule:0px dotted Black; -moz-column-count:3; -moz-column-gap:10px; -moz-column-rule:0px dotted Black;
column-count:3; column-gap:10px; column-rule:0px dotted Black;}
/* http://forum.alsacreations.com/topic-4-69354-1-Resolu-Positionner-une-liste-autour-dune-image.html */
.columns2{-webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-rule:0px dotted Black; -moz-column-count:2; -moz-column-gap:10px; -moz-column-rule:0px dotted Black;
column-count:2; column-gap:10px; column-rule:0px dotted Black;}
/* IMAGES: DÉBUT */
/* img{
/* max-width:100%; Responsive */
/* height:auto; Responsive */
/* vertical-align:middle; /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
/* border:0;} */
.pleinehauteur { /* pas utilisé car dysfonctionne: re-défini dans aff-image-pleine-hauteur.php avec test en php)
border: solid 59px red;
position: fixed; top: 400; left: 400;
/* height: 100%; */
min-height: fit-content;
/* min-height:100%; max-height: 100%; */
/* min-width:100%; */ width: auto;
vertical-align: middle;
/* .img{
max-width: 100%;
height: inherit !important;
*/
}
/* pas utilisé: #header-bar img {display:block; width:100%;} */
.image-flotte-a-gauche{}
.image-flotte-a-gauche img{float:left; margin-right:1.5em;}
.image-flotte-a-gauche ul ol{padding:0;margin:0;}
.image-flotte-a-droite{}
.image-flotte-a-droite img{float:right; margin-left:1.5em;}
.image-flotte-a-droite ul ol{padding:0;margin:0;}
.image-flotte-bloque{}
.image-flotte-bloque img{float:none;margin-right:0;}
.image-flotte-bloque ul ol{}
.flotte-bloque{clear:both;}
.zoom img{
-webkit-transition: .9s ease-in-out;
-moz-transition: .9s ease-in-out;
/* -o-transition: .9s ease-in-out; non reconnu: quel navigateur ? */
transition: .9s ease-in-out;
}
.zoom img:hover{/* la classe zoom : cf https://www.web-eau.net/blog/15-effets-css3-pour-vos-images */
-ms-transform:scale(7); /* IE 9 */
-webkit-transform:scale(7); /* on multiplie par 10 la taille de l'image */
transform:scale(7);
}
.zoomx2 img{
-webkit-transition: .9s ease-in-out;
transition: .9s ease-in-out;
}
.zoomx2 img:hover{/* la classe zoom : cf https://www.web-eau.net/blog/15-effets-css3-pour-vos-images */
-ms-transform:scale(2); /* IE 9 */
-webkit-transform:scale(2); /* on multiplie par 2 la taille de l'image */
transform:scale(2);
}
h1{ border-width:5px; font-weight:bold; font-size:2em; line-height:1.25; margin-top:10.25em; margin-bottom:10.25em;
display:inline; font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
padding-left:0em; padding-right:0.2em;}
h1:first-letter{text-transform:capitalize; font-size:1.3em;}
@media (min-width:43.75em){h1{font-size:2.5em; line-height:1.125;}}
@media (min-width:56.25em){h1{font-size:2.75em; line-height:1.35;}}
h2{ border-width:4px; font-weight:bold; font-size:1.625em; line-height:1.15384615;
background-color:rgb(204,204,255);
display:inline; font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
padding-left:0.4em; padding-right:0.2em;} /* 1em */
h2:first-letter{text-transform:capitalize; font-size:1.2em;}
@media (min-width:43.75em){h2{font-size:2em; line-height:1.25;}}
@media (min-width:56.25em){h2{font-size:2.25em; line-height:1.25;}}
h3{ border-width:3px; font-weight:bold; font-size:1.375em; line-height:1.13636364; color:black;
background-color:rgb(230,230,230);
display:inline; font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
padding-left:0.8em; padding-right:0.2em;} /* 3em */
h3:first-letter{text-transform:capitalize; font-size:1.1em;}
@media (min-width:43.75em){h3{font-size:1.5em; line-height:1.25;}}
@media (min-width:56.25em){h3{font-size:1.75em; line-height:1.25;}}
h4{ border-width:2px; font-size:1.125em; line-height:1.11111111;
background-color:rgba(175,238,238,.9);
display:inline; font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
padding-left:1.4em; padding-right:0.2em;} /* 6em */
@media (min-width:43.75em){h4{line-height:1.22222222;}}
h5{ border-width:2px; font-size:1.125em; line-height:1.11111111;
background-color:rgba(175,238,238,.5);
display:inline; font-family:Alike,mercury,times new roman,serif,sans-serif,arial;
padding-left:1.8em; padding-right:0.2em;} /* 7em */
@media (min-width:43.75em){h5{line-height:1.22222222;}}
/* ul > li{ https://forum.alsacreations.com/topic-4-60369-1-Interligne-du-contenu-des-elements-de-liste.html
margin: .5em 0; line-height: 2.5;}
*/
li{ margin-top:0;
margin-right:0.2em;
margin-bottom:0;
margin-left:0em;
padding-top:0.5em; /* padding = "rembourrage", permet d'espacer les - entre elles, important sur les smartphones ! */
padding-bottom:0.5em;}
/* Formulaires */
label{ /* https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML */
/* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
display: inline-block;
width: 90px;
text-align: right;
}
input,textarea{
font:1em sans-serif; /* Pour s'assurer que tous les champs texte ont la même police. Par défaut, les textarea ont une police monospace */
/* width:200px; Pour que tous les champs texte aient la même dimension */
/* height:1em; */
/* box-sizing:border-box; */
border:1px solid #999; /* Pour harmoniser l'aspect des bordures des champs texte */
resize:horizontal; /* vertical */
}
input:focus,textarea:focus{ border-color: #000;} /* Pour souligner légèrement les éléments actifs */
textarea{
vertical-align:top; /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
height:5em; /* Pour donner assez de place pour écrire du texte */
}
/* HTML5 Boilerplate - main.css !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */
/* Base styles: opinionated defaults ==========================================================================
html,button,input,select,textarea{color:#222;}
*/
body,caption,th,td,input,textarea,select,option,legend,fieldset,h1,h2,h3,h4,h5,h6{font-size-adjust:0.5;}
body{
font-family:Alike,georgia,times new roman,serif,sans-serif,arial;
font-size:100%;
line-height:1.4;
color:Black;
background-color:rgb(255,255,204);/* ='fonds-blanc-casse' modele image en fond: http://ch.lerolle.free.fr/rsrc/presentation-auteur.php */
/* margin:0; reste un espace entre début-de page et début de header: pourquoi ? */
margin-top:0; /* 0.5em; si 0, supprime toute marge à la page : le texte colle les bordures */
margin-left:0.2em; /* 3px; */
margin-right:0.2em; /* 3px; */
margin-bottom:0;
padding:0;
text-rendering:optimizeLegibility;}
#page{font-size:1em;/* 16px */ line-height:1.25;/* 20px */}
@media(min-width:43.75em){#page{font-size:1em;/* 16px */ line-height:1.375; /* 22px */}}
div{margin:0;} /* margin-top:0; élargi aux 4 directions */
/* infobulle: DEBUT essai de https://meyerweb.com/eric/css/edge/popups/demo.html
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 200px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
/* infobulle: FIN essai de https://meyerweb.com/eric/css/edge/popups/demo.html */
table{
text-align:left;
line-height:1.4;
vertical-align:top; /* inopérant ! */
border:0;
/* cellpadding:2; inopérant: remplacé par ajout de padding:2 en td{} selon https://wiki.whatwg.org/wiki/Presentational_elements_and_attributes */
border-spacing:2px;
margin:0; /* reste un espace entre début-de page et début de header: pourquoi ? */
padding:0;}
tbody{vertical-align:top; /* inopérant ! */}
tr.alterne:nth-child(even) {background:rgb(226,249,249) } /* OK, mais nécessite de remplacer chaque
par
*/
tr.alterne:nth-child(odd) {background:rgb(255,235,255) } /* Silver */
.entre-rangs-0em-1em {border-spacing:0em 1em;} /* */
.entre-rangs-0-5em-0-5em {border-spacing:0.5em 0.5em;}
.rembourrage-vertical {border-collapse:separate; border-spacing:0em 2em;} /* La 1ère valeur indique l'espacement horizontal et la 2ème le vertical */
th {font-weight:normal;}
td {vertical-align:top; /* semble inefficace ici, il faut l'expliciter dans le HTML !!! */
padding:0.2em; /* 2px */}
caption{padding:10px; caption-side:bottom;}
li.alterne:nth-child(even) {background:rgb(226,249,249) } /* remplacer chaque - par
- */
li.alterne:nth-child(odd) {background:rgb(255,235,255) }
/* Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate. Customize the background color to match your design. */
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc; text-shadow:none;}
/* Une règle horizontale qui a meilleur aspect */
hr{ display:block;
clear:both;
color:rgb(102,102,102); /* grisfonce */
background-color:rgb(102,102,102);
height:0.3em; /* 5px */
margin:-0.5em 0;
border:0.3em;
border-top:1px solid #ccc;
/* margin:1em 0; */
margin-left:10em; /* auto */
margin-right:10em; /* auto */
margin-top:0.5em;
margin-bottom:0.5em;
border-style:inset;
border-width:1px;
padding:0px;}
#fondecran{
position:fixed; top:90; left:90; border:solid 59px red; /* Fixe l'image en haut à gauche de la page */
min-width:100%; min-height:100%; /* Préserve le ratio de l'image */
}
/* Remove default fieldset styles. */
fieldset{
border:0;
margin:0;
padding:0px;}
/* Allow only vertical resizing of textareas. déplacé avec les autres options
textarea {resize:vertical;} */
/* Chrome Frame prompt ===== */
.chromeframe{
margin:0.2em 0;
background:#ccc;
color:black;
padding:0.2em 0; /* 1=horizontal 2=vertical */
}