/* ===== Design tokens ===== */
:root{
  --panel-bg:#ffebec;             
  --ink:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius-xl:1.75rem;
  --shadow-xl:0 1.25rem 3.75rem rgba(31,41,55,.10);
  --edge:1.5rem;   
}               

/* ===== Base / Layout page ===== */
html, body { height:100%; }
body{
  min-height:100svh;              
  display:flex;
  flex-direction:column;
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}

/* ===== Panneau rose ===== */
.panel{
  margin:var(--edge);             
  background:var(--panel-bg);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  flex:1 1 auto;                  
}

.panel__inner{
  padding:clamp(1rem,3vh,2rem);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* ===== Contenu interne ===== */
.layout{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:1.25rem;
  flex:1 1 auto;                  
}

.content{ flex:1 1 auto; min-width:0; }

.content h1{ margin:0 0 .5rem; font-size:2.125rem; }
.content p{ margin:0 0 .75rem; color:var(--muted); }
.content ul{
  list-style:none; padding:0; margin:0;
  border:.0625rem solid var(--border);
  border-radius:.875rem;
  background:#fff; overflow:hidden;
}
.content li+li{ border-top:.0625rem solid var(--border); }
.content a{
  display:block; padding:.625rem .75rem;
  color:var(--ink); text-decoration:none;
}
.content a:hover{ background:#fafafa; }

/* ===== Images latérales ===== */
.side-img{
  flex:0 0 12rem;
  width:12rem;
  height:clamp(12rem,28vh,18rem); 
  object-fit:cover; object-position:center;
  border-radius:1rem;
  background:#fff;
  border:.0625rem solid var(--border);
}

/* ===== Responsive ===== */
@media (max-width:47.5rem){
  .layout{ flex-direction:column; align-items:center; }
  .side-img{ display:none; }
}
@media (max-height:750px){
  .content h1{ font-size:1.75rem; }
}

/* ===== Footer (en dehors du panneau) ===== */
footer{
  margin:0 var(--edge) var(--edge); 
  text-align:center;
  color:var(--muted);
  padding:.75rem 0;
}