/* reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}

 body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
 /* background:#0f172a;
  color:#fff;*/
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:0px 30px 30px 30px;
}


  .title {
    text-align:center;
    margin-bottom:18px;
  }
  #menuIcon {
    position: absolute;
    left: 30px;
    top: 5px;
    font-size: 24px;
    cursor: pointer;
    z-index: 100;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.2s;
  }

  #menuIcon:hover {
    background: rgba(255,255,255,0.1);
  }
  #breadcrumbNav {
    position: absolute;
    left: 30px;
    top: 45px;
    background: #ffffff;
    padding:0.8em 0.5em 1em 0.8em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none;
    z-index: 99;
  }
  #breadcrumbNav a {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    margin: 0 4px;
    font-size:0.9em;
  }
  #breadcrumbNav a:hover {
    color: #60a5fa;
  }
  header {
    position: relative;
  }
  /* Bouton WebP */
.webp-btn {
  position: relative;
  padding-right: 60px; /* espace pour le badge */
}

.webp-btn .webp-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #10b981;       /* vert moderne */
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}
  
  .title .sub {
    display:block;
    font-size:13px;
    margin-top:6px;
    font-weight:600;
  }
  

  @keyframes hue{
    0%{filter:hue-rotate(0deg)}
    100%{filter:hue-rotate(360deg)}
  }

  /* global bloc contenant left + right */
  .global {
    display:flex;
    gap:20px;
    align-items:flex-start;
    justify-content:center;
    background: rgba(255,255,255,0.03);
    padding:1em;
    border-radius:14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
   .area_page {
    display:flex;
    gap:20px;
    align-items:flex-start;
    justify-content:center;
    background: rgba(255,255,255,0.03);
    padding:1em;
    border-radius:14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }



.area_page {
  display: block; /* au lieu de flex */
  gap: 20px;
  padding: 1em;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.03);
}

#savedList {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding: 10px 0;
  justify-content: flex-start; /* align à gauche */
  scroll-behavior: smooth;
}

.savedItem {
  background: #ffffff;    /* fond blanc */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* légère ombre */
  padding: 10px;
  text-align: center;
  min-width: 140px;       /* largeur fixe pour flotter */
  flex: 0 0 auto;         /* empêche le shrink */
  position: relative;
  transition: transform 0.2s;
}

.savedItem:hover {
  transform: translateY(-3px);
}

.savedItem img {
  width: 100%;
  max-width: 120px;
  border-radius: 6px;
  margin-bottom: 6px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.d_none
{
display:none;
}
.savedItem .open-link {
  display: inline-block;
  font-size: 0.85em;
  color: #10b981;
  text-decoration: none;
  margin-bottom: 6px;
}

.savedItem .open-link:hover {
  text-decoration: underline;
}

.savedItem .deleteSave {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.savedItem .deleteSave:hover {
  opacity: 1;
}

/* Masque la scrollbar mais scroll possible */
#savedList::-webkit-scrollbar {
  height: 6px;
}
#savedList::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
#savedList::-webkit-scrollbar-track {
  background: transparent;
}


  /* left 485px */
  .left {
    width:485px;
    min-width: 280px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:14px;
    border-radius:10px;
    display:block;
  }

  /* right 330px */
  .right {
    width:330px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    padding:14px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
  }

#canvasWrapper {
  width: 100%;
  max-height: 200px;     /* hauteur maximale augmentée */
  height: auto;          /* hauteur automatique */
  overflow: auto;        /* scroll auto si texte trop long */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; /* aligné en haut pour voir le début */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: #ffffff;
}

#lecanvas {
  display: block;
  /* Le canvas garde ses dimensions naturelles */
}

  /* controls layout inside left */
  .form-row { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .field {
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
    color:rgba(255,255,255,0.9);
  }
  .field.full { width:100% }
  .field.half { width: calc(50% - 5px); min-width:140px }
  .field.small { width:120px; min-width:110px }
  label { font-weight:600; font-size:12px; color:#f3f4f6 }
  input[type="text"], select, input[type="color"], input[type="range"]{
    border-radius:8px;
    border:none;
    padding:8px 10px;
    background: rgba(255,255,255,0.06);
    color:#fff;
    font-weight:600;
    outline:none;
  }
  input[type="range"]{ padding:6px 0; width:100% }
  

  /* right elements */
  .ad-space{
    width:300px;
    height:270px;
    
  }
  .ads_css{display:inline-block;width:300px;height:250px;}
  
	
	


  .right .actions {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
  }



.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.btn {
  width: 100%;
  padding: 12px 14px;
 /* border-radius: 10px;*/
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9em;
  background: #1a73e8; 
  color: #ffffff;
  /*transition: background 0.2s, transform 0.1s;*/
}

.btn:hover {
  background: #1765cc; 
 /* transform: translateY(-1px);*/
}

.btn:active {
  background: #155bb5;
 /* transform: translateY(0);*/
}

/* Supprime les variations précédentes */
.btn.secondary,
.btn.link {
  background: #1a73e8;
  color: #ffffff;
  border: none;
}




  .small-row { display:flex; gap:8px; width:100%; justify-content:center; align-items:center }

/*footer {
  clear: both;
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}*/

.page {
  max-width: 960px;  /* ou la largeur que tu veux */
  margin: 0 auto;    /* centre horizontalement */
  display: flex;
  flex-direction: column;
  gap: 20px;         /* espace entre global et footer */
}
footer {
  width: 100%; max-width: 960px;
  text-align: center;
  
   margin: 100px auto 30px auto;
  background: rgba(255,255,255,0.03);
    padding:22px;
    border-radius:14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#pattern_cont {
  margin-top: 6px;
  width: 100%;
  height: 120px;
  overflow: auto;
  background: rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
#pattern_cont div {
  width: 25px;
  height: 25px;
  background-size: cover;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) inset;
}



  /* responsive rules: screen < 880px */


  /* small visual helpers */

  .label_details { font-size:12px; font-weight:700 }
  
  /* === THEMES === */
body.day-mode {
  background: #ffffff; /* gris clair */
  color: #111827; /* texte sombre */
}

body.day-mode .global {
  background: rgba(0,0,0,0.04);
}

body.day-mode .left,
body.day-mode .right,
body.day-mode footer {
  background: rgba(0,0,0,0.03);
  color: #111827;
}

body.day-mode input,body.day-mode textarea,
body.day-mode select {
  background: rgba(0,0,0,0.06);
  color: #111827;
}

body.day-mode label {
  color: #111827;
}

body.day-mode .btn {
  background: #1a73e8; 
  color: #ffffff;
}

/* mode nuit déjà ton style actuel (défaut) */

/*body.night-mode {
  background: #0f172a;
  color: #ffffff;
}
*/


#textInput {
  min-height: 40px;
  max-height: 220px;
  overflow:auto;
  line-height:1.2;
  font-weight:700;
  font-size:1.6em;

  resize:none;
  padding:8px 10px;
  border-radius:8px;border:none;font-weight:600;
   text-transform: none;
}
  
  

.page_i {
  max-width: 960px;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.03);
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
}

.page_i h2 {
  font-size: 1.2em;
  margin-bottom: 12px;
  text-align: center;
}

.page_i p {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.85);
}

body.day-mode .page_i {
  background: rgba(0,0,0,0.04);
  color: #111827;
}

body.day-mode .page_i p {
  color: #111827;
}
footer {
  max-width: 960px;
  margin: 300px auto 20px auto;
  padding: 20px 22px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: rgba(255,255,255,0.7);
  font-size: 0.85em;
}

footer a {
  color: #60a5fa; /* bleu clair */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s, text-shadow 0.2s;
}

footer a:hover {
  color: #2dd4bf; /* turquoise */
  text-shadow: 0 0 5px rgba(45,212,191,0.5);
}

body.day-mode footer {
  background: rgba(0,0,0,0.04);
  color: #111827;
}

body.day-mode footer a {
  color: #1a73e8;
}

body.day-mode footer a:hover {
  color: #0b54c2;
}
/* couleur du texte du label_details selon le thème */
.label_details {
  color: #ffffff; /* par défaut, nuit */
}

body.day-mode .label_details {
  color: #000000; /* jour */
}

 header {
  display: flex;
  flex-direction: column; /* empile l'image et le h1 verticalement */
  align-items: center; /* centre horizontalement */
  background: rgba(0,0,0,0.04);
  border-radius: 14px;
  padding: 10px 20px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.5em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

header img {
  display: block;
  height: auto;
  max-width: 100%;
}

header h1 {
  font-size: 0.8em;
  margin: 0 0 0 0; /* petit espace au-dessus du h1 */
  white-space: nowrap;
}

  @media (max-width: 880px) {
    #menuIcon {
      left: 20px;
      top: 5px;
    }
    
    #breadcrumbNav {
      left: 20px;
      top: 45px;
    }


  #textInput {
  font-size:1.4em;
	}
  
    body{padding:12px}
    .page{max-width:960px}
    .global{
      flex-direction:column;
      gap:14px;
      padding-left:1em;
      padding-right:1em;
      padding-top:0.5em;
      padding-bottom:1em;
    }
    
    header img {
  display: block;
  height: auto;
  max-width: 80%;
}

    
    .left, .right { width:100% !important; }
    .right { align-items:stretch; }
    #pattern_cont { width:100%; }
    
    #pattern_cont {
  width: 100%;
  height: 80px;
}
    
    
    .ad-space { width:100%; max-height:300px; }
    
    .ads_css{
	width:100%;text-align:center;margin:0 0 0 0;
	}
    
    .btn { max-width:100%; }
  }