de la liste des pages dans le fil d'ariane */
.lien, .www {border:1px dashed #3399ff;padding:0 4px 1px 4px;margin:0 1px;text-decoration:none;border-radius:6px;font-size:.9em;display:inline-block;line-height:1.1em;position:relative;}
.www::before {content:'www';position:absolute;font-size:.7em;top:-2px;left:5px;padding:0 2px;background-color:#ffffec;line-height:.1em;vertical-align:top;height:4px;}
.reserve {text-decoration:none;border-radius:9px;font-size:.9em;padding:1px 6px 1px 4px;margin:0 1px;white-space:nowrap;display:inline-block;line-height:1.1em;background-color:var(--color1h);color:#fff;cursor:pointer;}
.reserve:visited {color:#fff;}
.reserve:hover {color:#fff;text-decoration:none;background-color:var(--color1b);}
.reserve::before {content:'\27A0';padding-right:3px;}
.reserveMulti {border:1px dashed #3399ff;border-radius:6px;padding:0 0 1px 4px;margin:0 1px;white-space:nowrap;display:inline-block;line-height:1.1em;position:relative;background-color:#e6fbff;}
.reserveMulti .reserve {animation-duration:1.5s;animation-name:opa01;}
.clampOuv {
-webkit-line-clamp: inherit;
max-height: 100vh;
}
.synFluxMois {display:flex;}
.synFluxMois.synFluxMoisGrand {container-type:inline-size;/* utile pour cqw */}
.synFluxMois div {
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.synFluxMois.synFluxMoisGrand div {font-size:min(1em,3.2cqw);}
.illuBande {
text-align: center;
font-size: 0;
clear: both;
display: flex;
gap: .6vw;
margin: 20px 0;
}
.illuBande > div {
width: 100%;
border-radius: 1vw;
overflow: hidden;
}
.illuBande > div img {
height: 100%;
width: 100%;
cursor: zoom-in;
}
.illuBande + .synthese {
margin-top: 30px;
}
nav ul, nav ol {line-height:1.2;margin-bottom:.75em;}
/* vollet de navigation verticale gauche */
#navv {
color: #5e5e5e;
display: none;
position: absolute;
top: 0;
height: 100%;
}
#navv.boxOuvert {
display: block;
position: fixed;
top: calc(2vw + 29px);
right: 4vw;
height: 0; /* évite un léger scroll de la page lorsque l'on ouvre le navv */
z-index: 1000;
}
#navv nav {
position: sticky;
top: 105px;
max-height: calc(100vh - 120px);
width: 225px;
overflow-y: auto;
overflow-x: hidden;
line-height: 1.3;
font-size: .85em;
border-radius: 4px;
margin-top: 2px;
margin-left: -260px;
transition: .3s all;
padding: 5px;
}
#navv nav hr {height:5px;background-color:transparent;position:relative;margin:0;width:100%;}
#navv nav .n_t {font-weight:normal;font-size:1.2em;text-transform:uppercase;color:#7f7f7f;}
#navv nav .n_t, #navv nav .n_r {margin:1px 0 0;padding:0;border:0;}
#navv nav .n_r[onclick] {cursor:pointer;}
#navv nav > div {padding:7px 5px 0 5px;margin:5px 0;font-weight:bold;width:100%;}
#navv nav > div:not([class])::before {
content: '';
display: block;
background-color: #cde7f2;
background: linear-gradient(135deg, #cbe7ee, transparent 75%);
position: absolute;
z-index: -1;
border-radius: 50%;
margin-top: -0.3em;
margin-left: -0.4em;
width: 1.7em;
height: 1.7em;
}
#navv nav:has(div > div) > div, #navv nav hr + div {border-top:3px solid var(--color1a);}
#navv:not(.boxOuvert) nav:has(div > div) > div:not([class]) {margin-bottom:15px;}
#navv nav > div div {font-size:.9em;}
#navv nav > div div {margin:0;padding:3px 0 2px 11px;font-weight:normal;}
#navv nav > div > div:first-of-type, #navv nav > div > a > div:first-of-type {margin-top:3px;}
#navv nav > div > div div:first-of-type {margin-top:3px;}
#navv nav > div > div:last-of-type {margin-bottom:2px;}
#navv.boxOuvert nav {
position: relative;
top: 0;
width: 92vw;
max-width: 400px;
border: 6px solid #fff;
font-size: 1.4em;
margin: 0;
box-shadow: 0 0 200px 30px #000;
max-height: 80vh;
padding: 15px;
background-color: #fff;
}
#navv.boxOuvert nav > div {
width: 100%;
}
html.cacheBM #navv nav {
top: 15px;
max-height: calc(100vh - 32px);
}
html.cacheBM #navv.boxOuvert nav {
top: 0;
max-height: 80vh;
}
/* *** */
/* *** class responsives **** */
.w25p {width:100%;}
.w450 {width:50%;}
.w400 {width:100%;}
.w300 {width:300px;}
@media (pointer:fine) {
#menuflo {padding-top:50px;}
}
/* Barres de défilement */
/* barre 1 */
.barDef { /* Firefox */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.barDef:hover { /* Firefox */
scrollbar-color: #bdc8d2 #eee;
}
.barDef::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #eee0;
}
.barDef::-webkit-scrollbar-track {
background-color: #eee3;
box-shadow: inset 0 0 1px 1px #bbb;
border-radius: 6px;
}
.barDef::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 12px #333;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0);
}
.barDef::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 12px #000;
}
.barDef::-webkit-scrollbar-button {
display:none;
}
@media screen and (max-width: 989.5px) {
.barDef.barEtrMob::-webkit-scrollbar {
width: 7px;
height: 7px;
}
}
/* barre 2 */
.barDef2 { /* Firefox */
/* scrollbar-width: thin; */
scrollbar-color: transparent transparent;
}
.barDef2:hover { /* Firefox */
scrollbar-color: #bdc8d2 #eee;
}
.barDef2::-webkit-scrollbar {
width:15px;
padding:10px;
margin:10px;
}
.barDef2::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,.2);
border-radius: 10px;
}
.barDef2::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px #1d1d1d;
border: 3px solid rgba(0, 0, 0, 0);
}
.barDef2::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 20px rgba(0,0,0,1);
}
.barDef2::-webkit-scrollbar-button {
display:none;
}
/* barre 3 */
.barDef3 { /* Firefox */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.barDef3:hover { /* Firefox */
scrollbar-color: #bdc8d2 #eee;
}
.barDef3::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #eee0;
}
.barDef3::-webkit-scrollbar-track {
background-color: #adadad33;
border-radius: 6px;
}
.barDef3::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 12px #999;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0);
}
.barDef3::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 12px #484848;
}
.barDef3::-webkit-scrollbar-button {
display:none;
}
/* commun */
.barDefHid::-webkit-scrollbar, .barDefHid::-webkit-scrollbar-track, .barDefHid::-webkit-scrollbar-thumb {visibility:hidden;}
.barDefHid:hover::-webkit-scrollbar, .barDefHid:hover::-webkit-scrollbar-track, .barDefHid:hover::-webkit-scrollbar-thumb {visibility:visible;}
@media (pointer:coarse) {
.barDef:not(.barVisTac)::-webkit-scrollbar, .barDef2:not(.barVisTac)::-webkit-scrollbar, .barDef3:not(.barVisTac)::-webkit-scrollbar {display:none;}
}
/* *** */
/* *** Miniatures Guides *** */
.MiniaGuide {
text-align: left;
font-size: 1.35rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: calc(100% + 20px);
margin: -10px;
}
/* permet d'aligner à gauche la dernière ligne flex */
.MiniaGuide::after {
content: '';
flex: auto;
}
.MiniaGuide article {
width: calc(100% - 20px);
margin: 10px;
line-height: 1.3em;
overflow: hidden;
cursor: pointer;
}
.MiniaGuide .ouv {
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
/* ne pas modifier, car utile lorsque le titre est sur plusieurs lignes et permet un alignement du texte à coté de l'image */
justify-content: flex-end;
}
.MiniaGuide.coulAlt .ouv {
background-color: #efefef;
}
.MiniaGuide .ouv > div {
background-color: inherit;
height: 100px;
}
.MiniaGuide article .t {
padding: 0 4px 9px 9px;
width: auto;
position: relative;
}
.MiniaGuide .ouv .t {
background: inherit;
transition: all .5s;
color: #000;
height: 110px;
z-index: 1; /* important pour concervé l'effet de vollet sur les images "récits" */
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
}
.MiniaGuide .ouv .t {
height: auto;
max-height: 47px;
overflow: hidden;
transition: max-height .8s;
-webkit-mask-image: none;
line-height: 1.1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
padding-bottom: 0;
border-bottom: 0 solid transparent;
}
.MiniaGuide article h2, .MiniaGuide article h3, .MiniaGuide article h4 {
border: 0;
margin: 0;
padding: 6px 4px 6px 8px;
font-size: 1.3em;
line-height: 1.1;
color: #2b2b2b;
}
.MiniaGuide article h2 span, .MiniaGuide article h3 span, .MiniaGuide article h4 span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size: .71em;
font-weight: normal;
color: #000;
}
.MiniaGuide article.sansSTitre h2 span, .MiniaGuide article.sansSTitre h3 span, .MiniaGuide article.sansSTitre h4 span {
display: none;
}
.MiniaGuide article h2 span:nth-child(2), .MiniaGuide article h3 span:nth-child(2), .MiniaGuide article h4 span:nth-child(2) {
}
.MiniaGuide .tu {
border-radius: 6px;
border: 6px solid white;
background-color: #fff;
transition: box-shadow .3s;
}
.MiniaGuide .tu:hover, .MiniaGuide.contour .tu {
box-shadow: 0 0 9px #888;
}
.MiniaGuide .ouv a {
font-weight: bold;
z-index: 0; /* cas d'un titre sur 2 ligne et d'un texte qui superpose l'image */
}
.MiniaGuide .ouv:hover .t {
position: relative;
z-index: 1;
height: 350px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60px, rgba(255, 255, 255, 1) 90px, rgba(255, 255, 255, 0) 100%);
}
.MiniaGuide .ouv:not(.sansTexte):hover .t {
position: relative;
z-index: 1;
height: auto;
max-height: 250px;
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5px, rgba(0, 0, 0, 1) 100%);
-webkit-line-clamp: initial;
display: block; /* pour Firefox, à cause du line-clamp */
padding-bottom: 10px;
}
.MiniaGuide article > div > a > img {
width: 100%;
aspect-ratio: 1.838;
}
.MiniaGuide .ouv > div + a img {
transition: opacity .5s;
}
.MiniaGuide .b {
display: flex;
}
.MiniaGuide .b > * {
width: 20%;
padding: 5px 5px 7px;
text-align: center;
}
.MiniaGuide .b > *:hover {
background-color: var(--btn-hover-color);
}
.MiniaGuide .b > *:hover img {
filter: invert(1);
opacity: 1;
}
.MiniaGuide .b img {
height: 18px;
opacity: .7;
}
.MiniaGuide .b img[src="/images/i/svg/avion.svg"] {transform:scale(1.6);}
.MiniaGuide .ouv > div .b {
position: absolute;
text-transform: none;
bottom: -100px;
width: 100%;
z-index: 1;
font-size: .9em;
line-height: 1.5em;
transition: all .2s;
background-color: inherit;
}
.MiniaGuide .ouv > div:hover .b, .MiniaGuide .ouv:hover .b {
bottom: 0;
}
.MiniaGuide .ouv > div div.PlusLarge:hover {
left: 0;
width: 100%;
}
.MiniaGuide article > a > img {
width: 100%;
aspect-ratio: 1.5;
transition: opacity .5s;
}
/* Bloc sans sous-titre */
.MiniaGuide article.sansSTitre > div {height:84px;}
/* Bloc sans texte */
.MiniaGuide article > div {min-height:initial;}
.MiniaGuide article.sansTexte > div {height:auto;}
.MiniaGuide article.sansTexte > div .t {display:none;}
.MiniaGuide article.rech > div {margin:1px 0 .47em;background-color:whitesmoke;}
.MiniaGuide article.rech > div:last-child {margin:1px 0 0;}
.MiniaGuide article.rech a {display:block;border:1px solid #e1e1ff;padding:5px;}
.MiniaGuide article.rech a:hover {background-color:var(--color1);}
.MiniaGuide .tu.mappemonde h3, .MiniaGuide .tu.rech h3 {padding:6px;}
/* MiniaGuide type mspec */
.MiniaGuide.mspec {width:100%;margin:0;}
.MiniaGuide.mspec .tu.mappemonde > div > a > img {margin:10px 0 15px;}
/* */
/* MiniaGuide type sansBox */
.MiniaGuide.sansBox article {margin-bottom:30px;}
.MiniaGuide.sansBox article h2, .MiniaGuide.sansBox article h3 {color:#666;padding:0 0 8px 0;}
.MiniaGuide.sansBox article .t {padding:0;}
.MiniaGuide.sansBox article h2, .MiniaGuide.sansBox article h3, .MiniaGuide.sansBox article h4 {padding-top:3px;}
/* */
/* MiniaGuide type txtInt */
.MiniaGuide.txtInt {align-items:flex-start;}
.MiniaGuide.txtInt article > div h3 {
position: absolute;
z-index: 1;
width: 100%;
background-color: #0000001a;
color: #fff;
text-shadow: 0 0 3px #000, 0 0 5px #000;
backdrop-filter: blur(3px) brightness(85%);
-webkit-backdrop-filter: blur(3px) brightness(85%);
font-weight: normal;
}
.MiniaGuide.txtInt article h3 span {color:#eee;}
.MiniaGuide.txtInt article.rech h3, .MiniaGuide.txtInt article.mappemonde h3 {background-color:#5985b0;color:#fff;text-shadow:0 0 3px #000, 0 0 5px #000;font-weight:normal;}
.MiniaGuide.txtInt article.rech > div {margin:5px 0;background-color:#f6f6f6;}
.MiniaGuide.txtInt article.rech > div a {border:0;font-size:1.2em;font-weight:bold;font-family:var(--titre-font);}
.MiniaGuide.txtInt .tu.mappemonde > div > a > img {margin:10px 0 0;}
/* */
/* AFTER MOBILE - Miniatures Guides */
@media screen and (min-width: 480px) and (max-width: 639.9px) {
.MiniaGuide.coulAlt .ouv:nth-child(4n+2), .MiniaGuide.coulAlt .ouv:nth-child(4n+3) {background-color:#cdc6b7;}
}
@media screen and (min-width: 480px) {
.MiniaGuide article {width:calc(50% - 20px);}
.MiniaGuide article > a > img, .MiniaGuide article > div > a > img {width:342px;}
.MiniaGuide.txtInt article.rech > div a {font-size:1em;}
}
@media screen and (min-width: 640px) and (max-width: 960.9px) {
.MiniaGuide.coulAlt .ouv:nth-child(2n+2) {background-color:#cdc6b7;}
}
@media screen and (min-width: 640px) {
.MiniaGuide article {width:calc(33.33% - 20px);}
.MiniaGuide .ouv .t {-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60px, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) 100%);}
}
@media screen and (min-width: 960px) {
.MiniaGuide.mspec {width:calc(100% + 20px);margin:-10px;}
.MiniaGuide article {width:calc(25% - 20px);}
.MiniaGuide.coulAlt .ouv:nth-child(8n+2), .MiniaGuide.coulAlt .ouv:nth-child(8n+4), .MiniaGuide.coulAlt .ouv:nth-child(8n+5), .MiniaGuide.coulAlt .ouv:nth-child(8n+7) {background-color:#cdc6b7;color:#fff;}
}
@media screen and (min-width: 1600px) {
.MiniaGuide {font-size:1.45rem;}
}
@media (pointer:coarse) {
.MiniaGuide .ouv > div + a img {margin-bottom:48px;}
.MiniaGuide .ouv > div .b {bottom:0;}
.MiniaGuide .b > * {padding-top:14px;padding-bottom:16px;}
.MiniaGuide.mspec .tu.mappemonde > div > a > img {margin-bottom:55px;}
.MiniaGuide.txtInt .ouv > div .b {background-color:#f1f1f1;}
}
/* *** *** */
.btnPlus {
background-image: url(/images/i/svg/circle-plus.svg);
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
opacity: .4;
display: inline-block;
vertical-align: middle;
margin: 4px;
}
.hover:hover .btnPlus {opacity:.9;}
#BarreDeMenu #destiForm {display:none;}
#BarreDeMenu .preAvantRech > div {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
cursor: pointer;
}
.avantRech {z-index:1000;}
.avantRech #repDesti, .avantRech #repDestiFerme {display:block;}
.blocRech {
display: flex;
align-items: center;
position: relative;
}
.avantRech .blocRech {width:calc(100% - 45px);}
#reqDesti.wait {background-position:right .5em center;}
#BarreDeMenu input#reqDesti::placeholder {opacity:.8;}
.blocRech input {
width: 100%;
outline: none;
margin: auto;
border: 0 !important;
border-radius: 20px;
vertical-align: bottom;
padding: 5px 15px;
height: 33px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* IOS */
}
#BM212 ul li.clicLoupe #destiLoupe {display:none;}
#BarreDeMenu .clicLoupe #destiForm {display:flex;}
#BM212 ul li.clicLoupe {
width: 100%;
max-width: none;
position: absolute;
left: 0;
padding: 5px;
}
.focus1:focus, .bfocus1.boxFocus {
outline: none;
box-shadow: 0 0 1px 4px #a4d842;
}
@media screen and (min-width: 480px) {
.blocRech input {width:170px;}
.avantRech .blocRech {
width: fit-content;
margin: auto;
}
}
@media screen and (min-width: 640px) {
.blocRech input {
font-size: .85em;
height: 28px; /* IOS */
}
}
@media screen and (min-width: 990px) {
#BarreDeMenu #destiForm {display:flex;}
}
/* accordéon dynamique (avec ou sans
) */
/* si utilisation de
, mettre un
dans