:root{
  --bg:#ffffff;
  --paper:#fbfbfb;
  --text:#111;
  --muted:#666;
  --line:#e0e0e0;
  --accent:#222;
  --container:1100px;
  --panel-w:600px;
  font-family: 'karrik', 'karrik', serif;
  font-size:16px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:100%;margin:0 auto;padding:28px}
.site-header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:6px}
.main-title{margin:0;font-size:48px;letter-spacing:0.2px}
.sub-title{margin:8px 0 0;color:var(--muted);font-size:24px;max-width:85%}

/* timeline baseline and steps */
.line-wrap{position:relative;padding:40px 10px 60px;overflow:auto}

.steps{list-style:none;padding:0;margin:0;display:flex;gap:46px;align-items:flex-start;position:relative;z-index:2}
.step{min-width:220px;max-width:250px;padding-top:10px;display:flex;flex-direction:column;align-items:flex-start}
.marker{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-left:0;margin-bottom:8px}
.step-box{background:transparent;padding:6px 0}
.step-title{font-size:15px;margin:0 0 6px;font-weight:700}
.step-text{margin:0;color:var(--muted);font-size:14px;line-height:1.45;text-align:left;max-width:230px}

/* links/cards layout similar to PDF: narrow cards stacked */
.links{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.card {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border-radius:6px;
  background:#fff;
  border:1px solid #eee;
  text-decoration:none;
  color:inherit;

  /* AJOUT POUR L’ANIMATION */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: scale(1.03);               /* léger zoom */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* effet un peu plus "carte surélevée" */
}
.thumb{
  width:120px;
  height:66px;
  border-radius:4px;
  overflow:hidden;
  flex-shrink:0;
  flex-grow:0;
}
.meta{
  flex:1; /* texte prend tout l’espace restant */
  min-width:0; /* important pour que le texte wrap correctement */
}
.meta strong{display:block;font-size:16px}
.meta .muted{font-size:14px;color:var(--muted);margin-top:6px}

/* La card contenant le logo */
.card-logo {
  display: flex;
  flex-direction: column;         /* Logo au-dessus, texte en dessous */
  align-items: center;            /* Centre le logo horizontalement */
  justify-content: center;        /* Centre tout verticalement */
  text-align: center;             /* Centrer le texte aussi */
  gap: 0px;                      /* Espace cohérent entre logo et texte */
}

/* Le conteneur du logo */
.logo {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-color: transparent;
  display: flex;
  align-items: center;            /* Centre VERTICALEMENT l'image */
  justify-content: center;        /* Centre HORIZONTALLEMENT l'image */
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Le SVG ou l'image du logo */
.logo img,
.logo svg {
  width: 40px;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}

/* Zoom au survol */
.logo:hover img,
.logo:hover svg {
  transform: scale(1.15);
}

.logo:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}






/* popup panel styling */
.popup{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
  align-items:flex-start;
  z-index:999;
  background:rgba(0,0,0,0.06);
}
.popup[aria-hidden="false"]{display:flex}
.panel{
  position: relative; /* <-- IMPORTANT : permet à .panel .close d'être positionnée par rapport au panel */
  width:var(--panel-w);
  max-width:94%;
  background:#fff;
  padding:24px;
  height:100%;
  overflow:auto;
  border-left:1px solid #eee;
  box-shadow:-8px 18px 60px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  gap:16px;
}


.panel.left{border-left:none;border-right:1px solid #eee;box-shadow:8px 18px 60px rgba(0,0,0,0.06)}


.panel .close {
  position: absolute;
  top: 14px;
  right: 18px;
  border: 0;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  z-index: 5;
}

/* Si le panel porte .left => croix dans coin haut gauche */
.panel.left .close,
.close.left {
  left: 18px;
  right: auto;
}
/* popup content flex correction */
.popup-content-flex{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.popup-content-flex img{
  max-width:100%;
  height:auto;
  flex-shrink:0;
}
.popup-content-flex .text{
  flex:1;
  min-width:0; /* permet au texte de wrap correctement */
}

/* mobile behaviour */
@media (max-width:900px){
  .steps{flex-direction:column;gap:28px}
  .baseline{display:none}
  .popup{align-items:center;justify-content:center;padding:20px}
  .panel{width:92%;height:auto;max-height:80vh;border-radius:8px}
  .card{flex-direction:row; align-items:center;}
}