.affich300 {max-width: 500px; margin: 0 auto; border-radius: 15px;}
.avap {background-color: gainsboro; width: 70%; text-align: center;}
.bandhaute { text-align: center; vertical-align: middle; top:10px;   align-self: center;  max-width: 32%; }
.blanc { position: relative; width: 11px; justify-content: space-between; }
.blog { position: relative; flex: 1; font-size: 0.8em; top:0; bottom:15px; left:0; right: 0; margin: auto; min-height: 180px; min-width: 247px; max-height: 180px; max-width: 247px; border: solid 5px gray; border-radius: 10px; text-align: left; justify-content: space-between; font-weight: bold; }
.blogfond { background-repeat: no-repeat; background-position: top center; }
.border {border: solid 1px black; border-radius: 8px; padding: 8px;}
.box1 { flex-grow: 1;   align-self: center;}
.boxavapr {   display: flex; }
.boxl { flex-shrink: 1; margin-left: 25px;}
.boxr { flex-shrink: 1; margin-right: 25px;}
.button {    background-color: Ivory;    background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);    background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);    border-radius: 6px;    margin-bottom:2px;    box-shadow: 3px 3px 3px #999;    border:solid 2px #333A40 }
.cadre {border: 2px solid blue; border-radius: 15px; margin: 0 auto; padding: 15px; max-width: 250px; flex-wrap: wrap; box-shadow: 10px 10px 10px #999; } /* height: 280px; */
.cadreimg {padding: 10px; text-align: center; font-family: arial; font-size: 0.8em; margin: 10px auto; border: solid 1px gray; border-radius:15px;} 
.cadrelogo { border-radius: 20px; height: 150px; width: 150px; overflow: hidden; text-align: center; }
.cadrepic {border: solid 1px black; background: AliceBlue; text-align: center; max-width: 800px; font-style: italic; font-size: 0.8em; border-radius: 15px; padding:15px;}
.cadretitre { border: solid 3px white; border-radius: 10px; margin: 10px; padding: 15px;   align-self: center; max-width: 40%;}
.center {text-align; center;}
.center100 {text-align: center; width: 100%;}
.citation { left: 20px; color: blue; border-left: dash 2px blue; padding: 10px; background-color: grey;}
.citation { width: 75%; color: blue; border-left: dash 2px blue; border-radius: 15px; padding: 20px; background-color: Wheat; position: relative; padding-left: 15px; margin: 0 auto;}
.citauteur {font-family: arial; font-size: 0.8em;}
.cittexte {font-family: Indie Flower; font-size: 1.2em; font-weight: bold;}
.comm-ferm {display: flex; justify-content: space-between; font-size: 0.8em;}
.comment {border: solid 3px darkgrey; border-radius: 10px; background-color: moccasin; padding: 5px; max-width: 100%; margin: 0 auto;}
.content img {   width: 100%;   height: auto;   max-width: 100%;   object-fit: contain;   display: block;   font-family: arial;   font-size: 0.8em;   color: darkblue; }
.container {
  position: relative;
  width: 600px;
}

.container img {
  width: 100%;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: sans-serif;
  transition: opacity 0.3s;
}

.container.open .overlay {
  opacity: 0;
  pointer-events: none;
}

.discu {background: moccasin; padding: 10px 0 10px 0;}
.DivImg {max-width: 40%; border: solid 2px Gainsboro; border-radius: 10px; padding: 8px; font-size: 0.8em;}
.divmenu { display:flex; width:100px; color:black; text-align:center; margin: 0 auto;  align-items: center; padding:5px; border: solid 1px white; border-radius: 10px; font-family: verdana; font-size:0.8em;  }
.droite {margin-left: auto;}
.figureL {  float: left; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 2em; padding: 2em;}
.figureL img {max-width: 100%; height: auto;}
.figureR {  float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 2em; padding: 2em;}
.figureR img {max-width: 100%; height: auto;}
.g {color: green;}
.galerie { max-width: 1200px; height: auto;  margin: 0 auto;  display: flex;   flex-wrap: wrap; justify-content:  space-around; }
.galerie {display: flex; gap: 20px; text-align: center; justify-content: space-between; flex-wrap: wrap;}
.gpt {text-align: left; margin-right: 15%; color: blue; border: solid 3px white; border-radius: 5px; margin-left: 3%; margin-top: 5px; padding: 15px; font-family: arial;}
.h2c {text-align: center; font-size: 1.3em;}
.h3red { font-size: 80%; font-weight: normal; color: green; text-align: right; }
.has-text-align-center {text-align: center;}
.has-text-align-justify {text-align: justify;}
.has-text-align-left {text-align: left;}
.has-text-align-right {text-align: right;}
.img100 { width: 100%; height: 100%; }
.img15 {border-radius: 15%;}
.img5 {border-radius: 5%;}
.imgacc { max-width: 45%; height: auto; }
.inlinetitre { padding: 10px; margin-top: 20px;    display: flex;     justify-content: space-between;     align-items: baseline;     flex-wrap: wrap; border: solid 1px cyan; border-radius: 10px;}
.left {float: left; margin-right: 5px; max-width: 40%;}
.leftcomm {  font-family: arial;  border-top-color: blue;  text-align: left;  padding: 20 px;  color: blue; }  
.legende {color: green; font-style: italic; text-align: center; max-width: 60%;}
.legende {font-family: arial; font-size: 0.8em; border-bottom: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; border-radius: 3px; background-color: #EFEFFB;}
.legendred {font-family: arial; font-size: 0.8em; padding: 5px; background-color: #EFEFFB;}
.link { color: #FF0000; text-decoration: underline overline #FF3028; font-size: 1.2em; background-color: white;}
.maj {font-size: 0.8em; text-align: center; border: solid 1px green; border-radius: 15px; padding: 8px; background: PapayaWhip;}
.moi {text-align: right; margin-left: 15%; color: green; border: solid 3px white; border-radius: 5px; margin-right: 3%; margin-top: 5px; padding: 15px;}
.none{font-size: 0.8em; width: 70px; border: solid 1px gray; border-radius: 5px;}
.og {border: solid 4px cyan; border-radius: 15px; padding: 15px; max-width: 1230px; margin: 10px auto; font-size: 0.8em;}
.oldwp { padding: 5px 15px 5px 15px; margin: 20px; border: solid 2px blue; border-radius: 10px; text-align: center;}
.parenthese { width: 75%; border-width: 4px; border-color: grey; padding: 0 10px 0 10px; background-color: LightCyan; border-style: none solid none solid; border-radius: 20px;font-style: italic; font-size: 0.8em; margin-right: 0;}
.parenthesefil { border-left: solid 2px black; border-right: solid 2px black; border-radius: 5px; padding-left: 5px; padding-right: 5px; font-style: italic; font-size: 1em; color: DarkSlateGray; background-color: Lavender;}
.partage {font-size: 0.8em; max-width: 200px; border-radius: 15px; background-color: white; border: solid 2px black; padding: 0 5px 0 5px;}
.pcenter {text-align: center;}
.pleft {text-align: left; padding-left: 20px;}
.pbleu {color: Blue; font-size: 1.2em;}
.prouge {color: Red; font-size: 1.2em;}
.pvert {color: Green; font-size: 1.2em;}
.pright {text-align: right; padding-right: 20px;}
.poeme {padding: 12px;}
.precsuit {     font-size: 0.8em;     font-family: Arial, sans-serif; }
.right {float: right; margin-left: 5px; max-width: 40%;}
.rightsign  {  font-family: arial;  text-align: right;  padding: 20px;  color: blue; }
.rss-button {border-radius: 15px; padding: 0 25px 0 25px; font-family: cursive;}
.rss-follow .rss-copied {   color: green;   font-weight: bold;   margin-left: 0.3em;   font-size: 0.85em;   display: none;   vertical-align: middle; }
.rss-follow {  font-family: sans-serif;  font-size: 0.95em;  margin: 0.5em 0; }
.rss-follow button {   background-color: #fffbf0;   border: 1px solid #d9c89f;   padding: 0.3em 0.6em;   cursor: pointer;   font-size: 0.9em;   border-radius: 3px;   display: inline;   vertical-align: middle;   transition: background-color 0.2s; }
.rss-follow button:hover {   background-color: #f5f0e0; }
.rss-follow small {   margin-left: 0.5em;   font-size: 0.8em;   color: #555; }
.sources {font-size: 0.8em; color: gray;}
.sp { padding: 5px; height: 150px; text-align: center; font-size: 0.8em; }
.stackdiv{
    width:350px;
	margin-right: 10px;
	float: left;
}
.stack{
    width:350px;
    height:830px;
    background:url("/images/divers/2026/2605_projet-red.jpg") no-repeat top center;
    position:relative;
    overflow:hidden;
}

/* Masque blanc */
.stack::after{
    content:"";
    position:absolute;
    left:0;
    top:208px;           /* début de B */
    width:100%;
    height:415px;        /* B + C */
    background:white;
    transition:all .5s ease;
}

/* 1er clic : B apparaît, C reste masquée */
.stack.step1::after{
    top:415px;           /* début de C */
    height:208px;        /* seulement C */
}

/* 2e clic : plus aucun masque */
.stack.step2::after{
    height:0;
}
.submit { background-color: lightgreen; border: solid 5px gray; border-radius: 10px; width: 240px; }
.suite {text-align: right; color: blue; }
.vieuxtitre {font-size: 1.2em; }