.headin{position:relative;max-width:2200px; margin:0 auto}
.logo{position:relative;top:10px;left:40px;margin:0;padding:0;box-sizing:border-box;width:96px}
.marquebretagne {
z-index: 999;
position: absolute;
top: 150px;
right: 0;
left:initial;
width: 140px;
height: 56px;
background-image: url('skin/marque-bretagne.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.wrapper{position:absolute;top:0;right:0;}
.fix{position:fixed;margin:0;z-index:99999;top:25px;display:flex;gap:10px;right: calc(max(40px, (100% - 2200px) / 2));align-items: center;}
a.book-button {
display:block;
border: 0;border-radius:5px;
padding: .4em .8em;box-sizing:border-box;
background: var(--color02);
color:#fff;
font-size: 1.2em;
letter-spacing: .02em
}
a.book-button:hover, a.book-button focus, a.book-button active{background: var(--sauge);}
/* Burger */
.burger-icon {
width: 20px; height: 20px; /* taille du SVG */
fill: #fff; /* couleur du SVG */
}
/* État d'origine */
.burger-rect {
x: 0; /* coordonnée x */
rx: 0.2px; /* arrondi */
width: 100%; /* largeur */
height: 0.5px; /* épaisseur */
}
.burger-rect-1 {
y: 1px; /* coordonnée y */
}
.burger-rect-2 {
y: 3px; /* coordonnée y */
}
.burger-rect-3 {
y: 5px; /* coordonnée y */
}
/* État au clic (translation + opacity + rotation) */
[aria-expanded="true"] .burger-rect-1 { y: 3px; rotate: 45deg;}
[aria-expanded="true"] .burger-rect-2 { opacity: 0;}
[aria-expanded="true"] .burger-rect-3 { y: 3px; rotate: -45deg;}
/* Transitions seulement si acceptées */
@media (prefers-reduced-motion: no-preference) {
/* transition au retour */
.burger-rect {
transform-origin: center;
transition:
y 0.3s 0.3s,
opacity 0.3s,
rotate 0.3s;
}
/* transition à l'aller */
[aria-expanded="true"] .burger-rect {
transition:
y 0.3s,
opacity 0.3s,
rotate 0.3s 0.3s linear/*cubic-bezier(.55,-0.65,0,2.32)*/;
}
}
/* Styles bouton Burger */
.burger-button {
position:relative;
z-index:9999;
width:48px;
height:48px;
border: 0;margin:0;
padding: 0;
line-height: 0;
background: var(--color01);
border-radius:50%;
cursor: pointer;
}
.burger-button:hover{background: var(--sauge);}
/* Styles Navigation
.navigation {
margin-top: 1rem;
}
.navigation-link {
color: currentcolor;
}
*/
/* Focus lors de la navigation au clavier
.burger-button:focus-visible,
.navigation-link:focus-visible{
outline: 2px dashed hotpink;
outline-offset: 4px;
}*/
/* Appearance Mode */
:root {
color-scheme: light dark;
}
/* Styles SVG */
svg {
/* Par défaut les navigateurs masquent ce qui dépasse du Viewbox */
overflow: visible;
}
svg * {
/* Par défaut le référent pour transform-origin est l'ensemble du SVG (view-box) */
transform-box: fill-box;
}
.introhome{display:grid;grid-template-columns: 1fr 1fr;gap:80px; margin:30px auto}
.logo-diap{position:absolute; top:50%;left:50%;transform:translate(-50%,-45%);z-index:99;width:40%;max-width:640px;}
.logo-diap img{width:100%}
/* DIAPORAMA CSS */
@keyframes slideshow__fade {
0% { opacity: 0} /* Invisible au début et à la fin */
5.56% {opacity: 1} /* Apparition (environ 1s) */
33.33% {opacity: 1} /* Reste visible (pendant 6s) */
38.89% {opacity: 0} /* Disparition (environ 1s) */
100% {opacity: 0}
}
.diaporama {
position: relative;z-index:9;
width: 100%;
height: calc(100dvh - 120px);
overflow: hidden;
background: #f3ead9;
}
.diaporama picture {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0 auto;
animation: slideshow__fade 24s ease-in infinite both;
}
.diaporama picture:nth-child(1) {animation-delay: 0s}
.diaporama picture:nth-child(2) {animation-delay: 6s}
.diaporama picture:nth-child(3) {animation-delay: 12s}
.diaporama picture:nth-child(4) {animation-delay: 18s}
.diaporama img{display:block;
width: 100%;
height: 100%;
object-fit: cover;
max-width: 2200px;
margin: 0 auto;}
@keyframes slidebox__fade {
0% { opacity: 0; }
5% { opacity: 1; } /* Apparition rapide */
33.33% { opacity: 1; } /* Reste visible jusqu'à 1/3 du temps total */
38.33% { opacity: 0; } /* Disparition */
100% { opacity: 0; }
}
.slidebox {
position: relative;
width: 100%;
height: 720px;
overflow: hidden;
list-style: none;
padding: 0;
}
.slidebox li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0; /* Évite les flashs au chargement */
animation: slidebox__fade 18s ease-in-out infinite both;
}
/* Délais : 18s total / 3 images = 6s par image */
.slidebox li:nth-child(1) { animation-delay: 0s; }
.slidebox li:nth-child(2) { animation-delay: 6s; }
.slidebox li:nth-child(3) { animation-delay: 12s; }
.slidebox img{display:block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0 auto}
.slidebox video {
width: 100%;
height: 100%;
margin: 0;
position: relative}
/* Carrousel */
.crsl {
display: flex;
margin: 0 auto;
padding:0;
box-sizing:border-box;
overflow: hidden;
max-width:2400px;
max-height:480px;
width: 100%;
justify-content: flex-start;
gap:10px
}
.crsl > * {
flex: 0 0 auto;
}
.crsl:hover .group { animation-play-state: paused}
.group {
display: flex;
gap: 10px;
will-change: transform;
animation: scrolling 36s linear infinite;
/*height:480px;*/
flex-shrink: 0;
}
.crsl picture {
min-width:320px;
height:480px;
flex-shrink: 0;
display:block
}
.crsl picture.r320 {aspect-ratio: 320 / 480}
.crsl picture.r640 {aspect-ratio: 640 / 480}
.crsl img{height:100%;width:auto;min-width:320px;object-fit:cover;display:block}
@keyframes scrolling {
0% {transform: translateX(0); }
100% {transform: translateX(calc(-100% - 10px));}
}
/* fin carrousel */
.imgover {max-width: 1440px;display: flex;justify-content:center; gap: 10px; margin: 40px auto;}
.imgover > li {height:auto; position: relative;flex: auto 1 1}
.imgover li img {object-fit: cover; width: 100%; height: 100%; vertical-align: middle}
.overlay {position: absolute;width: 100%; height: 100%;background: rgba(168, 123, 78,0.5); top: 0; left: 0; transform: scale(0);text-align: center; transition: ease 0.5s /*all 0.2s 0.1s ease-in-out*/;color: #fff;display: flex;align-items: center;justify-content: center;}
.imgover li:hover .overlay {transform: scale(1);}
/* ICON Grid */
.icon-grid {
display: grid;
/* Crée automatiquement autant de colonnes de 120px minimum que l'espace le permet */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
/* Espace entre les éléments (horizontal et vertical) */
gap: 24px;
padding: 16px 30px;
box-sizing:border-box;
max-width: 1440px;
margin: 0 auto;
}
.icon-grid-gite{
display: grid;
/* Crée automatiquement autant de colonnes de 120px minimum que l'espace le permet */
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
/* Espace entre les éléments (horizontal et vertical) */
gap: 16px;
padding: 10px 30px;
box-sizing:border-box;
max-width: 880px;
margin: 0 auto;
}
/* Style de chaque bloc (Icône + Légende) */
.icon-item {
display: flex;
flex-direction: column;
align-items: center; /* Centre l'icône et le texte horizontalement */
text-align: center; /* Centre le texte de la légende */
min-width: 0;
}
/* Ajout pour safari avec les images svg */
.icon-placeholder img,
.icon-placeholder-gite img {
max-width: 100%;
height: auto;
}
/* Placeholder pour l'icône (à remplacer par vos balises ![]()
ou