/* 
2col25.css
par Alain BARBIER
écrit en janvier 2013 et revu en novembre 2025
Au début, les smartphones faisaient 310 px de large
Aujourd'hui, les écrans d'ordinateurs font:
FHD: 1920x1080 px
QHD: 2560x1440 px
UHD: 3840x2160 px
Mon smartphone me permet de choisir entre 3 configurations:
1600x720 px
2400x1080 px(j'ai opté pour ça)
3200x1440 px
mais la largeur en cm des écrans n'a pratiquement pas bougé
Le rendu de mon site était moins bon
J'ai ré-écrit mes css pour distinguer les largeurs:
supérieures à 1500 px
comprises entre 1100 et 1500 px
comprises entre 750 et 1100 px
inférieres à 750 px
En ce qui concerne ce css, il est concu pour présenter 
2 colonnes au delà de 1100 px
1 colonne sous les 1100 px
un leger agrandissement des images sous 750 px
tout en s'adaptant à la largeur de l'écran.
*/
/*polices*/
@font-face 
{
font-family: 'smokumregular'; /*police téléchargée sur fontsquirrel.com*/
src: url('polices/Smokum-Regular-webfont.eot');
src: url('polices/Smokum-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('polices/Smokum-Regular-webfont.woff') format('woff'),
     url('polices/Smokum-Regular-webfont.ttf') format('truetype'),
     url('polices/Smokum-Regular-webfont.svg#smokumregular') format('svg');
font-weight:normal;
font-style:normal;
}
/*corps du document, police et fond*/
#corps
{
	width:80vw;
	margin-left: auto;
	margin-right: auto;
}
header
{
	width:80vw;
	border: 1px grey solid; /*bordure grise de 2 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	margin-bottom:5px;
	font-family: smokumregular, arial, verdana, sans-serif;
	text-shadow:8px 8px 8px grey;
}
#contenu
{	
	width:81vw;
	display:flex;
	flex-wrap:wrap;
}
#liens, #image, #social, #annonce, #themes
{
	font-family:arial, verdana, sans-serif;
}		
#liens
{
	width:40vw;
}
#prefere
{
	font-family: smokumregular, arial, verdana, sans-serif;
	width:40vw;
	border:1px grey solid; /*bordure grise de 2 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	margin-bottom:5px;
	padding-top:15px;
	font-size:1em;
	text-shadow:2px 2px 2px grey;
	color:black;
}
.titre
{
	font-family: smokumregular, arial, verdana, sans-serif;
	font-size:50px;
	text-shadow:2px 2px 2px grey;
	color:black;
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}
#liens
{
	margin-bottom:5px;
	padding-left:15px;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	font-size:2em;
	text-shadow:2px 2px 2px grey;
}
#image
{	
	width:40vw;
    background :url(fond1.jpg) repeat;
	border:1px grey solid; /*bordure grise de 1 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	padding-top:15px;
	margin-bottom:5px;
	text-align:center;
}
#liens, #social
{
	margin-right:5px;
}
#social, #annonce
{
	width:40vw;
	border:1px grey solid; /*bordure grise de 1 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	margin-bottom:5px;
	text-align:center;
	font-size:1em;
	color:darkblue;
	text-shadow:2px 2px 2px grey;
}
#themes
{	
	width:80vw;
	font-size:1.5em;
	color:darkblue;
	text-shadow:2px 2px 2px grey;
	padding-left:5px;
	padding-right:5px;
	padding-top:20px;
	height:auto;
	border:1px grey solid; /*bordure grise de 1 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
}
footer /*disparition du pied de page*/
{
    display: none;
}
#liens1
{
	width:120px;
	padding-left:0px;
}
#liens2
{
	width:180px;
}
.notes
{
	font-size:0.9em;
	font-style:italic;
	padding-left:20px;
	padding-right:20px;
}
audio {
 width:80%;
}
/*listes à puces sans puces*/
ul
{
	list-style:none;
}
/*liens en noir, non soulignés, 
deviennent bleus et gras au survol du mulot*/
a{
text-decoration:none;
color:darkblue;
}
a:link{
color:darkblue;
}
a:visited {
color:darkblue;
}
a:hover{
color:blue;
font-weight:bold;
}
h1
{
	font-size:5em;
	font-weight:normal; 
	font-style:normal;
	text-align:center; 
}
h2{
	font-size:1.5em;
	font-style:italic;
	text-align:center; 
	color:darkblue;
	text-shadow:3px 3px 3px grey;
}
h3{
	font-size:1.1em;
	font-style:italic;
	text-align:left; 
	padding-left:20px;
	padding-right:10px;
	color:darkblue;
	text-shadow:1px 1px 1px grey;
}
.grdimage 
{
	width:30vw;		
}
.image 
{
	width:25vw;
    display:block;
    margin-left:1vw;
	margin-top:10px;
	margin-bottom:10px;
}
.moyimage
{
	width:15vw;	
}
.ptitimage
{
	width:12vw;	
}
.vignettes
{
	width:13vw;
	display:flex;
	justify-content:space-around;
}
#imagedujour
{
	width:39vw;
}
.red {
	color:red;
}
.video
{
	width:95%;
	height:95%;
	border:0px;
}
/*-------------------------------------------------*/
/*                                                 */
/*                                                 */
/*         pour les écrans < 1100 pixels           */
/*                                                 */
/*                                                 */
/*-------------------------------------------------*/
@media all and (max-width:1100px)
{
#corps
{
	width:90vw;
	margin-left: auto;
	margin-right: auto;
}
header
{
	width:90vw;
	border-radius: 10px; /*angles arrondis de 15 pixels*/
	margin-bottom:5px;
	text-shadow:2px 2px 2px grey;
}
h1
{
	font-size:3.9em;
}
h3{
	font-size:1em;
	padding-left:20px;
	padding-right:10px;
	text-shadow:1px 1px 1px grey;
}
#contenu
{	
	width:90vw;
	flex-direction:column;
}
#prefere
{
	width:90vw;
	border:1px grey solid; /*bordure grise de 2 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	margin-bottom:5px;
	padding-top:15px;
	font-size:30px;
	text-shadow:2px 2px 2px grey;
}
.titre
{
	font-size:50px;
	text-shadow:2px 2px 2px grey;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center; 
}
#liens, #image, #social, #annonce
{
	width:90vw;
	margin-right:0px;
}
#liens
{
	font-size:1.5em;
	text-shadow:1px 1px 1px grey;
	justify-content:flex-start;
}
#social, #annonce
{
	border:1px grey solid; /*bordure grise de 2 pixels*/
	border-radius:15px; /*angles arrondis de 15 pixels*/
	padding-top:0px;
	font-size:1em;
	text-align:center;
	padding:20px 0px 20px 0px;
}
#themes
{
	width:89vw;
	height:auto;
	font-size:1.5em;
}
#liens1
{
	width:30vw;
	padding-left:3vw;
}
#liens2
{
	width:40vw;
}

.notes
{
	font-size:1em;
}
.grdimage {
	width:60vw;	
}
.moyimage
{
	width:28vw;	
	margin-left:2vw;
	margin-right:2vw;
}
.ptitimage
{
	width:25vw;	
	margin-left:2vw;
	margin-right:2vw;
}
.image 
{
	width:28vw;
    display:block;
    margin-left:1vw;
	margin-top:0.1vw;
	margin-bottom:0.1vw;
}
#imagedujour
{
	width:55vw;
}
}
/*-------------------------------------------------*/
/*                                                 */
/*                                                 */
/*         pour les écrans < 750 pixels           */
/*                                                 */
/*                                                 */
/*-------------------------------------------------*/
@media all and (max-width:750px)
{
#imagedujour
{
	width:80vw;
}	
h1
{
	font-size:2.4em;
}
#liens
{
	font-size:1em;
}
}