/***********************************************/
/* Index.css*/
/***********************************************/
/* HTML styles des pages par défaut*/
/***********************************************/
body{
	background-image: url("images/image001.png");
	font-family: Arial;
	color: #333333;
	font-size: 16px;
	line-height: 1.025;	
	width:100%;
}

#pagewrapper {
width: 78vw;
background:#FFFFFF;
padding:0 20px;
margin:0 auto;
-webkit-box-shadow: 0 0 5px 5px #333;
-moz-box-shadow: 0 0 5px 5px #333;
box-shadow: 0 0 5px 5px #333;
}

#page70vw {
width: 70vw;
background:#FFFFFF;
padding:0 2vw 0 2vw;
margin:0 auto;
line-height: 1;	
-webkit-box-shadow: 0 0 5px 5px #333;
}

#page80vw {
width: 80vw;
background:#FFFFFF;
padding:0 2vw 0 2vw;
margin:0 auto;
line-height: 1;	
-webkit-box-shadow: 0 0 5px 5px #333;
}

#page86vw {
width: 86vw;
background:#FFFFFF;
padding:0 1.75vw 0 1.75vw;
margin: 0 0 0 4vw;
line-height: 1;	
-webkit-box-shadow: 0 0 5px 5px #333;
}
/***********nouveau novembre 2025********************/
#page94vw {
width: 94vw;
background:#FFFFFF;
padding:0 1vw 0 1vw;
margin:0 1vw 0 1vw;
line-height: 1;	
-webkit-box-shadow: 0 0 5px 5px #333;
}
/*******************************/
.articletext1 {
background:#FFFFFF;
margin-left: 0.10in;
margin-right: 0.10in;
}


/***************** WORD ********************/
#pageword {
background:#FFFFFF;
margin-left: 0.67in;
margin-right: 0.67in;
box-shadow: 0 0 5px 3px #333;
}

p.word1{
font-family: Liberation Serif, serif;
margin-left: 0.08in;
margin-right: 0.08in;
margin-top: 0.08in;
margin-bottom: 0.08in;
line-height: 100%;
font-size: 12pt;
}

p.word2{
font-family: Liberation Serif, serif;
margin-left: 0.08in;
margin-right: 0.08in;
margin-top: 0.08in;
margin-bottom: 0.08in;
line-height: 100%;
font-size: 12pt;
}

/***********************************************/
/* Spécial recette                               */
/***********************************************/

#pagerecette {
width: 72vw;
background-image: url("images/image005.webp");
padding:0 5px;
padding-bottom:20px;
margin:auto auto;
box-shadow: 0 0 5px 5px #333;
}

p.recette, li.recette, div.recette {
	line-height:100%;
	font-size: clamp(0.75em, 1.125vw, 1.25em); /* taille du texte */
	font-family:"Liberation Serif","serif";
}
p.re7, li.re7, div.re7 {
	margin-left:1vw;
	line-height:120%;
	font-size: clamp(0.78em, 1.125vw, 1.25em); /* taille du texte */
	font-family:"Liberation Serif","serif";
}
/***********************************************/
/* p class                           */
/***********************************************/
p{
	font-family: Arial;
	line-height:100%;
	font-size: clamp(0.7em, 1.125vw, 1.125em); /* taille du texte */
}

p.smartphone{
	font-family: Arial;
	color: black;
	line-height:100%;
	font-size: clamp(0.51em, 1.125vw, 1.125em); /* taille pour smartphone */
}

p.tablette{
	font-family: Arial;
	color: black;
	line-height:80%;
	font-size: clamp(0.51em, 1.125vw, 1.125em); /* taille pour smartphone */
}

p.ecran{
	font-family: Arial;
	color: black;
	line-height:80%;
	font-size: clamp(0.625em, 1.125vw, 1.125em); /* taille pour smartphone */
}

p.ecran7em{
	font-family: Arial;
	color: black;
	line-height:80%;
	font-size: clamp(0.7em, 1.125vw, 1.125em); /* taille pour smartphone */
}

p.small{
	font-family: Arial;
	line-height:0.2%;
	clear: both;
	font-size: clamp(0.1vw, 0.1vw, 0.1vw); /* taille du texte */
}

a:link, a:visited, a:hover{
color: #046060;
font-size: clamp(0.7em, 1.125vw, 1.125em);
text-decoration: none;
}

a.bouton{
	color: white;
	font-size: clamp(0.6em, 1vw, 1.15em);
	}

a.lien1:link {
color: #185a82;
font-size: clamp(0.7em, 1.15vw, 1.25em);
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.6em, 1.115vw, 1.15em);
text-decoration: none;
}

.Geriou, li.Geriou, div.geriou {
	font-size: clamp(0.715em, 1.13vw, 1.3em);
	font-family:"Liberation Serif",serif;}

p.Ligne{
	font-family: Arial;
	text-align: justify;
	font-size: clamp(0.7em, 1vw, 1em);
}

p.Arial{
	font-family: Arial;
	margin:0px 0px 0px 0px;
	line-height:130%;
	font-size: clamp(0.7em, 1.10vw, 1em); /* taille du texte */
	font-weight: 400;
	color: #000000;
}

p.Galleg, li.Galleg, div.Galleg{
	font-family: Liberation;
	margin:10px 0px 10px 0px;
	line-height:80%;
	font-size: clamp(0.78em, 1.15vw, 1.25em); /* taille du texte */
	font-weight: 400;
	color: #650000;
}

p.Geriaoueg{
	font-family: Arial;
	margin:10px 0px 10px 0px;
	/*line-height:80%;*/
	font-size: clamp(0.71em, 1.10vw, 1em); /* taille du texte */
	font-weight: 400;
	color: #000000;
}

p.Justif {
	margin:5px 0px 5px 0px;
	word-break: break-word;
	text-align: justify;
	line-height:1.25em;
	font-size: clamp(0.7em, 1.125vw, 1.125em);
	font-family: Arial;
	/*line-height:80%;*/
	}
	
p.Justifecran {
	margin:0px 0px 0px 0px;
	word-break: break-word;
	text-align: justify;
	line-height:1em;
	font-size: clamp(0.625em, 1.125vw, 1.125em);
	font-family: Arial;}

p.Kentel, li.Kentel, div.Kentel {
    word-break: break-word;
	text-align: justify;
	letter-spacing: .1em;
	font-size:13pt;
	font-family:"Liberation Serif",serif;}

p.Liberation{
	font-family:Liberation;
	margin:10px 0px 10px 0px;
	line-height:80%;
	font-size: clamp(0.78em, 1.25vw, 1.25em);
	font-weight: 400;
	color: #000000;
}

p.Normal, li.Normal, div.Normal {
	word-break: break-word;
	letter-spacing: normal;
	font-size: clamp(0.78em, 1.25vw, 1.25em);
	line-height:115%;
	font-family:"Liberation Serif",serif;}

p.Normal1, li.Normal1, div.Normal1{
	word-break: break-word;
	letter-spacing: normal;
	color: #000000;
	font-size: clamp(0.7em, 1.15vw, 1.25em);
	line-height:100%;
	font-family:"Liberation Serif",serif;}

p.Normah10, li.Normah10, div.Normah10{
	line-height:10%;
	margin:4px 0px 4px 0px;
	font-size: 50%;
	font-family:Liberation;}

p.Normah30, li.Normah30, div.Normah30{
	line-height:30%;
    word-break: break-word;
	letter-spacing: normal;
	font-size: 88%;
	font-family:"Liberation Serif",serif;}
/***********nouveau novembre 2025********************/
p.Normah50, li.Normah50, div.Normah50{
	font-size: clamp(0.72em, 1.275vw, 1.275em);
	line-height:50%;
	font-family:"Liberation Serif",serif;}
	
p.Normah50V, li.Normah50V, div.Normah50V{
	font-size: clamp(0.6em, 1.205vw, 1.225em);
	line-height:50%;
	letter-spacing: 0px;
	font-family: Verdana, sans-serif;}
/*******************************/
p.Normah70, li.Normah70, div.Normah70{
	margin:6px 0px 6px 0px;
	font-size: clamp(0.78em, 1.25vw, 1.25em);
	line-height:70%;
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}

p.Normah95, li.Normah95, div.Normah95{
	font-size: clamp(0.78em, 1.25vw, 1.25em);
	line-height:95%;
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}

p.Normah140, li.Normah140, div.Normah140{
	margin:6px 0px 6px 0px;
	line-height:1.3em;
	font-size: clamp(0.78em, 1.25vw, 1.25em);
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}

p.Normah100, li.Normah100, div.Normah100{
	font-size: clamp(0.7em, 1.15vw, 1.25em);
	color: #000000;
	line-height:90%;
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}
	
p.Normah110, li.Normah110, div.Normah110{
	margin:3px 0px 3px 0px;
	font-size: clamp(0.55em, 1.25vw, 1.25em);
	line-height:105%;
	letter-spacing: normal;
	font-family: serif;}
	
p.Normah140A, li.Normah140A, div.Normah140A{
	margin:3px 0px 3px 0px;
	font-size: clamp(0.78em, 1.115vw, 1.2em); /* taille du texte */
	line-height:120%;
    text-align:justify;
	font-family:Arial;}

p.Normah140120, li.Normah140120, div.Normah140120{
	margin:6px 0px 6px 0px;
	font-size: clamp(0.65em, 1.25vw, 1.25em);
	line-height:140%;
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}
	
p.Normah140121 {
	margin:6px 0px 6px 0px;
	font-size: clamp(0.78em, 1.25vw, 1.25em);
	color:#650000;
	line-height:140%;
    word-break: break-word;
	letter-spacing: normal;
	font-family:"Liberation Serif",serif;}
	
/*************** SPAN kentel geriadur ****************/	
span.gera2B{
	position:relative;
	color :#000F5F;
	left:2vw;
}

span.gera10{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:10vw;
}

span.gera16{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:16vw;
}
/***********nouveau novembre 2025********************/
span.gera16N{
	position:absolute;
	color :#650000;
	left:clamp(16vw, 18vw, 21vw);
}
/******************************/
span.gera18{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:18vw;
}
span.gera18N{
	position:absolute;
	color :#650000;
	left:clamp(18vw, 21vw, 24vw);
}


span.gera22{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:22vw;
}

span.gera22N{
	position:absolute;
	color :#650000;
	left:clamp(22vw, 24vw, 26vw);
}

span.gera26{
	position:absolute;
	margin:0px 0px 0px 75px;
	color :#650000;
	font-style: italic;
	left:26vw;
}

span.gera26N{
	position:absolute;
	color :#650000;
	left: clamp(26vw, 29vw,32vw);
}


span.gera30{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:30vw;
}

span.gera36{
	position:absolute;
		margin:0px 0px 0px 75px;
	color :#650000;
	font-style: italic;
	left:36.5vw;
}

span.gera36N{
	position:absolute;
	color :#650000;
	left:clamp(36vw, 39vw, 42vw);
}

span.gera42M{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:42vw;
}

span.gera46{
	position:absolute;
	color :#650000;
	font-style: italic;
	left:46vw;
}

span.gera46N{
	position:absolute;
	color :#650000;
	left:clamp(46vw, 49vw, 52vw);
}

span.gera46NB{
	position:absolute;
	color :#000F5F;
	left:clamp(46vw, 49vw, 52vw);
}

span.gera47{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:48vw;
}
/***********nouveau novembre 2025********************/
span.gera50{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:clamp(50vw, 53vw, 56vw);
}
span.gera50N{
	position:absolute;
	color :#650000;
	left:clamp(50vw, 53vw, 56vw);
}

span.gera50B{
	position:absolute;
	color :#000F5F;
	left:clamp(50vw, 53vw, 56vw);
}
/*****************************/
span.gera52{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:52vw;
}
span.gera52N{
	position:absolute;
	color :#650000;
	left:52vw;
}

span.gera54{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:54vw;
}

span.gera56{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:56vw;
}
/***********nouveau novembre 2025********************/
span.gera56N{
	position:absolute;
	color :#650000;
	left:56vw;
}

span.gera56B{
	position:absolute;
	color :#000F5F;
	left:clamp(56vw, 59vw, 62vw);
}



/******************************/
span.gera58{
	position:absolute;
	color :#650000;
	left:58vw;
}

span.gera60{
	position:absolute;
	font-style: italic;
	color :#650000;
	left:clamp(60vw, 63vw, 66vw);
}
/***********nouveau novembre 2025********************/
span.gera66N{
	position:absolute;
	left:clamp(66vw, 69vw, 72vw);
	color :#650000;
}

span.gera66B{
	position:absolute;
	left:clamp(66vw, 69vw, 72vw);
	color :#000F5F;
}

span.gera68N{
	position:absolute;
	left:clamp(68vw, 71vw, 71vw);
	color :#650000;
}

/******************************/
span.content::before{
	content:"\0000A0\0000A0\0027A3\0000A0\0000A0\0000A0"
	}

span.gera62{
	position:absolute;
	color :#650000;
	left:62vw;
}
/******** SPAN ABSOLUTE kentel brezhoneg bleu *********/	

span.gera10B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:10vw;
}

span.gera12B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:12vw;
}

span.gera14B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:14vw;
}


span.gera16B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:16vw;
}

span.gera18B{
	position:absolute;
	color :#000F5F;
	left:18vw;
}

span.gera28{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:26vw;
}

span.gera38{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:36vw;
}

span.gera38BN{
	position:absolute;
	color :#000F5F;
	left:38vw;
}

span.gera42{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:42vw;
}

span.gera47B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:47vw;
}

span.gera48{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:48vw;
}

span.gera48BN{
	position:absolute;
	color :#000F5F;
	left:48vw;
}

span.gera49B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:49vw;
}

span.gera51B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:51vw;
}

span.gera55B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:55vw;
}

span.gera57B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:57vw;
}

span.gera59B{
	position:absolute;
	font-style: italic;
	color :#000F5F;
	left:59vw;
}


/*****************SPAN RELATIVE KENTEL BLEU******************/

span.gerr2B{
	position:relative;
	font-style: italic;
	color :#000F5F;
	left:2vw;
}

/*****************SPAN Exposant******************/
span.expo {
		font-size: 0.6em;
		color : red;
		vertical-align: top;
		font-weight:1000;
}

sup {
	font-size: 0.6em;
   	vertical-align: super;
	font-weight:400;
}

/*positionne la premiere photo */

p.Entetefoto{
	margin:0.25vw 0px 0.25vw 0px;
	font-size: 1em;
    word-break: break-word;
	letter-spacing: normal;
	font-family:Liberation;}
/***********************************************/

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.65em, 1vw, 1em); /* 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.65em, 1vw, 1em); /* 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 a.selaouit{ 
color: black; /* couleur du texte */
background: #FFFF00; /* couleur de fond */
font-family: Futura; /* police d'écriture */
font-size: clamp(0.7em, 1.12vw, 1em); /* taille du texte */
transition: .5s; /* temps de transition lors du hover : une demi seconde */
}
nav a.selaouit:hover{
background: #f43c80; /* couleur de fond */
}

 /* DEBUT HEADER */
header {
 /*background-color: #fff;*/
inset: 0 0 auto 0;
padding-bottom: 1px;
padding-top: 1px;
position: sticky;
z-index: 11;
}
/***********nouveau novembre 2025********************/
#header_container {
  margin-left: auto;
  margin-right: auto;
}

 /* FIN HEADER CONTAINER*/

 /* AUDIO */
 /***********nouveau novembre 2025********************/
figure {
margin: -0.6em 0px 0.6em 0px;
}

figcaption {
    margin: -0.6em 0px 0.6em 0px;
}
/*****************************/
 /* VIDEO */
video {
  position: relative;
  inset: 0;
  margin: auto;
  max-width: 50%;
  max-height: 50%;
  user-select: none;
  -moz-user-focus: normal;
}

video:focus {
  outline-style: none;
}

.videocontrols {
  writing-mode: horizontal-tb;
  width: 50%;
  height: 50%;
  display: inline-block;
  overflow: hidden;
  direction: ltr;
  user-select: none;
  text-align: left;
  list-style-image: none !important;
  font: sans-serif !important;
  text-decoration: none !important;
  white-space: normal !important;
}

.Player {
  width: 50%;
  height: 20%;
  display: block;
}

 /* GAUCHE DROITE */
section {
box-sizing: border-box;
border: 2px solid black;
width: 100%;
float: left;
}

#gauche {
width: 50%;
margin:-1.5vw 0 0vw 0;
line-height: 0.95;	
float:left;
}
#droite {
width: 50%;
margin:-1.5vw 0 0vw 0;
line-height: 0.95;	
float:right;
}

/***********nouveau novembre 2025*****(oulpan)***************/
#gauchoul {
width: 47vw;
margin:-1vw 0 0vw 0;
line-height: 0.95;	
float:left;
padding-bottom: 1px;
}
#droitoul {
width: 47vw;
margin:-1vw 0 0vw 0;
line-height: 0.95;	
float:right;
padding-bottom: 1px;
}
/******************************/

#left {
width: 49%;
background:#FFF8ED;
float:left;
}

#right {
width: 49%;
position:relative;
background:#FFF8ED;
float:right;
}

#tableleft {
width: 49%;
background:#FFFFF;
float:left;
}

#tableright {
width: 49%;
position:relative;
background:#FFFFF;
float:right;
}

/* overrides decoration from previous rule for hovered links */

h1{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.75em, 1.30vw, 1.3em);
color: #334d55;
padding: 10px 0px 0px 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.7em, 1.25vw, 1.25em);
color: #006699;
padding: 5px 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.7em, 1.2vw, 1.2em); /* taille du texte */
color: #334d55;
clear: both;
padding: 1px 0px;
}

h4{
font-family: Verdana, sans-serif;
font-size: clamp(0.7em, 1.15vw, 1.15em);
line-height:75%;
font-weight: 599;
color: #000022;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: clamp(0.65em, 1.1vw, 1.1em); /* taille du texte */
line-height:100%;
font-weight: 100;
color: #334d55;
}

h6{
font-family: Verdana,Arial,sans-serif;
font-size: 92%;
line-height:10%;
font-weight: 100;
color: #334d55;
}

h7{
font-family: Verdana,Arial,sans-serif;
font-size: 90%;
font-weight: 600;
color: #334d55;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}

hr{
margin: unset;
border:2px ridge darkgrey;
z-index: 1;
width: 90%;
}

/************** Tableaux I**************/
/************** Kentel, Oulpan etc...**************/

table {
 border-collapse: separate;
 border-spacing: 1px 1px;
 width: 100%;
 border: solid grey 1px;}
 
table.largeur30V{width:30vw;}
table.largeur35V{width:35vw;}
table.largeur40V{width:40vw;}
table.largeur45V{width:45vw;}
table.largeur50V{width:50vw;}
table.largeur55V{width:55vw;}
table.largeur60V{width:60vw;}
table.largeur65V{width:65vw;}
table.largeur70V{width:79vw;}
table.largeur90V{width:90vw;}

tr,th {
font-size: clamp(0.7em, 1.125vw, 1.125em);
font-family: arial;
vertical-align:bottom;
color:black;}

td { 
border: 1px solid grey;
font-size: clamp(0.715em, 1.25vw, 1.125em);
text-indent: 2px;}

.verb1 {
vertical-align:bottom;
width: 85%;
color:black;}


.verb2 {
vertical-align:bottom;
width: 50%;
color:black;}

.verb3 {
vertical-align:bottom;
width: 33%;
color:black;}

.verb4 {
vertical-align:bottom;
width: 25%;
color:black;}

.verb5 {
vertical-align:bottom;
width: 20%;
color:black;}

.verb5C {
vertical-align:bottom;
width: 20%;
color:black;
text-align: center;
}

.verb6 {
vertical-align:bottom;
width: 16.66%;
color:black;}

.verb6C {
vertical-align:bottom;
width: 16.66%;
color:black;
text-align: center;}

.verb7 {
vertical-align:bottom;
width: 14.30%;
color:black;}

.verb8 {
vertical-align:bottom;
width: 12.50%;
color:black;}

.verb9 {
vertical-align:bottom;
width: 11.10%;
color:black;}

.verb2car {
vertical-align:bottom;
width: 5%;
color:black;}

.verb3car {
vertical-align:bottom;
width: 7.5%;
color:black;}

.choari { 
font-size: clamp(0.78em, 1.12vw, 1em);
width: 48%;
vertical-align: middle;
word-spacing: -0.5px;
}

/************** Tableaux  Maree 2023 + StQuay 2024  + maree.htm**************/
.largeur33 {
 width:3.3vw;
 text-align: center;}

.largeur33b { 
 width:3.3vw;
 text-align: center;
 font-weight:600;}
 
 .largeur33c { 
 width:3.3vw;
 text-align: center;
 background-color:#e6e6a9;} 
 
 .largeur33bc { 
 width:3.3vw;
 text-align: center;
 background-color:#dfcebf;
 font-weight:600;}

 .largeur150 { 
 width:15%;
 text-align: justify;}
 
  .largeur150C { 
 width:15%;
 background-color:#e6e6a9;
 text-align: justify;}

/************** Tableaux II Class tb  **************/
table.tb {
border-collapse: separate;
width:100%;
border-spacing: 1px 1px;}

.tb th, .tb td {
border: 1px solid grey;
font-size: clamp(0.77em, 1.12vw, 1.15em);
font-family: arial,sans-serif;
text-align:center;
text-indent: 0.25vw;
}

.tb th { background: #3630a3; color: white; text-align:left;}

.tcell {
width:32vw;
background: #dde2f2;}

.tcell6 {
width:6vw;
background: #dde2f2;}

/************** Tableaux III  class 0 1 2 3 4 **************/
#table0 {  border-collapse: Separate;
	border-spacing: 1px 1px;
	border: solid grey 2px  ; }



#td0 { border: 1px solid silver;
    font-family: arial,sans-serif;
    font-size: 88%;
    color: #334d55;
    text-align: center;
}

#table1 {
border-collapse: collapse;
table-layout:fixed;
width:529pt;
}

#table2 {
border-collapse: collapse;
width:60vw;
}

#table3 {
border-collapse: collapse;
border: 0px solid silver;
width:47vw;
}

#table4 {
border-collapse: collapse;
border: 0px solid silver;
width:25vw;
}

#calibri  {
font-size: clamp(0.70em, 1.1vw, 1.15em);
text-align: center;
vertical-align: middle;
font-family:Calibri, sans-serif;}

#calibrileft  {
font-size: clamp(0.70em, 1.2vw, 1.15em);
text-align: left;
vertical-align: middle;
padding: 0px 0px 0px 4px;
font-family:Calibri, sans-serif;}

#calibriright {
font-size: clamp(0.70em, 1.2vw, 1.15em);
text-align: right;
vertical-align: middle;
padding: 0px 4px 0px 0px;
font-family:Calibri, sans-serif;}

.Font700 {font-weight:700;}
.BgndGris { background:#D8E4BC;}
.BgndVert { background:#B0F26E;}

/************** Texte Yves **************/
.YVTR {
color: grey;
font-size: clamp(0.68em, 1.18vw, 1em);
text-align: left;
}

.Yves {
padding: 1px 3px 1px 3px;
color: #006699;
font-size: clamp(0.725em, 1.125vw, 1.125em);
text-align: center;
vertical-align: middle;
}

.Yves1 {
padding: 1px 3px 1px 3px;
color: #000000;
font-size: clamp(0.75em, 1.12vw, 1em);
text-align: left;
vertical-align: middle;
}
.Yves2 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.7em, 1.12vw, 1em);
text-align: center;
}
.Yves3 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.7em, 1.12vw, 1em);
text-align: center;
background-color: #FFCC99;
background-repeat: repeat;
background-position: left;
}
.Yves4 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.75em, 1.12vw, 1em);
background-color: #FFCC66;
background-repeat: repeat;
background-position: left;
}
.Yves5 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.75em, 1.12vw, 1em);
text-align: center;
background-color: #FF9933;
background-repeat: repeat;
background-position: left;
}
.Yves6 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.75em, 1.12vw, 1em);
text-align: center;
background-color: #FFCC66;
background-repeat: repeat;
background-position: left;
padding: 0px 0px 0px 6px;
}
.Yves75 {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(0.7em, 1.12vw, 1em);
text-align: center;
vertical-align: middle;
color: #006699;
padding: 0px 0px 0px 0px;
background-color: #FFFFF0;
background-repeat: repeat;
background-position: left;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#portcss{
	font-size: 95%;
	padding: 5px 0px 0px 0px;
	width: 99%;
	position:relative
}

#content{
margin: unset;
width: 58%;
float: left;
padding: 1% 1% 1% 1%;
}

#encadre {
border: solid 1px;
padding:0px 1px 0px 4px;
margin-left:1vw;
margin-right:30vw;
}

#pagelivre {
width: 90%;
background:#FFFF;
text-align:justify;
font-size: 100%;
font-family:"Liberation Serif","serif";
margin:auto auto;
position:relative;
}

#pagearticle {
width: 60vw;
background:#FFFF;
font-family:"Liberation Serif","serif";
margin-left:0.25vw;
position:relative;
}

/*************** #pageName styles **************/
#pageName{
padding: 7px 0px 7px 0px;
}
/************* afficher cacher styles **************/


/***********nouveau novembre 2025********************/
#d001, #d003, #d005, #d007, #d009,
#d011, #d013, #d015, #d017, #d019, 
#d021, #d023, #d025, #d027, #d029, 
#d031, #d033, #d035, #d037, #d039, 
#d041, #d043, #d045, #d047, #d049, 
#d051, #d053, #d055, #d057, #d059
{
width: 94vw;
position:relative;
display:none;
z-index : 5;
}
/******************************/

#d1, #d3, #d5, #d7, #d9, #d11, #d13, #d15, #d17, #d19, #d21, #d23, #d25, 
#d27, #d29, #d31, #d33, #d35, #d37, #d39, #d41, #d43, #d45, #d47, #d49
{
background-color: #FFFF;
width: 48%;
font-family:"Liberation Serif","serif";
padding: 1px 3px 1px 3px;
margin:right;
box-shadow: 0 0 1px 1px #333;
position:relative;
display:none;
z-index : 5;
}

#listedemots
{
width: 79vw;
margin:auto;
position:relative;
display:block;
z-index : 5;
}

#listmots
{
width: 85vw;
position:relative;
display:block;
z-index : 5;
}

#doulpanger
{
width: 79vw;
margin:auto;
position:relative;
display:none;
z-index : 5;
}

/*******TEST RESPONT KWIZZ**NOV 2025*********/
#dr01, #dr02, #dr03, #dr04, 
#dr05, #dr06, #dr07, #dr08, 
#dr09, #dr10, #dr11, #dr12,
#dr13, #dr14, #dr15, #dr16,
#dr17, #dr18, #dr19, #dr20,
#dr21, #dr22, #dr23, #dr24,
#dr25, #dr26, #dr27, #dr28,
#dr29, #dr30, #dr31, #dr32,
#dr33, #dr34, #dr35, #dr36,
#dr37, #dr38, #dr39, #dr40
{
background-color: coral;
color: white;
font-family:"Arial";
padding: 2px;
position:relative;
display:none;
z-index : 5;
}
/******************/

#d0, #d02, #d2, #d4, #d6, #d8, #d10, #d12, #d14, #d16, #d18, #d20, #d22, #d24, 
#d26, #d28, #d30, #d32, #d34, #d36, #d38, #d40, #d42, #d44, #d46, #d48
{
background-color: #FFFF;
width: auto;
font-family:"Liberation Serif","serif";
padding: 1px 3px 1px 3px;
margin:right;
box-shadow: 0 0 0px 0px #333;
position:relative;
display:none;
z-index : 5;
}

#d77{
background-color: #FFFF;
width: 42vw;
font-family:"Liberation Serif","serif";
padding: 1px 3px 1px 3px;
box-shadow: 0 0 0px 0px #333;
position:relative;
display:none;
z-index : 5;
}

#dch14, #dch15, #dch16, #dch17, #dch19{
background-color: #FFFFFF;
width: auto;
font-family:"Liberation";
padding: 1px 3px 1px 3px;
margin:right;
position:relative;
display:none;
z-index : 5;
}

#dch99, #dch9A{
font-family:"Liberation Serif","serif";
width: auto;
padding: 1px 3px 1px 3px;
position:relative;
display:none;
z-index : 5;
}

#dch96{
background-color: #FFFFFF;
width: auto;
font-family:"Liberation Serif","serif";
padding: 1px 3px 1px 3px;
margin:auto;
display:none;
z-index : 5;
}

#dch98{
background-color: #FFFFFF;
width: auto;
font-family:"Liberation Serif","serif";
padding: 1px 3px 1px 3px;
margin:auto;
display:none;
z-index : 5;
}

/************** .feature styles ***************/
.feature{
	padding: 0px 0px 0px 5px;
	font-size: 95%;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}

/*Right column*/
#Right-Group
{
	width:19.5vw;
	float:left;
	overflow:hidden;
	padding-bottom: 1px;
	padding-top: 1px;
	top: 1px;
	position: absolute;
	z-index: 1;
	border-left-style: none;
	margin-left:810px;
	margin-right: 8px;
}

#Right-Group .FeatureArticleRight.first
{
    height:308px;
}

.FeatureArticleRight
{
	width:252px;
	border:1px solid #ccc;
	margin-bottom:30px;
	height:109px;
	overflow: visible;
	z-index: auto;
}

.FeatureArticleSmall h1
{
    color:#fff;
    background: #2E57A9;
    background: -moz-linear-gradient(#103996, #476FB8);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#103996), to(#476FB8));
    background: linear-gradient(#103996, #476FB8);
    -pie-background: linear-gradient(#103996, #476FB8);
}

.FeatureArticleRight h1
{
    color:#fff;
    background: #3AB5B7;
    background: -moz-linear-gradient(#259092, #49CED1);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#259092), to(#49CED1));
    background: linear-gradient(#259092, #49CED1);
    -pie-background: linear-gradient(#259092, #49CED1);
}

.FeatureArticleRight h1 
{
    color: #FFF;
    background: linear-gradient(#259092, #49CED1) repeat scroll 0% 0% transparent;
}

.FeatureArticleRight h1
{
    margin: 0;
    display: block;
    font-size: 1em;
    font-weight: bold;   
    height: 24px;
    padding: 11px 15px 0 15px;
    color: white;
    line-height: 1em;
}

.FeatureArticleRight p
{
    padding:20px;
    font-size:70%;
    margin: 0px;
}

.FeatureArticleRight p a
{
    color:#00355F;
    font-weight:bold;
}

.FeatureArticleRight img
{    
    margin:10px;
    margin-bottom:0px;
    width: 189px;
}

/* adjust margins to change separation between the feature image and text flowing around it */

#Center-Group {
	float:left;
	width: 26.6vw;
	*overflow: hidden;/*IE7*/
	position: relative;
	z-index: auto;
	left: 12px;
}
.FeatureArticleCenter
{
    width:348px;  
    border:1px solid #CCCCCC;
    margin-top:4px;
    margin-bottom:0px;
    height:285px;
}
.FeatureArticleCenter h1
{
    color:#fff;
    background: #2E57A9;
    background: -moz-linear-gradient(#103996, #476FB8);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#103996), to(#476FB8));
    background: linear-gradient(#103996, #476FB8);
    -pie-background: linear-gradient(#103996, #476FB8);
}
.FeatureArticleCenter h1 
{
    color: #FFF;
    background: linear-gradient(#103996, #476FB8) repeat scroll 0% 0% transparent;
}
.FeatureArticleCenter h1
{
    margin: 0;
    display: block;
    font-size: 1em;
    font-weight: bold;   
    height: 24px;
    padding: 11px 15px 0 15px;
    color: white;
    line-height: 1em;
}
.FeatureArticleCenter p
{
    padding:20px;
    font-size:70%;
    margin: 0px;
}

.FeatureArticleCenter p a
{
    color:#00355F;
    font-weight:bold;
}

/*Left column*/
#Left-Column {
	float: left;
	display: inline;
	width: 414px;
}

.FeatureArticleLeft
{
	width:408px;
	border:1px solid #FFFFFF;
	margin-top:4px;
	margin-bottom:0px;
	height:295px;
	margin-right: 1px;
}

#Left-Group {
	margin: 0 0 0 5px;
	position: relative;
	float:left;
	padding-top: 0px;
	width: 32vw;
	height: 355px;
	overflow: hidden;/*IE7*/
	margin-left: 6px;
}

.FeatureArticleLeft h1
{
    color:#fff;
    background: #62A1EA;
    background: -moz-linear-gradient(#62A1EA, #9BC4F2);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#62A1EA), to(#9BC4F2));
    background: linear-gradient(#62A1EA, #9BC4F2);
    -pie-background: linear-gradient(#62A1EA, #9BC4F2);
}

.FeatureArticleLeft h1 
{
    color: #FFF;
    background: linear-gradient(#62A1EA, #9BC4F2) repeat scroll 0% 0% transparent;
}

.FeatureArticleLeft h1
{
    margin: 0;
    display: block;
    font-size: 1em;
    font-weight: bold;   
    height: 24px;
    padding: 11px 15px 0 15px;
    color: white;
    line-height: 1em;
}

ul{list-style-type: square;}

ul ul{list-style-type: disc;}

ul ul ul{list-style-type: none;}

/************** aside ***************/
aside {
  width: 20%;
  float: right;
  background: -moz-linear-gradient(#62A1EA, #9BC4F2);
  border-radius: 6px;
  font-style: italic;
}

aside li{
padding-bottom:0.65em;}

aside ul{
margin:1em 0.25em 0.75em -0.75em;
}

/************** aside test ***************/
#testo {
  width: 66%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  background:white;
  box-shadow: inset 5px 0 25px -5px #29627e;
  font-style: italic;
  color: #29627e;
}
/************** fin aside test ***************/
aside.fotoleft{
  width: 40%;
  float: left;
  background:none;
  border-radius: 2px;
  font-style: normal;
}

#fotoright{
  width: 30%;
  float: right;
  background:none;
  border-radius: 2px;
  font-style: normal;
}

#expo{
  width: 25%;
  color: white;
  background: -moz-linear-gradient(#247853, #EAD2A5);
}

#texto{
  width: 21.5%;
  background: -moz-linear-gradient(#729DEE, #A5E7EE82);
}

#promo{
width: 10%;
  background: -moz-linear-gradient(#F2CC59, #fbce2052);
}

#foto{
  width: 35%;
  float: right;
  background:none;
  border-radius: 10px;
  font-style: normal;
}

#logo{
  width: 15%;
  float: right;
  background:none;
}

/************* footer & #siteInfo styles ***************/

footer {
font-family:"Futura";
justify-content: center;
font-size: clamp(0.5em, 1.12vw, 1em);
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 100%;
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.7em, 1.12vw, 1em);
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:96%;
margin:1em auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_img {
width:10%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_copy {
width:29%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_count {
width:30%;
font-size: clamp(0.6em, 0.8vw, 0.8em);
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_legal {
width:40%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_email {
width:29%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_pays {
width:23%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

.footer_fich {
width:17%;
margin:0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}

input[type="email"]{
font-size: clamp(0.7em, 1vw, 1em);
width:100%;
height:1.5vw;
text-align:center;
border:none;
}


input[type="submit"]{
font-size: clamp(0.7em, 1vw, 1em);
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;
}

#siteInfo{
	position:relative;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #0b4055;
	padding: 0px 0px 0px 0px;
	width: 33%;
}

#siteInfo2{
	clear: both;
	border: 0px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 6px 0px 6px 0px;
	width: 90%;
}

#siteInfo_img{
	padding: 1px 0px 1px 0px;
	vertical-align: middle;
}

#siteInfo2_img{
display: flex;
justify-content: center;
align-items: center;
}

#siteInfo3_img{
display: flex;
justify-content: left;
align-items: left;
}

/************** image **************/
img {
  border-radius: 4px;
  max-width:100%;
  max-height:100%;
}

/************** Bouton **************/
/***.btn : first-child {}***/
.btn {
border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
border-top-color: rgba(0,0,0,0.15);
border-right-color:#000;
border-bottom-color: rgba(0,0,0,0.25);
border-left-color:#000;
display: inline;
padding-top: 1px;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
font-size: clamp(0.7em, 1.12vw, 1em);
color: #333;
text-align: center;
text-shadow: 0px 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #7996C3;
background-image: linear-gradient(to bottom,#FFF,#5F84B9);
background-repeat: repeat-x;
border-width: 1px;
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
border-style: solid;
/***moz-border top color : none;
moz-border right color : none;
moz-border bottom color: none;
moz-border left color: none;****/
border-image: none;
border-radius: 4px;
box-shadow: 0px 1px 0px rgba (255,255,255,0.2) inset 0px 1px 2px rgba (0,0,0,0.05);
}

/************** Texte Yves **************/
/************** Style **************/

.Style2 {font-family: Arial;font-size: 10px;color:#3333FF;}
.Style3 {font-family: Arial;font-size: 10px;color: #333366;}
.Style4 {font-size: x-small;color: #FFFFFF;}
.Style5 {font-size: smaller;}

 /* BUTTON */
.styled1{
    margin : 1px 1px 1px 13px;
    border: 0;
    line-height: 1.5;
    padding: 0 20px;
    font-size: clamp(0.65em, 1.10vw, 1.115em);
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 5px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled1:hover {
    background-color: rgba(0, 0, 0, 1);
}

.styled1:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled2{
    margin : 1px 1px 1px 13px;
    border: 0;
    line-height: 1.5;
    padding: 0 20px;
    font-size: clamp(0.65em, 1.10vw, 1.115em);
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 5px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled2:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.styled2:hover {
    background-color: rgba(0, 0, 0, 1);
}
/***********nouveau novembre 2025********************/
.styled3{
    margin : 0px 0px 0px 0px;
    font-size: clamp(0.6em, 1.15vw, 1.125em);
    text-align: center;
	padding: 0px 10px 2px 10px;
	border: 0;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 3px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled3:active {
    box-shadow: inset 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px rgba(0, 0, 0, 0.6);
}
.styled3:hover {
    background-color: rgba(0, 0, 0, 1);
}

.styled4{
    margin : 0px 0px 0px 0px;
    font-size: clamp(0.6em, 1.15vw, 1.125em);
    text-align: center;
	padding: 0px 10px 2px 10px;
	border: 0;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 3px;
    background-color: green;
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
.styled4:active {
    box-shadow: inset 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px rgba(0, 0, 0, 0.6);
}
.styled4:hover {
    background-color: coral;
}

.styled5{
    margin : 0px 0px 0px 0px;
    font-size: clamp(0.6em, 1.15vw, 1.125em);
    text-align: center;
	padding: 0px 10px 2px 10px;
	border: 0;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 3px;
    background-color: coral;
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
.styled5:active {
    box-shadow: inset 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px rgba(0, 0, 0, 0.6);
}
.styled5:hover {
    background-color: coral;
}





/***********TEST NOVEMBRE 2025********************/
.pajes {
	width:90%;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
}

.pajes div{
	background-color: maroon;
	display: inline-block;
	font-size: clamp(0.5em, 1vw, 1.125em);
	width:1.3vw;
	margin-left: 15px;
	text-align: center;
	padding: 6px;
	text-decoration:none;
	cursor:pointer;
	color:white;
	border-radius:50%;
}