#pgleft,
#pgright,
#pgleft .et_pb_code_inner,
#pgright .et_pb_code_inner,
#afdm-page-droite,
#afdm-page-gauche,
#afdm-page-droite.afdm-page-content,
#afdm-page-gauche.afdm-page-content {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}


#afdm-titre-gauche {
    position: absolute;
    top: 8px;
    right: 8px; 
    font-family: 'Bilbo Swash Caps', cursive; 
    font-size: 24px;                       
    font-weight: 400;                       
    line-height: 1.2;     
    color: #333;                         
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    z-index: 50;
    pointer-events: none;
}


#afdm-page-title-input {
    width: 70%;             
    height: 20px;           
    padding: 4px 8px;       
    font-weight: normal;
    font-size: 0.9em;      
    border: 1px solid #ccc; 
    border-radius: 4px;    
    box-sizing: border-box; 
}


#afdm-options {
    height: auto; /* base neutre */
    overflow: visible;
}

/* Wrapper des sections */
#afdm-options .afdm-layouts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sections et titres */
#afdm-options .afdm-layouts-section {
    margin: 0 0 18px 0;
    padding: 0;
}

#afdm-options .afdm-btn-title {

    font-weight: normal;
    font-size: 0.9em;
    margin: 8px 0 5px 0;
    padding: 0;
    text-align: left;
}

#afdm-options .afdm-layouts-title {
    font-weight: 600;
    font-size: 0.9em;
    margin: 0 0 5px 0;
    padding: 0;
    text-align: left;
}

/* Grille des vignettes (desktop par défaut → verticale) */
#afdm-options .afdm-layouts-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 5px;
}

/* Vignettes */
#afdm-options .afdm-layout-thumb {
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
    border: none;
}

/* Images */
#afdm-options .afdm-layout-thumb img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

/* Cadre sélection directement sur l'image */
#afdm-options .afdm-layout-thumb img.layout-selected {
    border: 2px solid #d91818;
    box-sizing: border-box;
}

#afdm-options .afdm-layout-thumb.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#afdm-options .afdm-layout-thumb.is-disabled img {
  filter: grayscale(1);
}

#afdm-options .afdm-layout-thumb.is-disabled img.layout-selected {
  border: none !important;
}

/* Bouton effacer */
#afdm-options .afdm-layout-actions 
{ 
  display: flex;
  margin-top: 10px;
  margin-bottom: 15px;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

#afdm-options .afdm-book-button, #afdm-book-navigation .afdm-book-button,#afdm-book-gestion .afdm-book-button
{
  appearance: none;
  border: none;
  background: #000; 
  color:#fff;
  font-size :13px;
  padding:5px;
  border-radius: 3px;
  cursor: pointer;
}

#afdm-options .afdm-book-button-off
{  
  appearance: none;
  border: none;
  color: #8a8a8a;
  background: #d9d9d9;
  font-size :13px;
  padding:5px;
  border-radius: 3px;
  cursor: not-allowed;
}

/* Option : petit effet hover */
#afdm-options .afdm-book-button:hover {
    transform: scale(0.95);
    background: #d91818;
}

/*#afdm-book-navigation  .afdm-book-buttonnav
{
  appearance: none;
  border: none;
  background: #000; /*d91818*/
  /*color:#fff;
  font-size :13px;
  padding:5px;
  border-radius: 3px;
  cursor: pointer;
}*/

/*
#afdm-book-navigation .afdm-book-buttonnav:hover
{ 
  background: #000; 
}*/

/* Onglets */
#afdm-options .afdm-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0;
}

#afdm-options .afdm-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.95rem;
    gap: 6px;
    color: #333;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    transition: background 0.2s, color 0.2s;
    border-radius: 8px 8px 0 0;
}

#afdm-options .afdm-tab:last-child {
    border-right: none;
}

#afdm-options .afdm-tab:hover {
    background: #e9e9e9;
}

#afdm-options .afdm-tab.active {
    background: #d81919;
    color: #fff;
}

#afdm-options .afdm-tab-off {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    cursor: not-allowed;
    font-size: 0.95rem;
    gap: 6px;
    color: #8a8a8a;
    background: #d9d9d9;
    border-right: 1px solid #ccc;
    transition: background 0.2s, color 0.2s;
    border-radius: 8px 8px 0 0;
}

#afdm-options .afdm-tab-content {    
    flex: 1;
    height: calc(100vh - 160px); /* onglets + marges estimées */
    overflow-y: auto;            /* ✅ scroll vertical ici */
    padding: 10px;
    box-sizing: border-box;
}

#afdm-options .afdm-tab-panel {
    display: none;
}

#afdm-options .afdm-tab-panel.active {
    display: block;
}

/* Scroll vertical spécifique */
#afdm-options .afdm-tab-content::-webkit-scrollbar {
    width: 8px;
}

#afdm-options .afdm-tab-content::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

#afdm-options .afdm-tab-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

/* Move*/
#afdm-photo-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    margin-top: 5px;
}

#afdm-photo-controls .afdm-control-button {
    width: 30px;
    height: 30px;
    background: #000;          
    color: #fff;               
    font-weight: bold;         
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.2s ease;
}

#afdm-photo-controls .afdm-control-button-del {
    width: 30px;
    height: 30px;
    background: #6b6b6b;          
    color: #fff;               
    font-weight: bold;         
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.2s ease;
}

#afdm-photo-controls .afdm-control-button-del-off {
    width: 30px;
    height: 30px;
    background: #d9d9d9;          
    color: #8a8a8a;               
    font-weight: bold;         
    border: none;
    border-radius: 4px;
    cursor: not-allowed;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Option : petit effet hover */
#afdm-photo-controls .afdm-control-button:hover {
    transform: scale(0.95);
    background: #d91818;
}

/* Option : effet clic */
#afdm-photo-controls .afdm-control-button:active {
    transform: scale(0.95);
}

/* Conteneur page */
#pgright, #pgleft {
  aspect-ratio: 3 / 4;       
  max-width: 100%;          
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fff;       
  /*box-shadow: 0px 2px 18px rgba(0,0,0,0.3);*/
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  border: none;
}

@media (min-width: 1024px) { 
  #pgright, #pgleft { height: 755px; }
}

@media (min-width: 768px) and (max-width: 1023px) { 
  #pgright, #pgleft {
    height: 500px; 
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 767px) {
  #pgright, #pgleft {
    height: 250px; 
    aspect-ratio: 3 / 4;
  }
}


#pgright .et_pb_code_inner, 
#pgleft .et_pb_code_inner
{
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}

#afdm-page-droite.afdm-page-content,
#afdm-page-gauche.afdm-page-content {
  
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
  background: none;
  border : none;
}






/* Livre : relief permanent */
#pgleft, #pgright {
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 560ms ease,
    opacity 420ms ease,
    filter 420ms ease,
    box-shadow 420ms ease;
  will-change: transform, opacity, filter;
}

/* Livre ouvert : contour extérieur doux, sans rien entre les deux pages */
#pgleft:not(.afdm-hard-cover-back):not(.afdm-hard-cover-front) {
  border-top: 2px solid rgba(217, 24, 24, 0.10);
  border-bottom: 2px solid rgba(217, 24, 24, 0.10);
  border-left: 6px solid rgba(217, 24, 24, 0.12);
  border-right: none;
  box-sizing: border-box;
}

#pgright:not(.afdm-hard-cover-back):not(.afdm-hard-cover-front) {
  border-top: 2px solid rgba(217, 24, 24, 0.10);
  border-bottom: 2px solid rgba(217, 24, 24, 0.10);
  border-right: 6px solid rgba(217, 24, 24, 0.12);
  border-left: none;
  box-sizing: border-box;
}







/* bombé permanent */
#pgleft {
  /*transform: perspective(1400px) rotateY(1deg);
  transform-origin: right center;*/
  transform: none;
}

#pgright {
  /*transform: perspective(1400px) rotateY(-1deg);
  transform-origin: left center;*/
  transform: none;
}

/* ombre intérieure proche de la reliure */
#pgleft::after,
#pgright::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

#pgleft::after {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.02) 65%,
    rgba(0,0,0,0.10) 92%,
    rgba(0,0,0,0.16) 100%
  );
}

#pgright::after {
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.02) 65%,
    rgba(0,0,0,0.10) 92%,
    rgba(0,0,0,0.16) 100%
  );
}

/* Animation navigation */
/* Aller vers la page suivante */
#pgleft.afdm-turn-next,
#pgright.afdm-turn-next {
  opacity: 0.90;
  filter: blur(0.35px);
}

#pgleft.afdm-turn-next {
  transform: perspective(1400px) rotateY(7deg) translateX(8px) scale(0.992);
}

#pgright.afdm-turn-next {
  transform: perspective(1400px) rotateY(-10deg) translateX(-12px) scale(0.988);
}

/* Revenir à la page précédente */
#pgleft.afdm-turn-prev,
#pgright.afdm-turn-prev {
  opacity: 0.90;
  filter: blur(0.35px);
}

#pgleft.afdm-turn-prev {
  transform: perspective(1400px) rotateY(10deg) translateX(12px) scale(0.988);
}

#pgright.afdm-turn-prev {
  transform: perspective(1400px) rotateY(-7deg) translateX(-8px) scale(0.992);
}

/* Apparition douce au chargement */
#pgleft.afdm-book-appear,
#pgright.afdm-book-appear {
  opacity: 0;
  filter: blur(0.5px);
}

#pgleft.afdm-book-appear {
  transform: perspective(1400px) rotateY(2deg) translateX(-10px) scale(0.992);
}

#pgright.afdm-book-appear {
  transform: perspective(1400px) rotateY(-2deg) translateX(10px) scale(0.992);
}

/* Page simple (grille en flex) */
#afdm-page-droite.layout-simple,
#afdm-page-gauche.layout-simple {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px;
}

/* Page complexe (slots positionnés absolument) */
#afdm-page-droite.layout-grid,
#afdm-page-gauche.layout-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  gap: 10px; 
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#afdm-page-gauche.has-defi::before {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 50;
  pointer-events: none;
  font-weight: 600;
}

#afdm-page-gauche.has-defi.layout-21::before,
#afdm-page-gauche.has-defi.layout-23::before,
#afdm-page-gauche.has-defi.layout-26::before {
  content: attr(data-month);
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  pointer-events: none;
  z-index: 5;
}

#afdm-page-gauche::before {
  content: '';
}

#afdm-page-gauche {
    position: relative;
}

.afdm-photo-placeholder {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
}


.afdm-photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;    
    object-position: center;
    display: block;
}

.afdm-comment-box {
  width: 90%;
  min-height: 60px;
  max-height: calc(1.2em * 6 + 10px); /* ≈ 6 lignes + padding */
  resize: none;
  text-align: center; 
  white-space: pre-wrap;   
  word-wrap: break-word;  
  overflow-wrap: break-word;
  border: 1.5px dashed #bbb;     
  border-radius: 10px;          
  background: #fff;           
  outline: none;
  font-size: 14px;
  font-family: "Segoe UI", Roboto, sans-serif;
  color: #555;
  padding: 8px 10px;
  box-sizing: border-box;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  line-height: 1.2em;
}

/* Effet focus pour la saisie */
.afdm-comment-box:focus {
  border-color: #4a90e2;
  background: #fafafa;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
  color: #333;
}

.afdm-comment-box::placeholder {
  text-align: left;
  color: #aaa;
  font-style: italic;
}

.afdm-inside-cover-content {
  width:90%;
  height: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.afdm-inside-cover-comment {
  width: 80%;
  min-height: 40px;
  text-align: center;
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #555;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

.afdm-inside-cover-comment-ghost {
  visibility: hidden;
  pointer-events: none;
}


/*photos*/
.afdm-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  justify-items: center;
  align-items: center;
  padding: 10px;
}

.afdm-photo-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}

.afdm-photo-item img:hover {
  transform: scale(1.05);
}


/* Conteneur de la zone de commentaire */
.afdm-comment-slot_org{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.afdm-comment-slot {
  margin-top: 10px; /* petit espace sous la grille */
  flex-shrink: 0;   /* ne se réduit pas */
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.afdm-photos-book-wrapper {
  flex: 0;                       /* ✅ prend seulement la hauteur nécessaire à son contenu */
  display: flex;
  justify-content: center;       /* ✅ centre horizontalement la grille */
  align-items: flex-start;       /* ✅ pas de centrage vertical interne (sinon le commentaire descend) */
  width: 100%;
  box-sizing: border-box;
}

.afdm-photos-book-wrapper > div {
  /* la grille (grid définie en JS) garde son centrage */
  margin: auto;
}


.afdm-photo-selected 
{
    outline: 1px solid #ffebea;  
    outline-offset: -4px;        
    box-shadow: 0 0 5px 5px #ffebea; 
    transition: box-shadow 0.2s, outline 0.2s;
}

#afdm-book-gestion 
{
  display: flex;
  flex-direction: column;     
  align-items: center;        
  gap: 10px;                   
}

#afdm-book-gestion .afdm-book-button,
#afdm-book-gestion select 
{
  width: 100%;
  max-width: 260px;            
  text-align: center;
}

.afdm-book-gestion-actions,
.afdm-book-gestion-insert {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.afdm-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.afdm-book-btn-text {
  display: inline;
}

.afdm-text-layout {
    display: flex;
    align-items: center;         
    justify-content: center;     
    padding: 20px;         
    box-sizing: border-box;
    overflow: hidden;
}

.afdm-text-layout-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.afdm-text-layout-content {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;          
    line-height: 1.5;
    font-family: "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    text-align: left;
    white-space: normal;  
    overflow: hidden;
}

.afdm-theme-end-page .afdm-text-layout-wrapper {
  gap: 18px;
}

.afdm-text-layout-logo {
  display: block;
  max-width: 140px;
  height: auto;
  margin: 0 auto;
}


.afdm-photos-msg {
    grid-column: 1 / -1;
    width: 100%;
    font-size: small;
    font-style: italic;
    margin-top: 20px;
    text-align: left;
    justify-self: stretch;
}

.afdm-comment-box.afdm-comment-box-readonly {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    resize: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    color: #555 !important;
    opacity: 1 !important;
    filter: none !important;
}

.afdm-comment-box.afdm-comment-box-readonly:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#afdm-book-gestion .afdm-book-button:hover {
    transform: scale(0.95);
    background: #d91818;
}

#pgright.afdm-book-cover {
  transform: perspective(1400px) rotateY(-1deg);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    -8px 0 18px rgba(0,0,0,0.10),
    inset 0 0 0 rgba(0,0,0,0);
}

#pgright.afdm-book-cover::after {
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.03) 70%,
    rgba(0,0,0,0.12) 100%
  );
}

.afdm-journal-left-empty {
  background: #fff;
}

#afdm-page-gauche[data-type="journal"] .afdm-photo-placeholder {
  background: transparent;
}

#afdm-page-gauche[data-type="journal"] .afdm-photo-placeholder.afdm-journal-photo {
  background: transparent;
  border: none;
  box-shadow: none;
}

.afdm-text-layout-wrapper-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.afdm-text-layout-content-end {
  text-align: center;
  width: 100%;
  max-width: 85%;
  margin: 0 auto;
}

.afdm-text-layout-logo {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.afdm-photo-placeholder-empty-soft {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#pgright.afdm-hard-cover-front,
#pgleft.afdm-hard-cover-back
{
  background: linear-gradient(
    135deg,
    rgba(217, 24, 24, 0.00) 0%,
    rgba(217, 24, 24, 0.06) 58%,
    rgba(217, 24, 24, 0.12) 100%
  ),
  #ffffff;
  box-sizing: border-box;
}

#pgright.afdm-hard-cover-front,
#pgleft.afdm-hard-cover-back {
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.40),
    inset 0 0 16px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.10);
}

#pgright.afdm-hard-cover-front,
#pgleft.afdm-hard-cover-back {
  position: relative;
  overflow: visible;
}

/* Couverture avant : tranche visible à droite */
#pgright.afdm-hard-cover-front::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: -10px;
  width: 10px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(217,24,24,0.10) 0%,
    rgba(217,24,24,0.18) 35%,
    rgba(120,120,120,0.18) 100%
  );
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  box-shadow:
    1px 0 2px rgba(0,0,0,0.10),
    inset 1px 0 0 rgba(255,255,255,0.35);
}

/* Couverture arrière : tranche visible à gauche */
#pgleft.afdm-hard-cover-back::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -10px;
  width: 10px;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(217,24,24,0.10) 0%,
    rgba(217,24,24,0.18) 35%,
    rgba(120,120,120,0.18) 100%
  );
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  box-shadow:
    -1px 0 2px rgba(0,0,0,0.10),
    inset -1px 0 0 rgba(255,255,255,0.35);
}

.afdm-hard-cover-front-page,
.afdm-hard-cover-back-page {
  width: 100%;
  height: 100%;
  background: transparent;
}

.afdm-hard-cover-front-inner,
.afdm-hard-cover-back-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.afdm-hard-cover-front-inner {
  justify-content: space-between;
  align-items: center;
}

.afdm-hard-cover-front-title {
  width: 100%;
  text-align: center;
  font-family: 'Bilbo Swash Caps', cursive;
  font-size: 30px;
  line-height: 1.15;
  color: #333;
  margin-top: 10px;
}


.afdm-hard-cover-window,.afdm-inside-cover-window {
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  flex: 0 0 auto;
}

.afdm-hard-cover-window.is-portrait,.afdm-inside-cover-window.is-portrait {
  width: 62%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
}

.afdm-hard-cover-window.is-landscape,.afdm-inside-cover-window.is-landscape {
  width: 86%;
  max-width: 380px;
  aspect-ratio: 4 / 3;
}

.afdm-hard-cover-window.is-square,.afdm-inside-cover-window.is-square {
  width: 68%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
}

.afdm-hard-cover-window-img,.afdm-inside-cover-window-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* nécessaire pour le pseudo-élément */
.afdm-hard-cover-front .afdm-hard-cover-window {
  position: relative;
  background: #f5f5f5;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.08),
    0 3px 6px rgba(0,0,0,0.06),
    inset 0 0 18px rgba(0,0,0,0.28);
  border-radius: 2px;
}

/* effet "découpe" / chanfrein */
.afdm-hard-cover-front .afdm-hard-cover-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none; 
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.55),
    inset 0 -4px 6px rgba(0,0,0,0.24), 
    inset 4px 0 5px rgba(0,0,0,0.16),
    inset -4px 0 5px rgba(255,255,255,0.08);
}

.afdm-inside-cover-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
}

.afdm-hard-cover-front-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.afdm-hard-cover-front-logo {
  display: block;
  max-width: 300px;
  height: auto;
}

.afdm-hard-cover-back-inner {
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.afdm-hard-cover-back-text {
  font-size: 16px;
  line-height: 1.35;
  color: #333;
  max-width: 85%;
}

.afdm-hard-cover-back-url {
  font-size: 15px;
  line-height: 1.2;
  color: #666;
}

.afdm-hard-cover-back-logo {
  max-width: 90px;
  height: auto;
}


.afdm-reader-month-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
}

.afdm-reader-month-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.afdm-reader-month-nav::-webkit-scrollbar {
  display: none;
}

.afdm-reader-month-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.afdm-reader-month-btn:hover {
  color: #d91818;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.afdm-reader-month-btn.is-active {
  color: #d91818;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.afdm-reader-month-label {
  color: #222;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.afdm-reader-missing-nav {
  margin-top: 16px;
}


.afdm-reader-missing-title {
  font-weight: 600;
  color: #222;  
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.afdm-reader-missing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.afdm-reader-missing-item {
  margin: 0;
  padding: 0;
}

.afdm-reader-missing-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 14px;
  margin-right: 6px;
  flex: 0 0 auto;
}

.afdm-reader-missing-btn {
  color: #444;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.afdm-reader-missing-btn:hover {
  color: #d91818;
}


.afdm-inside-back-hole-wrap {
  width: 90%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.afdm-hard-cover-inner-page.afdm-inside-cover-page {
  padding: 20px;
}


.afdm-hard-cover-window-hole {
  position: relative;
  background: #fdfdfd;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.08),
    inset 0 2px 3px rgba(255,255,255,0.75),
    inset 0 -4px 6px rgba(0,0,0,0.18),
    inset 4px 0 5px rgba(0,0,0,0.10),
    inset -4px 0 5px rgba(255,255,255,0.18);
}

.afdm-hard-cover-window-hole::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.06),
    0 1px 2px rgba(0,0,0,0.04);
}

#pgleft.afdm-hard-cover-inside,
#pgright.afdm-book-cover {
  transform: none !important;
}

@media (min-width: 1025px) 
{
          #afdm-options {
              height: calc(100vh - 120px);
              display: block;     
              padding: 0;
              margin: 0;
              overflow: visible;
          }

          /* cacher la barre de groupes sur PC */
          #afdm-options .afdm-groups-bar {
              display: none !important;
          }

          #afdm-options .afdm-tab-content {
          flex: 1 1 auto;
          min-height: 0;
          overflow-y: auto;
          }

          #afdm-reader-nav-pc {
            position: relative;
            /*top: -500px;   */
            transform: translateY(-500px);          
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            height: 0;
            z-index: 80;
            pointer-events: none;
          }

          #afdm-reader-nav-pc button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 999px;
            background: rgba(255,255,255,0.78);
            color: #333;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.10);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
          }

          #afdm-reader-prev-pc {
            left: -72px;
          }

          #afdm-reader-next-pc {
            right: -72px;
          }

          #afdm-reader-nav-pc button:hover {
            background: rgba(255,255,255,0.92);
            transform: translateY(-50%) scale(1.04);
            box-shadow: 0 6px 16px rgba(0,0,0,0.14);
          }

          #afdm-reader-nav-pc button:disabled {
            opacity: 0.35;
            cursor: default;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transform: translateY(-50%);
          }

          #afdm-reader-nav-tabmob {
            display: none !important;
          }

          .afdm-reader-missing-chevmob
          {
            display: none;
          }

          .afdm-reader-missing-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-start;
          }

          .afdm-reader-missing-item {
            display: flex;
            align-items: flex-start;
            white-space: nowrap;
          }

          .afdm-reader-missing-btn {
            white-space: nowrap;
            font-size: 14px;
          }
}

@media (max-width: 1024px) 
{
          #afdm-options {
              height: auto;
              overflow: visible;
          }

          /* Supprimer les titres au-dessus des layouts */
          #afdm-options .afdm-layouts-title {
              display: none;
          }

          /* Onglets plats */
          #afdm-options .afdm-tabs {
              border-bottom: 1px solid #ccc;
              margin: 0;
              padding: 0;
          }

          #afdm-options .afdm-tab {
              flex: 1;
              border: none;
              border-radius: 0;   /* plat */
              margin: 0;          /* pas de marge externe */
              background: #f5f5f5;
              font-size: 0.8rem;
          }

          #afdm-options .afdm-tab.active {
              background: #d81919;
              color: #fff;
          }


          #afdm-options .afdm-tab-content {
              height: auto;        /* s’adapte au contenu */
              overflow-y: hidden; /* pas de scroll vertical */
          }

          /* Ligne horizontale de boutons groupes */
          #afdm-options .afdm-groups-bar {
              display: flex;
              flex-direction: row;
              overflow-x: auto;
              gap: 10px;
              padding: 4px 6px 5px;
              -webkit-overflow-scrolling: touch;
          }

          #afdm-options .afdm-group-btn {
              flex: 0 0 auto;
              padding: 6px 10px;
              font-size: 0.8rem;
              background: #f5f5f5;
              border: 1px solid #ccc;
              border-radius: 6px;
              cursor: pointer;
              white-space: nowrap;
          }

          #afdm-options .afdm-group-btn.active {
              background: #d81919;
              color: #fff;
          }

          /* Wrapper des sections : un seul groupe affiché */
          #afdm-options .afdm-layouts-wrapper {
              display: block;
              overflow: visible;
              margin-top: 6px;
              height: max-content;
          }

          #afdm-options .afdm-layouts-wrapper .afdm-layouts-section.active {
              margin-bottom: 0;
              padding-bottom: 0;
          }

          #afdm-options .afdm-layouts-section {
              display: none;
          }

          #afdm-options .afdm-layouts-section.active {
              display: block;
          }

          /* Grille interne horizontale */
          #afdm-options .afdm-layouts-grid {
              display: flex;
              flex-direction: row;
              gap: 10px;
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              padding-bottom: 10px;
          }

          #afdm-options .afdm-layout-thumb {
              flex: 0 0 auto;
              width: 50px;
              text-align: center;
          }

          #afdm-options .afdm-layout-thumb img {
              max-width: 100%;
              height: auto;
              border-radius: 4px;
          }

          #afdm-photo-controls {
              width: 100%;
              display: flex;
              justify-content: center;
              flex-wrap: nowrap;
              margin-bottom: 12px;
          }

          /* La grille photos reste une grille, mais on force un affichage propre */
          /* Photos affichées en ligne avec scroll horizontal (comme les layouts) */
          .afdm-photos-grid {
              display: flex !important;
              flex-direction: row;
              gap: 10px;
              overflow-x: auto !important;
              overflow-y: hidden !important;
              -webkit-overflow-scrolling: touch;
              padding-bottom: 6px;
              margin-top: 0;
          }

          /* Taille des vignettes photo sur mobile (identique aux layouts) */
          .afdm-photo-item {
              flex: 0 0 auto;
              width: 50px; 
              text-align: center;
          }

          .afdm-photo-item img {
              width: 100%;
              height: 100%;
              object-fit: cover;      /* portrait → rempli sans dépasser */
              border-radius: 4px;
              display: block;
          }

          .afdm-text-layout-content {
            overflow: visible !important;
          }

          .afdm-photos-message {
              width: 100%;
              min-width: 100%;
              flex: 0 0 100%;
          }

          #afdm-reader-nav-tabmob {
            display: flex;
            justify-content: space-between !important;
            align-items: center;
            width: 100%;
            margin: 16px 0;
            gap: 12px;
          }

          #afdm-reader-nav-tabmob button {
            appearance: none;
            min-width: 38px;
            height: 38px;
            padding: 0 10px;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 999px;
            background: rgba(255,255,255,0.78);
            color: #333;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.10);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
          }

          #afdm-reader-nav-tabmob button i {
            font-size: 15px;
            line-height: 1;
          }

          #afdm-reader-nav-tabmob button:hover {
            background: rgba(255,255,255,0.92);
            transform: scale(1.04);
            box-shadow: 0 6px 16px rgba(0,0,0,0.14);
          }

          #afdm-reader-nav-tabmob button:disabled {
            opacity: 0.35;
            cursor: default;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transform: none;
          }

          #afdm-reader-nav-pc {
            display: none !important;
          }

          .afdm-reader-missing-nav {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;          
            white-space: nowrap;
            padding-bottom: 4px;            
            box-sizing: border-box;
          }

          .afdm-reader-missing-nav::-webkit-scrollbar {
            height: 6px;                   
          }

          .afdm-reader-missing-nav::-webkit-scrollbar-thumb {
            background-color: #bcbcbc;
            border-radius: 4px;
          }

          .afdm-reader-missing-nav::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
          }

          .afdm-reader-missing-title,
          .afdm-reader-missing-list,
          .afdm-reader-missing-item {
            display: inline;
          }

          .afdm-reader-missing-title {
            margin-bottom: 0;
            white-space: nowrap;
            font-size: 13px;
            line-height: 1.2;
          }       

          .afdm-reader-missing-list {
            white-space: nowrap;
            padding: 0;
            margin: 0;
          }

          .afdm-reader-missing-item {
            white-space: nowrap;
          }

          .afdm-reader-missing-bullet {
            display: none;
          }

          .afdm-reader-missing-item::after {
            content: " | ";
            color: #666;
          }

          .afdm-reader-missing-item:last-child::after {
            content: "";
          }

          .afdm-reader-missing-btn {
            display: inline;
            white-space: nowrap;
            font-size: 13px;
            line-height: 1.2;
          }

          .afdm-comment-box, .afdm-comment-box.afdm-comment-box-readonly {
            font-style: normal !important;
          }
}

@media (max-width: 767px) 
{
        /* Masque la vraie zone de commentaire */
        .afdm-comment-box {
          display: none !important;
          font-size: 5.5px !important;
        }

        .afdm-comment-slot {
          margin-top: 4px !important; 
          font-size: 8px !important;
        }

        /* Texte cliquable */
        .afdm-comment-placeholder {
          display: -webkit-box;
          width: 100%;
          margin-top: 2px !important;
          box-sizing: border-box;
          color: #8f8f8f;
          font-size: 5.5px !important;
          line-height: 1.2em !important;
          font-style: normal !important;
          font-family: "Segoe UI", Roboto, sans-serif;
          text-decoration: none;
          text-align: center;
          cursor: pointer;
          white-space: pre-line;
          word-break: break-word;
          overflow-wrap: break-word;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;          
        }

        /* Correction de l'alignement vertical du texte cliquable sur mobile */
        /*.layout-23 .afdm-comment-placeholder,
        .layout-32 .afdm-comment-placeholder,
        .layout-35 .afdm-comment-placeholder {
          align-self: flex-start !important; /* aligne en haut du conteneur flex 
          margin-top: 10px !important;
          transform: translateY(-4px); /* petit ajustement visuel 
        }*/

        .layout-23 .afdm-comment-placeholder,
        .layout-32 .afdm-comment-placeholder,
        .layout-35 .afdm-comment-placeholder,
        .layout-36 .afdm-comment-placeholder,
        .layout-42 .afdm-comment-placeholder,
        .layout-52 .afdm-comment-placeholder,
        .layout-63 .afdm-comment-placeholder {
          align-self: center !important;
          margin-top: 0 !important;
          transform: none !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 3 !important;
          justify-content: flex-start !important;
          align-items: initial !important;
          text-align: center !important;
        }

        .layout-21 {
            justify-content: flex-start !important; /* ✅ aligne les blocs en haut */
          }

        .layout-26 .afdm-comment-placeholder {
            align-self: center !important;
            margin-top: 0 !important;
            transform: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            white-space: pre-line !important;
            overflow: visible !important;
            -webkit-line-clamp: unset !important;
            line-clamp: unset !important;
            padding: 0 2px !important;
          }

        /* Zone de saisie externe */
        #afdm-comment-editor {
          display: none;
          margin-top: 15px;
          padding: 5px;
          border: 1px dashed #bbb;
          border-radius: 8px;
          background: #fff;
          animation: fadeIn 0.3s ease forwards;
        }

        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-4px); }
          to { opacity: 1; transform: translateY(0); }
        }

        #afdm-comment-editor textarea {
          width: 100%;
          min-height: 80px;
          border: 1px solid #ccc;
          border-radius: 6px;
          font-size: 0.9em;
          padding: 5px;
          box-sizing: border-box;
          font-family: "Segoe UI", Roboto, sans-serif;
        }

        #afdm-comment-editor button {
          margin-top: 8px;
          padding: 6px 14px;
          background: #d81919;
          color: #fff;
          border: none;
          border-radius: 6px;
          cursor: pointer;
        }

        #afdm-comment-editor button:hover {
          background: #b91616;
        }

        .afdm-comment-editor-actions {
          display: flex;
          justify-content: flex-end;
          gap: 8px;
          margin-top: 8px;
        }

        #afdm-comment-cancel {
          background: #d9d9d9 !important;
          color: #555 !important;
        }

        #afdm-comment-cancel:hover {
          background: #b91616 !important;
        }

        .afdm-comment-readonly{
            font-size:13px;
            padding:4px 8px;
        }

        .afdm-book-gestion-actions {
          flex-wrap: nowrap;
          justify-content: center;
        }

        .afdm-book-gestion-actions .afdm-book-button {
          min-width: 42px;
          width: 42px;
          height: 42px;
          padding: 0;
          border-radius: 6px;
          gap: 0;
          flex: 0 0 42px;
        }

        .afdm-book-gestion-actions .afdm-book-btn-text {
          display: none;
        }

        .afdm-book-gestion-actions .afdm-book-button i {
          margin: 0;
          font-size: 16px;
          line-height: 1;
        }

        .afdm-book-gestion-insert {
          flex-direction: column;
          align-items: stretch;
        }

        .afdm-book-gestion-insert .afdm-book-select,
        .afdm-book-gestion-insert .afdm-book-button {
          width: 100%;
        }

        /* Mobile : effet plus léger */
        #pgleft {
          transform: perspective(1000px) rotateY(1deg);
        }

        #pgright {
          transform: perspective(1000px) rotateY(-1deg);
        }

        #pgleft.afdm-turn-next {
          transform: perspective(1000px) rotateY(4deg) translateX(4px) scale(0.994);
        }

        #pgright.afdm-turn-next {
          transform: perspective(1000px) rotateY(-6deg) translateX(-6px) scale(0.992);
        }

        #pgleft.afdm-turn-prev {
          transform: perspective(1000px) rotateY(6deg) translateX(6px) scale(0.992);
        }

        #pgright.afdm-turn-prev {
          transform: perspective(1000px) rotateY(-4deg) translateX(-4px) scale(0.994);
        }

        #afdm-titre-gauche, .afdm-titre-page {
          top: 2px !important;
          right: 4px !important;
          font-size: 8px !important;
          line-height: 1 !important;
          padding: 2px 4px !important;
          max-width: 42% !important;
          box-sizing: border-box;
          text-align: right !important;
          z-index: 20;
        }

        .afdm-text-layout {
          justify-content: center !important;
          align-items: center !important;
          padding: 16px 6px 6px 6px !important;
          overflow: hidden !important;
        }

        .afdm-text-layout-wrapper {
          width: 100% !important;
          height: 100% !important;
          padding: 2px 4px 4px 4px !important;
          box-sizing: border-box;
          display: flex;
          align-items: center !important;
          justify-content: center !important;
        }

        .afdm-text-layout-content {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          max-height: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
          box-sizing: border-box;
          color: #8f8f8f;
          font-size: 5.5px !important;
          line-height: 1.2 !important;
          text-align: left !important;
          white-space: normal !important;
          word-break: break-word;
          overflow-wrap: break-word;
          overflow-y: auto !important;
          overflow-x: hidden !important;
        }
        
        .afdm-text-layout-wrapper-end {
          flex-direction: column;
          align-items: center !important;
          justify-content: center !important;
          gap: 6px !important;
        }

        .afdm-text-layout-content-end {
          max-width: 90% !important;
          text-align: center !important;
        }

        .afdm-text-layout-logo {
          max-width: 46px !important;
        }

        .afdm-hard-cover-front-inner,.afdm-hard-cover-back-inner {
          padding: 12px 10px;
        }

        .afdm-hard-cover-front-title {
          font-size: 16px;
          line-height: 1.1;
          margin-top: 2px;
        }

        .afdm-hard-cover-window {
          width: 62%;
          max-width: none;
        }

        .afdm-hard-cover-front-logo {
          max-width: 46px;
        }

        .afdm-hard-cover-back-text {
          font-size: 8px;
          line-height: 1.2;
          max-width: 90%;
        }

        .afdm-hard-cover-back-url {
          font-size: 8px;
          line-height: 1.15;
        }

        .afdm-hard-cover-back-logo {
          max-width: 70px;
        }

        .afdm-hard-cover-window.is-portrait, .afdm-inside-cover-window.is-portrait {
          width: 58%;
          max-width: none;
        }

        .afdm-hard-cover-window.is-landscape, .afdm-inside-cover-window.is-landscape {
          width: 82%;
          max-width: none;
        }

        .afdm-hard-cover-window.is-square,.afdm-inside-cover-window.is-square {
          width: 62%;
          max-width: none;
        }

        .afdm-inside-cover-comment {
          font-size: 8px !important;
          line-height: 1.2 !important;
          min-height: 22px; 
        }

        #afdm-options .afdm-tab,
        #afdm-options .afdm-tab-off {
          min-height: 32px !important;
          height: 32px !important;
          padding: 4px 8px !important;
          font-size: 12px !important;
          line-height: 1 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #afdm-options .afdm-tab i,
        #afdm-options .afdm-tab-off i {
          font-size: 13px !important;
          margin-right: 4px;
        }


        .afdm-hard-cover-inner-page {
          background: #fff;
        }

        .afdm-photo-placeholder-empty-soft {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
        }

        #afdm-page-gauche[data-type="journal"] .afdm-photo-placeholder {
          background: transparent;
          border: none;
          box-shadow: none;
        }

        #afdm-page-gauche[data-type="journal"] .afdm-photo-placeholder.afdm-journal-photo {
          background: transparent;
          border: none;
          box-shadow: none;
        }

        .afdm-reader-month-nav {
          justify-content: flex-start;
          gap: 12px;
          padding: 0 6px;
        }

        .afdm-reader-month-btn {
          font-size: 13px;
        }

        #afdm-book-gestion {
          gap: 6px;
        }

        #afdm-book-gestion .afdm-book-button,
        #afdm-book-gestion select {
          max-width: 100%;
        }

        .afdm-book-gestion-insert {
          gap: 6px;
          margin-top: 0;
        }

        .afdm-reader-month-nav {
          margin-top: 6px;
        }

        .afdm-reader-missing-nav {
          margin-top: 4px;
        }

        .afdm-reader-month-btn.is-active,
        .afdm-reader-month-btn.is-active:hover,
        .afdm-reader-month-btn.is-active:focus {
          color: #d91818 !important;
        }
}

@media (max-width: 480px) 
{
        #afdm-photo-controls button {
            padding: 6px 10px;
            font-size: 14px;
        }

        .afdm-photos-grid {
            grid-template-columns: repeat(3, 1fr);
        }
}