* { box-sizing: border-box; }

/* ===== Base ===== */
:root{
  --indigo:#6d28d9;
  --indigo-dark:#5b21b6;
  --indigo-ink:#4b2b78;
  --surface:#ffffff;
  --muted:#f3f4f6;
  --muted-2:#eef2ff;
  --line:#e5e7eb;
  --active-bg:#f6f2fb;
}

html, body { height: 100%; }

body{
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0;
  margin-top: 70px; /* compensé par .topheader fixe */
  background: #ddd;
  color:#111827;
}

a{
  text-decoration:none;
  color: var(--indigo-ink);
}
a:hover{ text-decoration: underline; }

/* ===== Header/logo ===== */
.header{
  height: 100px;
  padding: 5px 0 5px 30px;
  text-align: left;
  background: #c39bd3;
  color:#fff;
}

h2{ color:#a569bd; }
.header h1{ font-size:20px; }

/* ===== Top bar ===== */
@media screen and (max-width: 768px) {
  .titre_header {
    display: none;
  }
}
.topheader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 20px;
  background-color:#a569bd;
  color:#fff;
  font-size:14px;
  z-index: 1000;
}
.topheader h2,
.topheader p{ color:#fff; text-align:left; margin:0; }

/* ===== Navbars ===== */
.navbar,
.navbar2{
  overflow:hidden;
  background-color:#a569bd;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  font-size:12px;
}

.navbar2{ height:70px; }

.navbar a,
.navbar2 a{
  float:left;
  display:block;
  color:#fff;
  text-align:center;
  padding:14px 20px;
  text-decoration:none;
}

.navbar2 a{
  height:70px;
  line-height:35px;
}

/* Alignement à droite */
.navbar a.right, .navbar2 a.right{ float:right; }

/* Hover / Active */
.navbar a:hover, .navbar2 a:hover{ background:#ddd; color:#000; }
.navbar a.active, .navbar2 a.active{ background:#666; color:#fff; }

/* ===== Layout principal ===== */
.row, .row2{
  display:flex;
  flex-wrap: wrap;
  width:100%;
  margin-top: 70px; /* si utilisé sans .topheader, ajuster */
  background:#fff;
}
.row2{ background:transparent; }

.row p, .row2 p{ font-size:12px; }
.footer p{ font-size:10px; }

.side, .side2{
  flex: 10%;
  background:#f1f1f1;
  padding:20px;
  height:auto;
}

/* Flottants d’infos */
#myDiv, #myDiv2{
  opacity:1;
  transition: opacity .5s;
  position: fixed;
  right: 20px;
  background-color: transparent;
  color: white;
  padding: 10px 20px;
  font-size: 24px;
  z-index: 999;
}
#myDiv{ bottom:20px; }
#myDiv2{ bottom:80px; }

/* Colonnes principales */
.main{
  flex: 70%;
  background:#fff;
  padding:20px;
  min-height:85vh;
  overflow-x:auto;
}
.main2{
  flex:1;
  padding:20px;
  background:#fff;
  min-height:85vh;
  border-right: 1px solid var(--line);
}
.main3{
  flex:1;
  padding:20px;
  background:#fff;
  min-height:85vh;
}
.maintot{
  flex:1;
  background:#fff;
  padding:20px;
  min-height:85vh;
  overflow-x:auto;
  width:100%;
}
.main4{
  width: 220px;
  background: var(--surface);
  min-height: 80vh;
  border-right: 1px solid var(--line);
}
.main5{
  width:600px;
  background:#fff;
  padding:10px;
  min-height:85vh;
  overflow-x:auto;
  margin:0 auto;
}
.editeur{ display:inline-block; width:50%; }
.main p{ font-size:14px; }

.fakeimg{ background:#aaa; width:100%; padding:20px; }
.tab{ overflow-x:auto; }

/* ===== Footer ===== */
.footer{
  padding:5px;
  text-align:center;
  background:#ddd;
}

/* ===== Responsive ===== */
@media (max-width:700px){
  .row, .row2{ flex-direction:column; }
  .main4{ width:100%; min-height:auto; border-right:none; border-bottom:1px solid var(--line); }
  .main5{ width:100%; padding:10px; }
  .main2, .main3, .maintot{
    width:100%; min-height:auto; border-right:none; border-top: 1px solid #a569bd;
  }
  .editeur{ display:block; width:100%; }
  .main4 a{ float:none; width:100%; }
  #horaire{ display:none; }
  .side{ display:none; }
  .navbar a:not(:first-child){ display:none; }
  .navbar a.icon{ float:right; display:block; }
  .main4 a:not(:first-child){ display:none; }
  .main4 .icon{ display:block; padding-top:15px; }
  .navbar.responsive{ position:relative; }
  .navbar.responsive .icon{ position:absolute; right:0; top:0; }
  .navbar.responsive a{ float:none; display:block; text-align:left; }
  .main4.responsive{ position:relative; }
  .main4.responsive .icon{ position:relative; }
  .main4.responsive a{ float:none; display:flex; text-align:left; padding-top:15px; }
  .affiche{ width:90%; }
  .topheader h2{ font-size:14px; }
}

/* ===== Logo ===== */
#logo{ float:left; padding-right:20px; height:60px; }
.imgcenter{ display:flex; justify-content:center; }

/* ===== Formulaires ===== */
input[type=text],
input[type=password],
input[type=date],
input[type=number],
input[type=email],
select,
textarea,
input[type=file]{
  width:50%;
  padding:5px;
  background:#f8f9f9;
  font-size:12px;
  appearance:none;
  resize:none;
  font-family:inherit;
  line-height:1.3em;
}

input.input2[type=text],
input.input2[type=number]{
  width:100px;
  padding:5px;
  background:#f8f9f9;
  font-size:12px;
  appearance:none;
  resize:none;
}

@media (max-width:700px){
  input[type=text],
  input[type=password],
  input[type=date],
  input[type=number],
  input[type=email],
  select,
  textarea{ width:100%; }
}

input.annuaire[type=text]{
  width:50%;
  padding:5px;
  background:#f8f9f9;
  font-size:12px;
  appearance:none;
  resize:none;
}

@media (max-width:700px){
  input.annuaire[type=text]{ width:100%; }
}

input[type=text]:focus,
input[type=password]:focus{ background:#d7dbdd; }

label{
  cursor: default;
  font-size:14px;
  color:#4a235a;
  display:block;
  width:250px;
  float:left;
}

/* Formulaires stylés */
.formulaire_connected{
  width:100%;
  background:#fff;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  padding:40px;
}
.formulaire_connected .button4{
  width:125px;
  padding:10px;
  background:#a569bd;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition: background-color .3s ease;
}

.number-inputs-container{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}
.number-inputs-container .input-group{
  flex:1;
  margin-right:15px;
}
@media (max-width:700px){
  .number-inputs-container .input-group{
    flex-basis:100%;
    margin-right:0;
  }
}

.formulaire_connected input[type="email"],
.formulaire_connected input[type="date"],
.formulaire_connected input[type="text"],
.formulaire_connected input[type="password"],
.formulaire_connected input[type="time"],
.formulaire_connected input[type="file"],
.formulaire_connected input[type="number"],
.formulaire_connected input[type="tel"],
.formulaire_connected select,
.formulaire_connected textarea{
  width:100%;
  padding:5px;
  margin-bottom:10px;
  border:none;
  border-bottom:1px solid #ccc;
  background-color:transparent;
  outline:none;
  font-size:14px;
}

.formulaire_connected label{
  display:block;
  font-size:14px;
  font-weight:300;
  margin-bottom:5px;
  color:#000;
  width:100%;
}

.inscription-formulaire{
  width:100%;
  background:#fff;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  padding:10px;
}
.inscription-formulaire input[type="email"],
.inscription-formulaire input[type="text"],
.inscription-formulaire input[type="password"]{
  width:100%;
  padding:5px;
  margin-bottom:10px;
  border:none;
  border-bottom:1px solid #ccc;
  background:transparent;
  outline:none;
  font-size:12px;
}

.fa-eye, .fa-eye-slash{ font-size:14px; }

.radio-group{ display:flex; gap:10px; }

/* Radios/checkbox custom */
input[type="radio"], input[type="checkbox"]{ display:none; }

input[type="radio"] + label,
input[type="checkbox"] + label{
  background:#f2f2f2;
  color:#333;
  padding:10px 15px;
  border:1px solid #ccc;
  border-radius:5px;
  cursor:pointer;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label{
  background:#a569bd;
  color:#fff;
  border-color:#a569bd;
}

/* Buttons */
.button2{
  background:#a569bd;
  width:100%;
  padding:10px;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition: background-color .3s ease;
  appearance:none;
  font-size:12px;
}
.button2:hover{ background: ghostwhite; color:#000; }

.button3{
  width:100%;
  padding:10px;
  background:#ebdef0;
  color:#000;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition: background-color .3s ease;
  font-size:12px;
}
.button3:hover{ background: ghostwhite; color:#000; }

.button4{
  display:inline-block;
  padding:8px 16px;
  border-radius:6px;
  border:none;
  background:#a569bd;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition: background .2s, transform .1s;
}
.button4:hover{ background:#8e44ad; transform:translateY(-1px); }
.button4:active{ background:#3730a3; transform:translateY(0); }

.button5{
  background: gainsboro;
  border:none;
  color:#000;
  padding:10px;
  text-align:center;
  cursor:pointer;
  font-size:12px;
  width:100%;
  appearance:none;
}
.button5:hover{ background: ghostwhite; color:#000; }

/* Messages */
.success, .error{
  padding:10px;
  width:90%;
  border-radius:3px;
}
.success{ color:green; border:1px solid green; background:#e9f7ef; }
.error{ color:red; border:1px solid red; background:#fadbd8; }

@media (max-width:700px){
  .error, .success{ width:100%; }
}

/* Grids */
.grid-container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  padding:10px;
  font-size:12px;
}
.grid-container2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  padding:10px;
  font-size:12px;
}
.grid-container9{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:4px;
  padding:2px;
  font-size:10px;
  overflow-x:auto;
}
.grid-container10{
  display:grid;
  grid-template-columns: repeat(3, 32.5%);
  gap:5px;
  font-size:10px;
}
.one{ grid-column:1 / 4; grid-row:1; }

.box{
  display:block;
  background: aliceblue;
  border-radius:2px;
  padding:40px;
  color:#1b4f72;
}
.disabled{
  display:block;
  background:#f4f6f6;
  border-radius:2px;
  padding:40px;
  color:#1b4f72;
  pointer-events:none;
  opacity:.33;
}
.disabled4{
  background:#f4f6f6;
  padding:20px;
  color:#1b4f72;
  opacity:.33;
}

.affiche_message{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  font-size:1rem;
  line-height:1.5;
  color:#333;
}
@media (max-width:700px){ .affiche_message{ width:100%; } }

.affiche_pj{
  background:#ebdef0;
  padding:10px 20px;
  width:90%;
  border:1px solid #a569bd;
}

.affiche_message p{ font-size:14px; line-height:1.5; }
.affiche_message ul, .affiche_message li{ font-size:14px; line-height:1.5; }

/* Images & tables */
img{ vertical-align:middle; }

table{ border:none; width:100%; border-collapse: collapse; }
th{
  border-bottom: 2px solid #e3d7f6;
  height:30px;
  color:#999;
  font-size:10px;
  text-align:left;
}
td{
  border-bottom:1px solid #efe8fa;
  height:30px;
  font-size:12px;
}

/* Variantes tables */
.soutien2 th{
  border:1px solid #a569bd;
  height:30px;
  padding-left:10px;
  color:#999;
  text-align:left;
}
.soutien2 td{
  border:1px solid #999;
  height:50px;
  padding: 0 10px;
  text-align:left;
}

table.jdb{ border:1px solid #a569bd; width:250px; text-align:center; }
table.jdb2{ width:90%; }
@media (max-width:700px){ table.jdb2{ width:100%; } }

.grid-container9 h2{ font-size:14px; display:inline; }
.jdb th{ border:1px solid #a569bd; color:#999; text-align:left; }
.jdb p{ font-size:12px; text-align:center; }
.jdb a{ display:block; color:#000; height:100%; cursor:pointer; }
.jdb2 a{ display:block; cursor:pointer; }
.jdb a:focus{ background: ghostwhite; }

.disabled:hover{ color:#000; text-decoration:none; }

/* Icônes sprites (garde le markup existant) */
.masquer a{ background:url(images/masquer.png); display:block; width:19px; height:19px; color:#fff; }
.demasquer a{ background:url(images/demasquer.png); display:block; width:19px; height:19px; color:#fff; }
.modifier a{ background:url(images/modifier.png); display:block; width:19px; height:19px; color:#fff; margin:auto; }
.archiver a{ background:url(images/archiver.png); display:block; width:19px; height:19px; color:#fff; margin:auto; }
.supprimer a{ background:url(images/supprimer.png); display:block; width:19px; height:18px; color:#fff; margin:auto; }
.copier a{ background:url(images/copier.png); display:block; width:19px; height:19px; color:#fff; margin:auto; }
.supprimer2 a{ background:url(images/supprimer.png); display:inline-block; width:19px; height:19px; color:#fff; margin-right:10px; }
.mail a{ background:url(images/mail.png) no-repeat; display:block; width:18px; height:18px; color:#fff; margin:auto; }
.cadenas_ferme a{ background:url(images/cadenas_ferme.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }
.cadenas_ouvert a{ background:url(images/cadenas_ouvert.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }
.pdf a{ background:url(images/pdf.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }
.enregistrer a{ background:url(images/enregistrer.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }
.actualiser a{ background:url(images/actualiser.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }
.excel a{ background:url(images/excel.png) no-repeat; display:inline-block; width:19px; height:19px; margin-right:10px; }

/* ===== Modales ===== */
.modal{
  position: fixed; inset:0;
  background-color: rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform: scale(1.1);
  transition: visibility 0s linear .25s, opacity .25s 0s, transform .25s;
}
.modal2{ display:none; }

.modal-content,
.modal-content2{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  background:#fff;
  padding:1rem 1.5rem;
  width:80%;
  border-radius:.5rem;
}

.close-button{
  float:right;
  width:1.5rem; line-height:1.5rem;
  text-align:center; cursor:pointer; border-radius:.25rem;
  background: lightgray;
}
.close-button:hover{ background: darkgray; }

.show-modal{
  opacity:1; visibility:visible; transform: scale(1);
  transition: visibility 0s linear 0s, opacity .25s 0s, transform .25s;
}

/* Overlays / affiches */
.overlay, .overlay2, .overlay3, .overlay4{
  position: fixed; inset:0;
  background-color: rgba(0,0,0,.5);
  z-index:999999 !important;
  display:none;
}
.overlay2, .overlay4{ display:block; z-index:11 !important; }

.affiche, .affiche2, .affiche3, .affiche4{
  position: fixed;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  background:#fff;
  z-index:20;
  padding:1rem 1.5rem;
  border-radius:.5rem;
  animation: fadeIn .5s;
}
.affiche{ width:60%; display:none; }
.affiche2, .affiche4{ width:60%; display:block; }
.affiche3{
  width:90%; height:90%; display:none; overflow-y:auto;
}
@media (max-width:700px){
  .affiche2{ width:90% !important; padding:20px !important; }
}

/* Animations */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* Liens utilitaires */
.delete-link{ text-decoration:none; color:#000; font-size:14px; }
.delete-link:hover{ color:red; }
.pdf-link{ text-decoration:none; font-size:14px; }
.pdf-link:hover{ color:green; }

/* ===== Switch ===== */
.switch{ position:relative; display:inline-block; width:50px; height:25px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; cursor:pointer;
  background:#ccc; transition:.4s;
  border-radius:20px;
}
.slider:before{
  position:absolute; content:"";
  height:17px; width:17px; left:3px; bottom:4px;
  background:#fff; transition:.4s; border-radius:50%;
}
input:checked + .slider{ background:#a569bd; }
input:focus + .slider{ box-shadow:0 0 1px #2196F3; }
input:checked + .slider:before{ transform: translateX(26px); }

.checkswitch{
  height:25px;
  display:flex; align-items:center; justify-content:left;
  padding-left:10px;
}

.password-input{ position:relative; }
.toggle-password{
  position:absolute; top:50%; right:10px; transform: translateY(-50%);
  cursor:pointer;
}
#password-strength{
  font-size:14px; margin-top:10px; float:left; width:50%;
}
#password-strength.weak{ color:red; }
#password-strength.medium{ color:orange; }
#password-strength.strong{ color:green; }
#passtest{ font-size:14px; margin-top:10px; float:left; width:250px; }

/* PWA banner */
#add-to-home-screen-banner{ display:none; }
@media (max-width:600px){
  #add-to-home-screen-banner{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:9999;
    background: rgba(255,255,255,.9);
    padding:10px; text-align:center;
  }
}

/* TinyMCE */
.mce-content-body{ font-family:Helvetica; font-size:14px; }

/* Boutons topheader */
.logout-btn{
  margin-left:auto;
  height:75px;
  display:flex; justify-content:center; align-items:center;
}
.logout-btn a{
  display:block; height:100%;
  padding:25px 20px; background:#fff; color:#333; text-decoration:none;
}

#refresh-btn, #enfant-btn, #menu-btn, #ajoutenfant-btn{
  display:inline-flex; align-items:center;
  padding:10px;
  background: var(--muted);
  color:#374151;
  border-radius:8px;
  border:1px solid var(--line);
  cursor:pointer;
  box-shadow:none;
}
#refresh-btn:hover, #enfant-btn:hover, #menu-btn:hover, #ajoutenfant-btn:hover{
  background: var(--muted-2);
  border-color:#c7d2fe;
}
#refresh-btn img{ height:20px; }

#enfant-btn{ margin-left:auto; margin-right:20px; padding:5px; }
#menu-btn{ order:2; margin-right:20px; padding:5px; }
#ajoutenfant-btn{
  float:right; display:flex; align-items:center; justify-content:flex-end;
}

/* Icônes utilitaires */
.copy-icon, .translation-icon{
  font-size:20px; color:#8e44ad; cursor:pointer;
}

/* ===== Tooltips ===== */
.tooltip, .tooltip2{ position:relative; cursor:default; }

.tooltip .tooltiptext{
  visibility:hidden;
  width:500px;
  background:#000; color:#fff; text-align:left;
  border-radius:6px; padding:20px;
  position:absolute; z-index:1; top:100%; left:0; margin-left:-20px;
  line-height:1.5em; opacity:0; transition: opacity 1s;
}
.tooltip2 .tooltiptext2{
  visibility:hidden;
  width:500px;
  background:#000; color:#fff; text-align:left;
  border-radius:6px; padding:20px;
  position:absolute; z-index:1; top:0; left:0; margin-left:-600px;
  line-height:1.5em; opacity:0; transition: opacity 1s;
}
.tooltip:hover .tooltiptext,
.tooltip2:hover .tooltiptext2{ visibility:visible; opacity:1; }

/* ===== Grille cartes / contenu ===== */
.contenu_main{
  display:flex; flex-wrap:wrap; justify-content:space-between;
}
.sous_contenu_main{
  width: calc(25% - 10px);
  margin-bottom:20px;
  padding:10px;
  justify-content:center;
}
@media (max-width:700px){
  .sous_contenu_main{ width:100%; }
  .sous_contenu_main .button3{ width:100%; }
}

/* ===== Cards / Tables absences ===== */
.card{
  background:#fff;
  border-radius:5px;
  padding:18px 18px 8px;
  box-shadow: 0 4px 20px rgba(44,10,86,.06);
  margin:22px 0;
}
.card h3{ margin:0 0 14px; font-weight:700; letter-spacing:.2px; }

.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.absences-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:15px;
}
.absences-table thead th{
  position:sticky; top:0;
  background:#faf7ff; color:#4b2b78; text-align:left; font-weight:700;
  padding:12px; border-bottom:2px solid #e3d7f6;
}
.absences-table tbody td{
  padding:12px; border-bottom:1px solid #efe8fa; vertical-align:middle;
}
.absences-table tbody tr:hover{ background:#fbfaff; }
.absences-table tbody tr:hover td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.absences-table tbody tr:hover td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }

.cell-actions{ width:40px; text-align:center; }
.cell-actions .delete-link i{ color:#b54b4b; }
.cell-actions .delete-link i:hover{ color:#8a2d2d; }

.pill{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#f2ecff; color:#4b2b78; font-size:13px; font-weight:600; white-space:nowrap;
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:8px; font-weight:600; font-size:13px;
}
.badge i{ font-size:14px; }
.badge--pending{ background:#fff7e8; color:#9b6b00; }
.badge--rejected{ background:#ffe9e9; color:#a22727; }
.badge--ok{ background:#e8f8ee; color:#1e7a4a; }

.info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:#f1e9ff; color:#5c34a5;
}
.info-btn:hover{ background:#eadfff; }

.legend{
  display:flex; gap:16px; align-items:center; font-size:14px; color:#5a5565;
  border-top:1px dashed #e3d7f6; padding-top:10px; margin-top:8px;
}
.legend .item{ display:inline-flex; gap:8px; align-items:center; }

@media (max-width:700px){
  /*.absences-table thead th:nth-child(3),
  .absences-table tbody td:nth-child(3){ display:none; }*/
  .absences-table{ font-size:14px; }
}

.row-unread{ background:#f6f2fb; }
.table-hint{ margin:8px 0 16px; color:#666; }
.empty-state{
  padding:16px; border:1px dashed #c8c8d0; background:#fafbff; border-radius:10px; color:#555; font-size:12px;
}
.subtitle{ margin:-8px 0 12px; color:#6b7280; font-size:.95rem; }
.info-card__header{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.info-card__title{ margin:0; }
.info-card__meta{ display:flex; gap:12px; align-items:center; color:#6b7280; font-size:.95rem; }
.meta-item i{ margin-right:6px; }
.info-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px; }
.btn-quiet{ background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; cursor:pointer; font:inherit; }
.btn-quiet i{ margin-right:6px; }
.btn-quiet:hover{ background:#eef2ff; border-color:#c7d2fe; }
.info-body{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; }
.info-attachments{ margin-top:18px; }
.section-title{ margin:0 0 8px; }
.attachment{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; text-decoration:none; }
.attachment:hover{ background:#f3f4f6; }

.reply-card{ margin-top:14px; }
.text-right{ text-align:right; }

/* === Sidebar (main4) === */
.main4 nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.main4 nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  transition: background .2s, color .2s;
}

.main4 nav a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #a569bd;
}

.main4 nav a:hover {
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
}

.main4 nav a.active {
  background: #e0e7ff;
  color: #4338ca;
  position: relative;
}
.main4 nav a.active i { color: #4338ca; }

/* === Burger icon (desktop caché) === */
.main4 .icon {
  display: none;
  color: #111827;
  padding: 10px 12px;
  border-radius: 8px;
}
.main4 .icon:hover {
  background: #f3f4f6;
  text-decoration: none;
}
.main4 .icon i {
  font-size: 20px;
  width: 20px;
  text-align: center;
}

/* ===== Sidebar mobile fiable (#myTopnav > nav > a) ===== */
@media (max-width:700px){

  /* 1) Le conteneur sert de référentiel au burger */
  #myTopnav{
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
  }

  /* 2) Nav compact par défaut (menu fermé) */
  #myTopnav nav{
    position: relative;
    display: block;              /* évite l’alignement à côté du burger */
    padding: 8px 12px;
    min-height: 50px;            /* hauteur mini pour le burger */
  }

  /* 3) Tous les liens cachés sauf le burger */
  #myTopnav nav > a{ display: none; }
  #myTopnav nav > a.icon{
    display: block;
    position: absolute;
    right: 4px;                  /* burger un peu plus à droite */
    top: 8px;
    padding: 10px 12px;          /* zone cliquable plus grande */
    border-radius: 8px;
  }
  #myTopnav nav > a.icon:hover{
    background:#f3f4f6; text-decoration:none;
  }

  /* 4) Menu OUVERT : liens en pile + espace sous le burger */
  #myTopnav.responsive nav{
    padding: 56px 8px 14px;      /* top ↑ pour l’icône, sides = 8px (full‑bleed) */
  }
  #myTopnav.responsive nav > a{
    display: flex !important;    /* force au cas d’anciens styles */
    align-items: center;
    gap: 10px;
    padding: 14px 18px;          /* liens plus larges */
    font-size: 16px;
    margin: 6px -8px;            /* étire visuellement jusqu’aux bords */
    border-radius: 10px;
    min-height: 44px;            /* tap-friendly */
  }

  /* 5) Burger reste au-dessus même ouvert */
  #myTopnav.responsive nav > a.icon{
    position: absolute;
    right: 4px; top: 8px;
    margin: 0;
  }
}
/* Si un header fixe masque le début de la section lors du scroll */
#infoSection { 
  scroll-margin-top: 80px; /* adapte à la hauteur réelle de ton header */
}
/* ===== Overlay + modale enfants ===== */
.overlay{
  position: fixed; inset: 0;
  background: rgba(17,24,39,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: none;                 /* cachée par défaut */
  padding: 24px;
}
.overlay.open{                   /* (optionnel) si tu préfères via .open en JS */
  display: flex; align-items: center; justify-content: center;
}

.affiche{
  position: relative;
  width: min(960px, 95%);
  max-height: 80vh;              /* pas plus haut que l’écran */
  overflow: auto;                /* scroll interne si besoin */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 22px 22px 16px;
  animation: modalIn .18s ease-out;
}

/* Titre */
.affiche h2{
  margin: 0 0 14px 0;
  color: #4b2b78;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Close (croix) en haut-droite */
.close-btn{
  position: absolute; right: 12px; top: 12px;
  font-size: 22px; color: #5b21b6;
  cursor: pointer; display: inline-flex !important;
}
.close-btn:hover{ color:#3f1a8a; }

/* Bouton "ajouter enfant" en pill discret à droite du titre */
#ajoutenfant-btn{
  position: absolute; right: 52px; top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 10px;
  background: #f3f4f6; color:#374151;
  border: 1px solid #e5e7eb; border-radius: 12px;
  cursor: pointer; box-shadow: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
#ajoutenfant-btn:hover{ background:#eef2ff; border-color:#c7d2fe; }
#ajoutenfant-btn > a{ display:inline-flex; }

/* Table : plus lisible + header sticky */
.jdb2{
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
}
.jdb2 th{
  position: sticky; top: 0; z-index: 1;
  background:#faf7ff;
  color:#4b2b78;
  text-align: left;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid #e3d7f6;
}
.jdb2 td{
  padding: 10px 12px;
  border-bottom: 1px solid #efe8fa;
  color:#111;                    /* corrige le texte devenu blanc sur fond bleu */
}
.jdb2 tr:nth-child(even){ background: #fcfbff; }
.jdb2 tr:hover{ background:#fbfaff; }

/* Lignes "primaire" (si tu gardes ton style inline #e8f4fd) */
.jdb2 tr[style*="e8f4fd"] td{ color:#111 !important; }

/* Colonne SAF centrée + icône */
.jdb2 td:last-child{ text-align: center; }
.jdb2 td img{ height: 18px; vertical-align: middle; }

/* Wrap horizontal de secours (si la table déborde en petit écran) */
.affiche .table-wrap{ overflow-x:auto; }

/* Animation */
/*@keyframes modalIn{
  from{ transform: translateY(8px) scale(.98); opacity: 0; }
  to  { transform: none; opacity: 1; }
}*/

/* ===== Responsive modal ===== */
@media (max-width:700px){
  .overlay{ padding: 12px; }
  .affiche{ width: 94%; padding: 18px 14px 12px; border-radius: 12px; }
  .affiche h2{ margin-right: 84px; }  /* espace pour les boutons à droite */

  #ajoutenfant-btn{ right: 44px; top: 8px; padding: 7px 9px; }
  .close-btn{ right: 10px; top: 10px; font-size: 20px; }

  .jdb2{ font-size: 13px; }
  /* si tu veux alléger : cacher "Tit." et "Classe" en mobile */
  .jdb2 th:nth-child(2), .jdb2 td:nth-child(2),
  .jdb2 th:nth-child(3), .jdb2 td:nth-child(3){ display:none; }
}

/* =========================
   TOASTS (Connect’ED)
========================= */
.toast-stack{
  position: fixed;
  top: 76px;              /* laisse respirer sous ton header */
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}

.toast{
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.toast.is-in{
  transform: translateY(0);
  opacity: 1;
}

.toast__icon{
  margin-top: 2px;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(4,139,154,.10); /* ton thème */
}

.toast__title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
  color: #0f172a;
}

.toast__msg{
  font-size: 13px;
  line-height: 1.35;
  color: #334155;
}

.toast__close{
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  padding: 2px 6px;
}
.toast__close:hover{ color:#0f172a; }

.toast__bar{
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(0,0,0,.06);
}
.toast__bar::after{
  content:"";
  position:absolute;
  left:0; top:0;
  height:100%;
  width:100%;
  background: rgba(4,139,154,.6);
  transform: scaleX(1);
  transform-origin: left;
}

/* déclenchement */
.toast.toast--running .toast__bar::after{
  transition: transform var(--toast-ttl, 4500ms) linear;
  transform: scaleX(0);
}

/* Variantes */
.toast--success{ border-left: 4px solid #16a34a; }
.toast--success .toast__icon::before{
  content:"\f058"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#16a34a;
}
.toast--error{ border-left: 4px solid #dc2626; }
.toast--error .toast__icon::before{
  content:"\f057"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#dc2626;
}
.toast--warning{ border-left: 4px solid #f59e0b; }
.toast--warning .toast__icon::before{
  content:"\f071"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#f59e0b;
}
.toast--info{ border-left: 4px solid #048B9A; }
.toast--info .toast__icon::before{
  content:"\f05a"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#048B9A;
}

@media (max-width: 768px){
  .toast-stack{ top: 66px; right: 10px; }
}