@font-face{
  font-family:"Gauche";
  src:url("fonts/GaucheUNLICENSEDTRIAL-Regular.woff") format("woff");
}



:root{

  --black:#111;
  --yellow:#ef302d;
  --red:#ef302d;
  --grey:#deded9;
  --paper:#ededeb;
  --white:#f7f7f5;
  --line:2px solid var(--black);

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}



body{

  margin:0;
  background:#d4d4cf;
  color:var(--black);
  font-family:"Gauche",Arial,sans-serif;
  font-size:13px;

}



a{color:inherit;text-decoration:underline}

a:hover{background:var(--yellow)}



.site{

  width:100%;
  border:var(--line);
  background:rgb(240, 181, 233);

}



.browser-bar{

  height:36px;

  display:grid;

  grid-template-columns:28px minmax(150px,1fr) minmax(220px,1fr) auto 28px;

  align-items:center;

  border-bottom:var(--line);

  font-size:11px;

}

.browser-bar>div{height:100%;display:flex;align-items:center}

.corner{justify-content:center;background:#eee;border-right:var(--line)}

.bar .corner:last-child{border-left:var(--line);border-right:0}

.address{padding:0 9px;border-right:var(--line)}

.status{justify-content:center}

.date{padding:0 10px;border-left:var(--line)}



.page-grid{

  display:grid;

  grid-template-columns:190px minmax(0,1fr) 260px;

  gap:0;

  align-items:start;

}



.left-column{

  padding:10px;

  border-right:var(--line);

  min-height:calc(100vh - 36px);

  display:flex;

  flex-direction:column;

  gap:12px;

}



.main-column{padding:10px;min-width:0}

.right-column{

  padding:10px;

  border-left:var(--line);

  min-height:calc(100vh - 36px);

  display:flex;

  flex-direction:column;

  gap:12px;

}



.module{

  border:var(--line);

  background:var(--paper);

}



.module-title{

  min-height:29px;

  padding:6px 8px;

  border-bottom:var(--line);

  display:flex;

  justify-content:space-between;

  align-items:center;

  font-size:11px;

  letter-spacing:.7px;

}

.module-title.yellow{background:var(--yellow)}

.module-title.red{background:var(--red)}

.module-title:not(.yellow):not(.red){background:#e8e8e5}



.menu nav a{

  display:block;

  padding:8px 9px;

  border-bottom:1px solid var(--black);

  text-decoration:none;

}

.menu nav a:last-child{border-bottom:0}

.menu nav a.active,.menu nav a:hover{background:var(--yellow)}



.modifications ul{

  list-style:none;

  padding:7px 9px;

  margin:0;

}

.modifications li{

  font-size:10px;

  padding:6px 0;

  border-bottom:1px dotted #888;

}

.modifications li:last-child{border-bottom:0}

.modifications a{

  display:block;

  padding:0 9px 10px;

  font-size:10px;

}



.side-note{

  margin-top:auto;

  padding:8px 5px;

  font-size:11px;

  border-top:1px solid #777;

  border-bottom:1px solid #777;

}

.side-note span{font-size:9px}

.side-note p{margin:7px 0;line-height:1.35}



.top-cards{

  display:grid;

  grid-template-columns:1.05fr 1.2fr .85fr;

  gap:10px;

  margin-bottom:10px;

}

.top-cards .module{min-height:145px}



.title-card h1{

  font-size:58px;

  line-height:.78;

  letter-spacing:-3px;

  margin:25px 12px 8px;

}

.title-card>p{margin:0 12px;font-size:15px}



.door-card{overflow:hidden}

.door-placeholder{

  height:115px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  font-size:18px;

  line-height:1;

  background:#cfcfc9;

  background-image:repeating-linear-gradient(0deg,transparent 0 13px,rgba(0,0,0,.07) 14px),

                   repeating-linear-gradient(90deg,transparent 0 13px,rgba(0,0,0,.07) 14px);

}



.keyword-list{

  padding:10px;

  display:flex;

  flex-wrap:wrap;

  gap:5px;

}

.keyword-list span{

  border:1px solid var(--black);

  padding:4px 6px;

  background:#f6f6f3;

  font-size:10px;

}

.keyword-list span:nth-child(3n){background:var(--yellow)}

.keyword-list span:nth-child(5n){background:#eee}



.memory{overflow:hidden;height:650px}

.memory-intro{

  padding:16px 20px 12px;

  border-bottom:1px solid var(--black);

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

}

.chapter-number{

  font-size:10px;

  background:var(--red);

  padding:3px 6px;

}

.memory h2{

  font-size:35px;

  margin:10px 0 0;

  letter-spacing:-1px;

}

.memory .subtitle{margin:0;font-size:13px}

.memory-meta{

  display:flex;

  flex-direction:column;

  text-align:right;

  font-size:9px;

  gap:3px;

}



.memory-text {

  flex: 1 1 auto;

  min-height: 0;

  height: auto;

  overflow-y: auto;

  overflow-x: hidden;

}



.research-paragraph{

  margin:0;

  padding:0 0 7px;

}

.research-paragraph>p{

  margin:0;

  font-size:15px;

  line-height:1.7;

}

.paragraph-comments{

  margin-top:6px;

  border-top:1px dotted #999;

}

.comment-toggle{

  border:0;

  background:transparent;

  padding:4px 0;

  font:inherit;

  font-size:9px;

  text-decoration:underline;

  cursor:pointer;

}

.comment-toggle:hover{background:var(--yellow)}



.thread{

  padding:7px 9px 9px;

  margin-bottom:8px;

  background:#e8e8e5;

  border-left:3px solid var(--yellow);

}

.comment{

  padding:6px 0;

  border-bottom:1px dotted #888;

}

.comment:last-of-type{border-bottom:0}

.comment b{margin-right:10px;font-size:10px}

.comment small{font-size:8px}

.comment p{font-size:10px!important;line-height:1.35!important;margin:3px 0!important}

.empty-thread{font-size:9px!important;margin:2px 0 7px!important}

.mini-comment-form{

  display:grid;

  grid-template-columns:1fr;

  gap:5px;

  margin-top:7px;

}

.mini-comment-form input,.mini-comment-form textarea{

  border:1px solid var(--black);

  padding:5px;

  background:#fff;

  font:inherit;

  font-size:9px;

}

.mini-comment-form textarea{min-height:45px;resize:vertical}

.mini-comment-form button{

  justify-self:end;

  border:1px solid var(--black);

  background:var(--black);

  color:white;

  padding:5px 13px;

  font:inherit;

  font-size:9px;

  cursor:pointer;

}

.mini-comment-form button:hover{background:var(--red)}



.inline-research-image{

  margin:18px 0 12px;

  border:var(--line);

  background:#e7e7e4;

}

.inline-research-image img{

  width:400px;

  max-height: 600px;

  object-fit:cover;

  display:block;

}

.inline-research-image figcaption{

  padding:5px 7px;

  font-size:9px;

}



/* Navigation toujours visible sous le texte */



.memory-navigation {

  flex: 0 0 auto;

  width: 100%;

  box-sizing: border-box;



  border-top: var(--line);

  padding: 12px 20px;



  display: flex;

  justify-content: space-between;

  align-items: center;



  background: #e7e7e4;

  font-size: 11px;

  position: relative;

  z-index: 2;

}



.footnote-list{padding:10px 12px}

.footnote-list p{

  font-size:10px;

  line-height:1.35;

  margin:0;

  padding:7px 0;

  border-bottom:1px dotted #888;

}

.footnote-list p:last-child{border-bottom:0}

.footnotes>a,.questions>a{

  display:block;

  padding:0 12px 12px;

  font-size:10px;

}



.questions ul{

  list-style:none;

  padding:10px 12px;

  margin:0;

}

.questions li{

  font-size:10px;

  padding:7px 0 7px 15px;

  border-bottom:1px dotted #888;

  position:relative;

}

.questions li:before{

  content:"";

  width:6px;height:6px;

  background:var(--red);

  border-radius:50%;

  position:absolute;

  left:0;top:11px;

}

.question-mark{

  font-size:80px;

  line-height:.8;

  text-align:right;

  padding:0 12px 10px;

}



.small-decoration{

  font-size:35px;

  text-align:center;

  margin-top:auto;

}



.footer{

  border-top:var(--line);

  padding:9px 12px;

  display:flex;

  justify-content:space-between;

  font-size:10px;

  background:#e7e7e4;

}



@media(max-width:1100px){

  .page-grid{grid-template-columns:160px minmax(0,1fr)}

  .right-column{

    grid-column:2;

    border-left:0;

    border-top:var(--line);

    min-height:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

  }

  .small-decoration{display:none}

}



@media(max-width:760px){

  .browser-bar{grid-template-columns:22px 1fr auto 22px}

  .browser-bar .status{display:none}

  .page-grid{display:block}

  .left-column,.right-column{border:0;border-bottom:var(--line);min-height:auto}

  .right-column{display:block}

  .top-cards{grid-template-columns:1fr}

  .memory-intro{display:block}

  .memory-meta{text-align:left;margin-top:10px}

  .memory-text{padding:20px 15px}

  .research-paragraph>p{font-size:14px}

  .footer{display:block}

  .footer span{display:block;margin:3px 0}

}





.memory{

  height:650px !important;

  overflow:hidden !important;

  display:flex !important;

  flex-direction:column !important;

  min-height:0 !important;

}



.memory-scroll{

  flex:1 1 auto;

  min-height:0;

  overflow-y:auto;

  overflow-x:hidden;

  padding:25px 34px 15px;

  background:var(--white, #f7f7f5);

}



.memory-scroll::-webkit-scrollbar{width:14px}

.memory-scroll::-webkit-scrollbar-track{

  background:#d1d1cc;

  border-left:1px solid #111;

}

.memory-scroll::-webkit-scrollbar-thumb{

  background:#888;

  border:2px solid #d1d1cc;

}

.memory-scroll::-webkit-scrollbar-thumb:hover{background:#ef302d}



.memory-scroll .inline-research-image{

  margin-left:0;

  margin-right:0;

}



.memory > .memory-navigation{

  flex:0 0 auto;

}



.media-content {

  width: 100%;

  height: 175px;

  overflow: hidden;

  background: #cfcfc9;



  display: flex;

  align-items: center;

  justify-content: center;

}



.media-content video {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



@media(max-width:1100px){

  .memory{

    height:auto !important;

    display:block !important;

  }

  .memory-scroll{

    height:560px;

  }

}



@media(max-width:760px){

  .memory-scroll{

    height:auto;

    max-height:none;

    overflow:visible;

  }

}



.btn-pdf {

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

  transition:  transform 0.15s ease;

}

.btn-pdf img{

  width: 200px;

  position: fixed;

  right: 0px;

  top: 500px;

transition: filter 0.25s ease, transform 0.25s ease;

}



.btn-pdf:hover img{

filter: brightness(1.15)

drop-shadow(0 0 8px rgba(255,255,255,0.8))

drop-shadow(0 0 18px rgba(255, 255, 255, 0.747));

transform: scale(1.03);

}



.btn-pdf:active img{

filter: brightness(1.4)

drop-shadow(0 0 12px white)

drop-shadow(0 0 25px #ffffff);

transform: scale(0.97);

}

.btn-pdf:hover { background:transparent; }

.btn-pdf:hover img { transform:scale(1.05); }

@media print { .btn-pdf { display:none !important; } }



/* IMAGE INTÉGRÉE AU MÉMOIRE */



.inline-research-image {

  position: relative;



  width: fit-content;

  max-width: 100%;



  margin: 25px auto;

  padding: 0;



  border: 2px solid var(--black);

  background: transparent;



  overflow: hidden;

}



.inline-research-image img {

  display: block;



  width: auto;

  height: auto;



  max-width: 100%;

  max-height: 600px;



  object-fit: contain;

}



.memory-scroll,

.memory-text {

  text-align: center;

}



.research-paragraph {

  text-align: left;

}



.inline-research-image {

  margin-left: auto !important;

  margin-right: auto !important;

}



.inline-research-image figcaption {

  position: absolute;

  bottom: 0;

  left: 0;



  width: 100%;

  padding: 6px 8px;



  background: rgba(247, 247, 245, 0.9);

  color: var(--black);



  font-family: "Gauche", Arial, sans-serif;

  font-size: 10px;

  line-height: 1.3;



  border-top: 1px solid var(--black);

}





.title-card {

  overflow: hidden;

  min-width: 0;

}



.title-card .gif {

  display: block;

  width: 100%;

  height: 175px;

  max-height: 175px;

  object-fit: contain;

  margin: 0;

  padding: 8px;

  background: #e8e8e5;

}




/* ==========================================================
   BLOC FINAL STABLE — MÉMOIRE / SCROLL / NAVIGATION
   Ces règles sont regroupées ici pour éviter les conflits
   entre les anciennes versions des règles du mémoire.
   ========================================================== */

/* Le module garde une hauteur stable sur ordinateur.
   Le scroll est porté par .memory-text, pas par plusieurs éléments. */
.memory {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 650px !important;
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--white, #f7f7f5);
}

/* Structure utilisée par Sotce.html et Cyberdeck.html :
   .memory > .memory-text, puis .memory-navigation comme frère. */
.memory > .memory-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  max-height: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 25px 34px 20px;
  background: var(--white, #f7f7f5);
  text-align: left;
  scrollbar-width: auto;
  scrollbar-color: #888 #d1d1cc;
}

/* Si une ancienne page contient encore .memory-scroll à l'intérieur
   de .memory-text, elle ne crée pas un deuxième scroll. */
.memory-scroll {
  display: block;
  flex: initial;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
  background: transparent;
  text-align: left;
}

.memory-text::-webkit-scrollbar,
.memory-scroll::-webkit-scrollbar {
  width: 14px;
}

.memory-text::-webkit-scrollbar-track,
.memory-scroll::-webkit-scrollbar-track {
  background: #d1d1cc;
  border-left: 1px solid #111;
}

.memory-text::-webkit-scrollbar-thumb,
.memory-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border: 2px solid #d1d1cc;
}

.memory-text::-webkit-scrollbar-thumb:hover,
.memory-scroll::-webkit-scrollbar-thumb:hover {
  background: #ef302d;
}

/* Navigation comme enfant direct de .memory :
   bande en bas du module, sur toute sa largeur. */
.memory > .memory-navigation {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  border-top: var(--line);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #e7e7e4;
  font-size: 14px;
}

/* Compatibilité si une page a encore la navigation dans .memory-text. */
.memory-text .memory-navigation {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 12px 0 0;
  border-top: var(--line);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #e7e7e4;
  font-size: 14px;
}

.memory-navigation a {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Images intégrées : proportionnelles et centrées. */
.inline-research-image {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 25px auto;
  padding: 0;
  border: 2px solid var(--black);
  background: transparent;
  overflow: hidden;
}

.inline-research-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
}

.inline-research-image figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 8px;
  background: rgba(247, 247, 245, 0.9);
  color: var(--black);
  font-family: "Gauche", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  border-top: 1px solid var(--black);
}

.memory-text,
.memory-scroll,
.research-paragraph {
  text-align: left;
}

/* Ne laisse pas les cartes d'images rétrécir la grille. */
.title-card {
  overflow: hidden;
  min-width: 0;
}

.title-card .gif {
  display: block;
  width: 100%;
  height: 175px;
  max-height: 175px;
  object-fit: contain;
  margin: 0;
  padding: 8px;
  background: #e8e8e5;
}

/* Bouton PDF flottant : il ne participe pas à la grille. */
.btn-pdf {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.btn-pdf img {
  position: fixed;
  width: 120px;
  max-width: 12vw;
  height: auto;
  right: 12px;
  bottom: 12px;
  top: auto;
  z-index: 20;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.btn-pdf:hover img {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255,255,255,.8));
  transform: scale(1.03);
}

.btn-pdf:active img {
  transform: scale(.97);
}

/* Tablettes : on conserve le module lisible et son scroll. */
@media (max-width: 1100px) {
  .memory {
    height: 650px !important;
    display: flex !important;
  }

  .memory > .memory-text {
    height: auto !important;
    padding: 22px 24px 20px;
  }
}

/* Téléphones : le module suit le contenu, la page défile normalement. */
@media (max-width: 760px) {
  .memory {
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
  }

  .memory > .memory-text {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px 15px;
  }

  .memory > .memory-navigation,
  .memory-text .memory-navigation {
    position: static;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .inline-research-image {
    max-width: 100%;
  }

  .inline-research-image img {
    max-width: 100%;
    max-height: 70vh;
  }

  .btn-pdf img {
    width: 76px;
    max-width: 18vw;
    right: 8px;
    bottom: 8px;
  }
}

/* APPELS DE NOTES DE BAS DE PAGE */

.footnote-ref {
  display: inline;
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  padding: 0 1px;
}

.footnote-ref:hover {
  background: var(--yellow);
}

.footnote-list {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.footnote-list p {
  scroll-margin-top: 0;
  transition: background-color 0.25s ease;
}

.footnote-list p.footnote-active {
  background: var(--yellow);
}

.footnote-ref:hover {
  background: var(--yellow);
  cursor: pointer;
}

@media (max-width: 760px) {
  .footnote-list {
    max-height: 60vh;
  }
}


@media print {
  .btn-pdf,
  .memory-navigation {
    display: none !important;
  }
}