/* HTML tag styles */
/***********************************************/
/*
#pagenveloppe {
width: 80vw;
background:#FFFF;
font-family: Verdana, sans-serif;
margin:auto auto;
padding:0px 0px 0px 0.5vw;
position:relative;
box-shadow: 0 0 5px 5px #333;
}*/
html {font-size: 100%; /* Respecte les paramètres utilisateur */}
body {font-size: 1rem; /* Base relative à */}
#pagenveloppe {
width: 94vw;
background:#FFFFFF;
padding:0 1vw 0 1vw;
margin:auto auto;
line-height: 1;
-webkit-box-shadow: 0 0 5px 5px #333;
}
#entete{
margin: auto auto;
height: 6vw;
width: 98%;
position:relative;
}
#pagewrapper {
position: relative;
top:1vw;
left:1vw;
width: 80vw;
background:#FFFFFF;
padding:0 0.25vw 0 0.25vw;
margin:0 auto;
/**box-sizing: border-box;***/
z-index:1;
}
.kontenair {
display: flex;
flex-direction: row;
margin: -1vw 0px -1vw 0px;
padding: 0px 0px 0px 0px;
}
nav a.Prim{ /* tous les liens a à l'intérieur de la balise nav avec la classe : Prim */
float: left; /* effet flottant */
text-decoration: none; /* pas d'héritage avec effet souligné */
color: black; /* couleur du texte */
background: #99C6FF; /* couleur de fond */
line-height: 3vw; /* interligne */
border-radius: 4px;
padding:0px 4px; /* marges intérieures */
margin-left:0.1vw;
margin-top:4vw;
font-family: sans-serif; /* police d'écriture */
font-size: clamp(0.8rem, 1.125vw, 1.8rem); /* taille du texte */
transition: .5s; /* temps de transition lors du hover : une demi seconde */
}
nav a.Prim:hover{ /* tous liens lors du survol dans la balise nav avec la classe : test */
background: #f43c80; /* couleur de fond */
}
nav a.test{ /* tous les liens a à l'intérieur de la balise nav avec la classe : test */
float: left; /* effet flottant */
text-decoration: none; /* pas d'héritage avec effet souligné */
color: black; /* couleur du texte */
background: #FFFF99; /* couleur de fond */
line-height: 3vw; /* interligne */
border-radius: 4px;
padding:0px 5px; /* marges intérieures */
margin-top:4vw;
margin-left:0.1vw;
font-family: sans-serif; /* police d'écriture */
font-size: clamp(0.8rem, 1.125vw, 1.8rem); /* taille du texte */
transition: .5s; /* temps de transition lors du hover : une demi seconde */
}
nav a.test:hover{ /* tous liens lors du survol dans la balise nav avec la classe : test */
background: #f43c80; /* couleur de fond */
}
nav.redirection{
margin: 1px 0px 0px 1px;}
nav a.redirection{
padding:3px 3px;
margin:0px 0px 5px 0px;
border-radius: 4px;
color: black; /* couleur du texte */
background: #ffcc99; /* couleur de fond */
font-family: Arial; /* police d'écriture */
font-size: clamp(0.7em, 1.125vw, 1.5em); /* taille du texte */
transition: .5s; /* temps de transition lors du hover : une demi seconde */
}
nav a.redirection:hover{
background: grey; /* couleur de fond */
}
nav
a.Doma{ /* tous les liens a à l'intérieur de la balise nav avec la classe : Doma */
text-decoration: none; /* pas d'héritage avec effet souligné */
color: white; /* couleur du texte */
background: #1466d0; /* couleur de fond */
height: 26px; /* hauteur */
line-height: 23px; /* interligne */
padding:0px 5px; /* marges intérieur */
margin-left:0.1vw;
font-size: clamp(0.72em, 1.25vw, 1.25em); /* taille du texte */
transition: .5s; /* temps de transition lors du hover : une demi seconde */
}
nav
a.Doma:hover{ /* tous liens lors du survol dans la balise nav avec la classe : test */
background: #f43c80; /* couleur de fond */
}
/* ESSAIS social-bar 04 10 2026 */
/* Conteneur du bandeau */
.social-reso {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
}
.social-bar {
background-color: #fff;
padding: 15px 30px;
border-radius: 50px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.social-bar ul {
list-style: none;
display: flex;
gap: 20px;
}
.social-bar li a {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
text-decoration: none;
border-radius: 50%;
color: #fff;
font-size: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Effet de survol global */
.social-bar li a:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Couleurs spécifiques par réseau */
/* Facebook : Bleu officiel */
.social-bar li:nth-child(1) a {
background-color: #3b5998;
}
/* X (Twitter) : Noir */
.social-bar li:nth-child(2) a {
background-color: #000000;
}
/* Instagram : Dégradé officiel */
.social-bar li:nth-child(3) a {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
/* LinkedIn : Bleu officiel */
.social-bar li:nth-child(4) a {
background-color: #0A66C2;
}
/* YouTube : Rouge officiel */
.social-bar li:nth-child(5) a {
background-color: #FF0000;
}
/* DEBUT HEADER */
header {
/*background-color: #fff;*/
inset: 0 0 auto 0;
padding-bottom: 1px;
padding-top: 1px;
position: sticky;
z-index: 11;}
#header_container {
margin-left: auto;
margin-right: auto;}/* FIN HEADER CONTAINER*/
/*Slide show PHOTORAMA images*/
#SlideShownew{
height: clamp(200px, 40vw, 700px);
top:5px;
left:4vw;
overflow:hidden;
opacity:1;}
#SlideShow{
height: clamp(110px, 28vw, 600px);
top:5px;
left:4vw;
overflow:hidden;
opacity:0.9;}
.nivoSlider{
width: 90%;
position: relative;
display: block;
content:center;}
.nivoSlider img{
position:absolute;
display: block;}
.nivo-main-image{
display: none;
position: relative; }
/* The slices and boxes in the Slider */
.nivo-slice{
display:block;
position:absolute;
z-index:5;}
.nivo-box{
display:block;
position:absolute;
z-index:5;}
/* Caption styles SOUS-TITRES */
.nivo-caption{
position:relative;
opacity: 0.8;
left:2px;
font-weight:normal;
font-size:clamp(0.7rem, 1vw, 1.4rem);
font-family: Arial;
bottom: -1vw;
color:white;
width: 35vw;
z-index:50;}
/* positionne la boite "title" */
.nivo-caption p{
padding:5px;
opacity: 0.6;
margin:0;
font-weight:normal;
font-size: 0.7em;}
.nivo-caption a{
display:inline !important;}
.nivo-html-caption {
display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a{
position:absolute;
top:45%;
z-index:9;
cursor:pointer;}
.nivo-prevNav{
left:0px;}
.nivo-nextNav{
right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a{
position:relative;
z-index:9;
cursor:pointer;}
.nivo-controlNav a.active{
font-weight:bold;}
/* FIN SLIDE SHOW*/
h1.entete {
font-family: Verdana,Arial,sans-serif;
font-size: 0.6em;
color: #334d55;
padding: 10px 0px 0px 0px;
}
img.entete
{float: right;
position: relative;
top:-1.25em;
width: 43%;
height: 95%;
}
p.entete {
font-family: Verdana,Arial,sans-serif;
font-size:0.47em;
width:60%;
line-height: 1em;
margin: .1em .5em -.2em .1em;
}
p.small{
font-family: Arial;
line-height:0.2%;
clear: both;
font-size: clamp(0.1vw, 0.1vw, 0.1vw); /* taille du texte */
}
#colonnesenveloppe {
position:relative;
width: 100%;
height:auto;
margin: 3vw 0vw 0vw -1.2vw;
padding: 1px 1px 1px 2vw;
overflow: visible;
font-family: Didot,sans-serif;
z-index:1000;
}
#contenairH {
position:relative;
width: 100%;
height:auto;
margin: 5px 0px 0px 0px ;
display: flex;
flex-direction: row;
background-color: white;
}
#contenairV {
position:relative;
width: 20%;
height:auto;
display:flex;
flex-direction: column;
}
#contenairVCenter {
position:relative;
width: 36%;
height:auto;
display:flex;
flex-direction: column;
}
#globalNav{
position:relative;
color: #cccccc;
width: 45%;
padding: 0px 0px 0px 0px;
white-space: nowrap;
}
#siteInfo{
font-size: 30%;
padding: 5px 0px 0px 0px;
position:relative;
color: #5C82B8;
margin : auto;
padding: 0px 0px 0px 0px;
}
#siteInfo img
{
padding: 1px 20px 1px 10px;
vertical-align: middle;
}
/* spécial kenteliou.php */
a.doar{
color: #683703;
text-decoration:none;
font-size: clamp(0.65rem, 0.95vw, 1.15rem);
}
a.doar:link {
color: #683703;
text-decoration:none;
font-size: clamp(0.65rem, 0.95vw, 1.15rem);
}
a.doar:hover{
color: #04480c;
font-size: clamp(0.65rem, 0.95vw, 1.15rem);
font-weight: 800;
text-decoration: none;
}
span.kelenn{ /* spécial kenteliou.php */
font-family:"Helvetica";
position :relative;
color: #0a3c83;
font-size: clamp(0.65rem, 1.125vw, 1.35rem);; /* taille du texte */
}
span.keln{
font-family:"Arial";
color: #1F497D;
position :absolute;
}
/************** footer *************/
footer {
font-family:"Futura";
justify-content: center;
font-size: clamp(0.7rem, 1.1vw, 1.4rem);
padding:0;
margin:0 auto;
background-color: #032859;
color: #fff;
}
a.footer:hover{
text-decoration:none;
color:#ffffff;
}
a.footer:visited{
text-decoration:none;
color:#ffffff;
}
a.footer:link{
text-decoration:none;
color:#ffffff;
}
hr.footer {
width:20%;
margin:1em auto;
border:1px ridge white;
}
p.footer {
font-family:"Futura";
display: flex;
justify-content: center;
font-size: clamp(0.7rem, 1.12vw, 1.4rem);
padding:0;
margin:0 auto;
color: #fff;
}
ul.footer {
text-decoration:none;
color:#ffffff;
}
li.footer {
text-decoration:none;
list-style-type:none;
color:#ffffff;
}
.footer_inside {
width:90%;
margin:0.25em auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer_img {
width:10%;
margin: 0px 0px 0px 0px;
justify-content: space-around;
align-items: center;
}
.footer_copy {
width:38%;
margin: 0px 10px 0px 0px;
justify-content: space-around;
align-items: center;
}
.footer_count {
width:0.25%;
font-size: clamp(0.7rem, 0.8rem, 0.9rem);
margin:0 0;
justify-content: space-around;
align-items: center;
}
.footer_legal {
width:42%;
margin:0 auto;
justify-content: space-around;
align-items: center;
}
.footer_email {
width:33%;
margin:0 auto;
justify-content: space-around;
align-items: center;
}
input[type="email"]{
font-size: clamp(0.7rem, 1vw, 1.4rem);
width:100%;
height:1.5vw;
text-align:center;
border:none;
}
input[type="submit"]{
font-size: clamp(0.7rem, 1vw, 1.4rem);
width:100%;
height:1.5vw;
background-color:#518ccc;
text-align:center;
border:none;
color:#ffffff;
font-weight:700;
cursor:pointer;
margin-top:0.5em;
}
input:focus{
outline:none;
}
/************** footer ***************/
br.cb {
clear:both;
}
p{
font-size:clamp(8pt, 2.5vw, 14pt);
font-family:"Didot","serif";
width:90%;
line-height: auto;
margin: 0em 0em 0.05em 0em;
}
p.normal{
font-size:clamp(0.7rem, 1.125vw, 1.4rem);
font-family:"Arial, sans-serif";
margin: 0.75rem 0.5rem 0.75rem 0rem;
width:auto;
}
p.apercu{
font-size:clamp(0.6rem, 0.893vw, 1.7rem);
padding: 0.15vw 0.25vw;
line-height: 130%;
font-style: italic;
font-family:"Arial, sans-serif";
}
/************** Bouton **************/
.styled4 {
border: 0;
float:right;
margin:0 0.15vw 0 0;
padding: 0.15vw 0.25vw;
text-align: center;
border-radius: 3px;
background-color: rgb(125, 225, 225);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled4:hover {
background-color: rgb(255, 190, 10);
}
.styled4:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.styled5{
border: 0;
padding: 5px 8px;
text-align: center;
border-radius: 4px;
background-color: rgba(113, 140, 52, 1);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled5:hover {
background-color: rgba(255, 0, 0, 1);
}
.styled5:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
/* END BUTTON */
/* overrides decoration from previous rule for hovered links */
h1{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.8rem, 1.30vw, 2rem);
color: #334d55;
padding: 1px 0px 0px 0px;
}
h2{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.75rem, 1.25vw, 1.80rem);
color: #006699;
padding: 5px 0px;
}
h3{
font-family: Arial;
font-size: 104%;
color: #334d55;
padding: 5px 0px;
}
h4{
font-family: Arial;
font-size: clamp(0.6rem, 1.125vw, 1.4rem);
color: #FFFFFF;
margin: 1px 0px 0px 0px;
padding: 1px 0px 0px 0px;
}
h5{
font-family: Arial;
font-size: 33%;
letter-spacing : -0.01em;
font-weight: 100;
color: black;
margin: 1px 0px 0px 0px;
padding: 1px 0px 0px 0px;
}
.oberour{
font-family: Helvetica;
background-color: rgba(6,91,132,0.76);
width: 99%;
font-size: clamp(0.75rem, 1.35vw, 1.6rem); /* taille du texte */
color: white;
border: 1px solid grey;
}
.titl{
font-family: Arial;
background-color: rgb(30 34 50 / 89%);
width: 99%;
font-size: clamp(0.75rem, 1.35vw, 1.6rem); /* taille du texte */
color: white;
border: 1px solid grey;
}
.biblio {
margin: 0;
padding: 0.3rem 0rem 0rem 0rem;
background-color: #eeeeee;
}
/************LIENS A HREF a href************/
a:link, a:visited, a:hover{
color: #a60606;
text-decoration: none;
}
a.bouton{
color: white;
font-size: clamp(0.7rem, 1.125vw, 1.4rem);
}
a.lien1:link {
color: #185a82;
font-size: clamp(0.7rem, 1.125vw, 1.4rem);
text-decoration: none;
}
a.lien1:visited, a.lien1:hover {
font-family: Liberation;
margin:10px 0px 10px 0px;
line-height:80%;
color: #0c64ee;
font-size: clamp(0.7rem, 1.125vw, 1.4rem);
text-decoration: none;
}
a.lien2:link {
color: #FFF;
font-size: clamp(0.7rem, 1.125vw, 1.4rem);
text-decoration: none;
}
a.lien2:visited, a.lien2:hover {
font-family: Liberation;
margin:10px 0px 10px 0px;
line-height:80%;
color: #FFF;
font-size: clamp(0.7rem, 1.125vw, 1.4rem);
text-decoration: none;
}
a.lien{
font-size: clamp(0.65rem, 1.125vw, 1.4rem);
color: #003333;
}
a.lien:link {
font-size: clamp(0.65rem, 1.125vw, 1.4rem);
color: #000000;
}
a.lien:hover{
color: #04480c;
font-size: clamp(0.65rem, 1.125vw, 1.4rem);
font-weight: 800;
text-decoration: none;
}
a.Autt{
color: #1F497D;
font-size: clamp(0.65rem, 1.125vw, 1.4rem);
font-weight: 400;
}
a.Autt:hover{
color: #1F497D;
font-size: clamp(0.65rem, 1.125vw, 1.4rem);
font-weight: 800;
text-decoration: none;
}
/*Left 1ere column*/
.rectangle-texte {
background: linear-gradient(0.25turn, black, 50%, blue); /* Couleur de fond */
width:17.90vw;
height: auto;
color: white; /* Couleur du texte */
padding: 5px 2px 1px 1px; /* Espace intérieur */
margin: -2px 0px 1px 0px; /* Espace extérieur */
display: inline-block;
z-index : 2;
/* S'adapte au texte (pour span) */
/* ou display: block; pour occuper toute la largeur */
}
/*
@media screen and (min-width: 350px) and (max-width: 499px){
.FeatureArticleLeft
{
width:18vw;
height:12.5vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
z-index : 1;
}}
@media screen and (min-width: 500px) and (max-width: 599px){
.FeatureArticleLeft
{
width:18vw;
height:10vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 600px) and (max-width: 1199px) {
.FeatureArticleLeft
{
width:18vw;
height:8vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 1200px) and (max-width: 1599px){
.FeatureArticleLeft
{
width:18vw;
height:7vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media (width > 1599px){*/
.FeatureArticleLeft
{
width:18vw;
height:auto;
border:1px solid #ccbbaa;
padding: 5px 2px 1px 1px;
margin:0px 0px 4px 0px;
overflow: visible;
}
.FeatureArticleLeft h1
{
background: linear-gradient(#0D2A4A, #62A1EA);
font-family: Arial;
font-size:clamp(0.9rem, 1.2vw, 2rem);
margin: 0px 2px 0px 2px;
padding: 2px 2px 2px 2px;
color: white;
}
.FeatureArticleLeft h4
{
font-family: Arial;
font-size: clamp(0.8rem, 1.125vw, 1.8rem);
color: #FFFFFF;
margin: 1px 2px 0px 2px;
padding: 2px 0px 0px 0px;
}
.FeatureArticleLeft h5
{
font-size:clamp(0.7rem, 1.175vw, 1.6rem);
padding: 2px 2px 0px 2px;
font-family: Arial;
color: white;
}
.FeatureArticleLeft p
{
font-size:clamp(0.7rem, 1.175vw, 1.4rem);
font-family: Arial;
line-height: auto;
}
.FeatureArticleLeft a
{
color: #FFFFFF;
width: 18vw;
display:inline-block;
text-decoration: none;
background-color: #065360;
}
.FeatureArticleLeft a:hover{
color: #FFFFFF;
transition: all 0.5s ease-out;
background: linear-gradient(0.25turn, red, 50%, blue);
}
/*Center 3ème column*/
@media screen and (min-width: 350px) and (max-width: 499px){
.FeatureArticleCenter
{
width:33vw;
height:16vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 500px) and (max-width: 599px){
.FeatureArticleCenter
{
width:33vw;
height:10vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 600px) and (max-width: 1199px) {
.FeatureArticleCenter
{
width:33vw;
height:9vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 1200px) and (max-width: 1599px){
.FeatureArticleCenter
{
width:33vw;
height:8vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media (width > 1599px){
.FeatureArticleCenter
{
width:33vw;
height:7vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
.FeatureArticleCenter h1{
background: linear-gradient(#A9DF84, #1F420C) repeat scroll 0% 0% transparent;
font-family: Verdana, sans-serif;
font-size:clamp(0.8rem, 1.175vw, 1.4rem);
font-weight: 100;
margin: 0px 0px 0px 0px;
padding: 0px 2px 2px 2px;
color: white;
}
.FeatureArticleCenter h5{
font-size:clamp(0.7rem, 1.175vw, 1.4rem);
line-height: auto;
font-family: Verdana, sans-serif;
letter-spacing : 0.01em;
font-weight: 100;
color: black;
}
.FeatureArticleCenter p
{
font-size:clamp(0.7rem, 1.175vw, 1.4rem);
font-family: Verdana, sans-serif;
line-height: auto;
margin: 0px 0px 0px 0px;
}
.FeatureArticleCenter a
{
color: #003333;
font-weight:100;
font-family: Verdana,sans-serif;
background-color: rgb(255, 255, 190);
}
.FeatureArticleCenter a:hover {
background-color: rgb(255, 120, 120);
}
/*Right column*/
@media screen and (min-width: 350px) and (max-width: 499px){
.FeatureArticleRight
{
width:18vw;
height:16vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 500px) and (max-width: 599px){
.FeatureArticleRight
{
width:18vw;
height:10vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 600px) and (max-width: 1199px) {
.FeatureArticleRight
{
width:18vw;
height:9vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media screen and (min-width: 1200px) and (max-width: 1599px){
.FeatureArticleRight
{
width:18vw;
height:8vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
@media (width > 1599px){
.FeatureArticleRight
{
width:18vw;
height:7vw;
border:1px solid #ccbbaa;
margin:0px 0px 4px 0px;
overflow: visible;
}}
.FeatureArticleRight h1{
background: linear-gradient(#259092, #49CED1) repeat scroll 0% 0% transparent;
font-family: Verdana, sans-serif;
font-size:clamp(0.8rem, 1.175vw, 1.4rem);
font-weight: 100;
margin: 0px 0px 0px 0px;
padding: 0px 2px 2px 2px;
color: white;
}
.FeatureArticleRight h5{
font-size:clamp(0.7rem, 1.175vw, 1.4rem);
line-height: auto;
font-family: Verdana, sans-serif;
letter-spacing : 0.01em;
font-weight: 100;
color: black;
}
.FeatureArticleRight p
{
font-size:clamp(0.7rem, 1.175vw, 1.4rem);
font-family: Verdana, sans-serif;
line-height: auto;
margin: 0px 0px 0px 0px;
}
.FeatureArticleRight a
{
color: #003333;
font-weight:100;
font-family: Verdana,sans-serif;
background-color: rgb(255, 255, 190);
}
.FeatureArticleRight a:hover {
background-color: rgb(255, 100, 100);
}
/************** aside ***************/
aside {
position: relative;
height: auto;
margin: 0.25vw 2.25vw 0.25vw 0vw;
float: right;
border-radius: 4px;
font-family: sans-serif;
font-size: clamp(0.8rem, 1vw, 1.4rem); /* taille du texte */
}
aside ul{
margin:0.7em 0px 0.7em 0px;
padding: 0 0 0 1.25em;}
aside li{
padding: 2px 0 0 0;}
aside li a {
text-decoration: none;
color: #FFF;
display:block;
}
#expo{
width: 26.5vw;
background: linear-gradient(#EA6275, #EAA5A5);
}
#texto{
width: 16.5vw;
background: linear-gradient(#729DEE, #A5E7EE82);
}
#promo{width: 10%;background: linear-gradient(#F2CC59, #fbce2052);}
#foto{width: 35%;float: right;background:none;border-radius: 10px;font-style: normal;}
#emball{position:relative;display:block;margin: -3vw 0vw 0vw -1.25vw;max-width: 30vw;max-height: 30vw;border-radius: 4px;}
.container {
display: grid;
/* Définit 2 colonnes : la première fixe (200px), la seconde prend l'espace restant */
grid-template-columns: 200px 1fr;
/* Définit 3 lignes : une pour l'en-tête, une pour le corps, une pour le pied */
grid-template-rows: 80px 1fr 60px;
/* Espacement entre les éléments */
gap: 10px;
height: 100vh; /* Prend toute la hauteur de l'écran */
}
.entete {
grid-column: 1 / 3; /* S'étend sur les 2 colonnes */
background-color: #f0f0f0;
}
.sidebar {
background-color: #e0e0e0;
}
.content {
background-color: #d0d0d0;
}
.pied {
grid-column: 1 / 3; /* S'étend sur les 2 colonnes */
background-color: #c0c0c0;
}
/* Mobile : on passe à 1 colonne */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 60px auto 1fr 60px;
}
.entete { grid-column: 1; }
.pied { grid-column: 1; }
}
/* Tableaux */
table.tb {
border-collapse: separate;
font-size: clamp(0.6em, 1.125vw, 1.2em); /* taille du texte */
width: 99%;
border-spacing: 1px 1px;
display:inline-table;
border: solid grey 0px;}
.tb td.tcell8 {
text-align:center;
background: #dde2f2;}