/* ======================= GLOBAL STYLES ======================= */
body {
	  
  padding: 0;
  box-sizing: border-box;	
	
    margin: auto;
    background-color: #ffffee;
    font-family: "Helvetica", "Comic Sans MS", 'Lato', sans-serif;
    text-align: center;
}

p.a {
    font-family: "Helvetica", "Comic Sans MS", "Times New Roman", Times, serif;
    font-size: 20px;
}

pre {
    font-family: "Helvetica", "Times New Roman", "Comic Sans MS";
    font-size: 1em;
}

#conteneur {
    margin: auto;
}

/* ======================= STICKY ELEMENTS ======================= */
div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
}

#stickyPart {
    background-color: #ffffee;
    width: 95%;
    top: 0;
    position: sticky;
    text-align: center;
    margin: auto;
}

#Part2 {
    width: 95%;
    margin: auto;
    text-align: center;
}



/* ======================= HEADER LINE 0 ======================= */
#ligne0 {
    font-family: "Helvetica";
    color: #000;
    text-align: center;
padding: 12px 16px 8px; /* haut | côtés | bas */
    margin-top: 0;
    font-weight: bold;
    font-size: 1em;
}

#ligne0 a:link { color: #288; }
#ligne0 a:visited { color: #ff5555; }
#ligne0 a:hover { color: hotpink; }
#ligne0 a:active { color: blue; }

img.c {
    vertical-align: sub;
    color: #900;
}

/* ======================= NAVIGATION BUTTONS ======================= */
.button, .abutton, .buttonbig {
    font-family: "Helvetica";
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.butmenu { 
	background:#288;
	font-family: "Helvetica"; 
	color: #ffff;
	font-size: 15px; 
	padding: 5px 13px; 
	text-decoration: none; 
} 

.button { 
    background: #288;
    font-size: 17px;
    padding: 7px 15px;
    vertical-align: sup;
}

/* =======================*/




/* Liens / boutons interactifs */

[data-action], .js-nav {
    background: #288;
    color: #fff;
    font-size: 17px;
    display: inline-block;
/*    border: 6px solid #288; */
    cursor: pointer;
    text-decoration: none;	
	width: 30%;	
}


/* Images dans liens */
[data-action] img {
    display: block;
   width: 100%;
}


/* Variantes */
/*.js-action  { width: 28%; }*/

/* Zones principales */
#gauche img {
    width: 100%;  /* 100% */
    height: auto;
}

/* Navigation scènes */
#navScenes {
    margin-top: 10px;
    text-align: center;
}

#navScenes button {
    margin: 0 5px;
}


/* ======================= NAVIGATION BUTTONS ======================= */

.abutton {
    font-size: 17px;
    padding: 7px 15px;
    text-decoration: underline;
}

.buttonbig {
    background: #288;
    border-radius: 14px;
    font-size: 25px;
    padding: 14px 20px;
}

/* ======================= ICON BUTTONS ======================= */
.format {
    width: 50px;
    margin: 0;
    border-radius: 0;
    display: inline-block;
}

.suiv, .prec, .root, .jc, .pays, .trav, .pers, .haut, .bas, .grind {
    border: none;
    font-size: 18px;
    width: 50px;
    height: 50px;
    display: inline-block;
}

#home { background-image: url(../img/home.jpg); }
#suiv, .suiv { background-image: url(../img/suiv.jpg); }
#prec, .prec { background-image: url(../img/prec.jpg); }
.root { background-image: url(../img/root2.png); }
#jc, .jc { background-image: url(../img/jc.jpg); }
#pays, .pays { background-image: url(../img/pays.jpg); }
#trav, .trav { background-image: url(../img/trav.jpg); }
#pers, .pers { background-image: url(../img/perso.jpg); }
.haut, .bas, .grind { background-image: url(../img/bas.jpg); } /* bas/grind ? */

/* ======================= RESPONSIVE ======================= */
@media only screen and (min-width: 768px) {
    body {
        width: 800px;
        text-align: center;
    }
}

/* ======================= HEADER LINES ======================= */
#ligne1 {
    background-color: #288;
    float: left;
    width: 100%;
    line-height: 48px;
    font-weight: normal;
    font-size: 1em;
    text-align: center;
}

#ligne1 a:link, #ligne1 a:visited { color: white; }
#ligne1 a:hover { color: hotpink; }
#ligne1 a:active { color: blue; }

#ligne2, #ligne3 {
    background-color: #ffffee;
    font-family: "Helvetica";
    color: #000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

#ligne2 {
    margin-top: 100px;
    font-weight: bold;
    font-size: 1em;
}

#ligne3 {
    line-height: 25px;
    font-weight: normal;
    font-size: 1em;
}

/* ======================= LIGNE 4 ======================= */
#ligne4 {
    background-color: #ffffee;
    color: #000;
    margin: auto;
    vertical-align: text-top;
    text-align: center;
    padding: 10px;
    font-size: 1.3em;
}

img.a { vertical-align: text-top; }

/* ======================= lignebuts / SECONDARY CONTENT ======================= */
#lignebuts {
   /* background-color: #ffffee; */	//////////////////////ffff00
	background-color: #ffffee;
    padding: 20px 1px;
    vertical-align: text-top;
    text-align: center;
    font-size: 1.2em;
}

#lignemonde {
	background-color: #ffffee;
    padding: 10px 7px;
    vertical-align: text-top;
    text-align: center;
    font-size: 1.2em;
}

/*
#lignemonde img {
    border: 0px solid #ffffee;
    box-sizing: border-box;
}
*/


#lignemonde img {
	border-width: thick;
    display: block;
    box-sizing: border-box;
}

#nonclic {
	  border-width: thick;
	  border-style: solid;
      border-color: red;
/*	box-shadow: inset 0 0 0 2px red;*/
}


#cliquable {
	border-style: solid;
  	border-color: green;
  /*  box-shadow: inset 0 0 0 2px green;*/
}


#secondary {
    background-color: #ffffee;
    color: #666;
    text-align: justify;
    vertical-align: text-top;
    padding: 10px 7px;
    line-height: 1.6;
    font-size: 1.2em;
}

div#secondary table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

div#secondary th, div#secondary td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* ======================= GUTTER COLUMNS ======================= */
#gauche, #droite, #image {
    background-color: #ffffee;
    vertical-align: text-top;
    margin: auto;
    font-size: 1.2em;
}

#gauche { float: left; width: 30%; text-align: left; }
#droite { float: right; width: 70%; text-align: justify; }
#image { float: right; width: 60%; text-align: right; }

/* ======================= LIGNE PROTAS (BAS) ======================= */
#ligneprotas {
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 0;
    background-color: #ffffee;
    font-size: 1.2em;
}

#ligneprotas h1, #ligneprotas h2, #ligneprotas h3 {
    text-align: center;
}

/* ======================= MISC ======================= */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}

.lire {
    font-family: "Helvetica";
    font-size: 20px;
    text-align: center;
}

/* ======================= ALL BROWSERS / CUSTOM CHECKBOX ======================= */
.all-browsers {
    margin: 0;
    background-color: lightgray;
}

.all-browsers > h1, .browser {
    margin: 10px;
    padding: 5px;
}

.browser {
    background: white;
}

.browser > h2, .browser p {
    margin: 4px;
    font-size: 1.5em;
}

.browser > h3, .browser p {
    margin: 4px;
    font-size: 1em;
}

.unSuspect {
    height: 40px;
    width: 40px;
    background-color: #008000;
}

.unSuspect:after {
    content: "";
    display: none;
}

.btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 18px;
}

.active, .btn:hover {
    background-color: #666;
    color: white;
}


/* Mobile */
@media (max-width: 700px) {
  .image-droite {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }
}


/* Pattern2 */

figure.plein {
  margin: 1.5rem 0;
}

figure.plein img {
  width: 100%;
  height: auto;
  display: block;
}

figure.plein figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.4rem;
}

/* ====== CONTENEUR DU CARROUSEL ====== */
.carrousel-voyage {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;        /* il prend toute la largeur de Part2 */
    box-sizing: border-box;
}

/* ====== GRANDE IMAGE (PRIMARY) ====== */

#primary {
text-align: center;
}


#primaryB {
    flex: 1;
    max-width: 100%;
    overflow: hidden;   /* <-- CLÉ : empêche le débordement */
}