body {

  background-color: #e6faf9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23bfdad9' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
  }
  
  /* Conteneur principal avec fond uni */
.main, .content, .wrapper {
  background: var(--background); /* couleur claire du thème */
  border-radius: 8px;            /* arrondir un peu les coins */
  padding: 2rem 2rem 0rem 2rem;      /* respirer autour du texte */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* petit effet flottant */
}

/* 🌚 Thème sombre */
@media (prefers-color-scheme: dark) {
  body {
    
    background-color: #082a36;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%233ddc84' fill-opacity='0.13' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");

  }
  
  .main, .content, .wrapper {
    background: #0d3c4a;   /* variante sombre */
    color: #3DDC84;        /* texte clair */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
}

/* =========================================================
   ✍️ TYPOGRAPHIE GLOBALE
   ========================================================= */
body {
  line-height: 1.7;
  color: var(--text);
}

h1, h2, h3 {
  font-family: "Space Mono", monospace;
  line-height: 1.3;
  color: var(--titres);
}

h1 {
  font-weight: 600;
  font-size: 1.6rem;
}

h2, h3 {
  font-weight: 400;
  font-size: 1.4rem;
}

p, li, blockquote {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  color: var(--text);
}

.meta, .rubrique {
  font-family: "Manrope", sans-serif;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--lilas);
  letter-spacing: 0.05em;
}

/* =========================================================
   ✨ LIENS & ÉLÉMENTS GÉNÉRAUX
   ========================================================= */
a {
  color: var(--color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-light);
}

.figure {
  margin: 2rem auto;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure--small {
  max-width: 360px;
}

.figure--medium {
  max-width: 720px;
}

.figure--full {
  max-width: 1200px;
}

.figure--left {
  margin-left: 0;
  margin-right: auto;
}

.figure--center {
  margin-left: auto;
  margin-right: auto;
}

.figure--right {
  margin-left: auto;
  margin-right: 0;
}

.figure-caption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary, #666);
}

.figure-caption.left {
  text-align: left;
}

.figure-caption.center {
  text-align: center;
}

.figure-caption.right {
  text-align: right;
}

@media (max-width: 700px) {
  .figure {
    margin: 1.5rem auto;
  }

  .figure--small,
  .figure--medium,
  .figure--full {
    max-width: 100%;
  }

  .figure-caption {
    font-size: 0.9rem;
  }
}

figure figcaption {
  margin-top: 0.1rem;
  padding: 0.15rem 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
}

figure.filter {
   filter: sepia(1) hue-rotate(210deg) brightness(1.05);
}

@media (prefers-color-scheme: dark) {
  figure.filter {
    filter: sepia(1) hue-rotate(90deg) brightness(1.05);
  }
}

/* =========================================================
   🔝 EN-TÊTE DU SITE
   ========================================================= */
.top-banner {
  background: var(--accent);
  text-align: center;
  padding: 0.5rem 1rem;
}

.top-banner a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.top-banner a:hover {
  color: var(--color);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* =========================================================
   🧭 TITRE DU SITE & SOUS-TITRE
   ========================================================= */
.site-title a {
  font-family: "Space Mono", monospace;
  font-size: 1.1em;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.site-title a::before {
  content: "[";
  color: var(--accent);

}


.site-title a::after {
  content: "_";
  animation: blink 1s step-start infinite;
  color: var(--accent);
}

.site-title a:hover,
.site-title a:hover::after {
  color: var(--titlesite);
}

.site-title a:hover::before {
  color: var(--glitch);

}

.site-subtitle {
  color: var(--accent);
  margin-top: 0.3rem;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-color-scheme: dark) {

.site-title a {
  font-family: "Space Mono", monospace;
  font-size: 1.1em;
  letter-spacing: 0.01em;
  color: var(--lilas);
}

.site-title a::before {
  content: "[";
  color: var(--lilas);

}


.site-title a::after {
  content: "_";
  animation: blink 1s step-start infinite;
  color: var(--lilas);
}

.site-title a:hover,
.site-title a:hover::after {
  color: var(--titlesite);
}

.site-title a:hover::before {
  color: var(--glitch);

}

.site-subtitle {
  color: var(--lilas);
  margin-top: 0.3rem;
}

@keyframes blink {
  50% { opacity: 0; }
}

}


/* =========================================================
   📚 NAVIGATION DU VOLUME & INTRO
   ========================================================= */


.volume-nav a,
.read-more {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 3px;
  background: var(--background-card);
  color: var(--text);
  border: 1px solid var(--lilas);
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.25s ease-in-out;
  cursor: pointer;

  &:hover {
    transform: translateY(-1px);
  }

  &:active {
    transform: scale(0.97);
  }
}

/* Variante pour le lien "Read more" */
.read-more {
  margin-top: 10px;
  text-align: center;
  background: var(--background-card);
  border: 1px solid var(--lilas);
  color: var(--accent);

  &:hover {
    background: var(--accent);
    color: var(--text-light);
    border-color: var(--accent);
  }
}

.rubrique-intro {
  font-style: italic;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--background-alt);
  border-left: 4px solid var(--accent);
  color: var(--text);
}

/* =========================================================
   📖 STRUCTURE DES ARTICLES
   ========================================================= */
.feature-article {
  margin-bottom: 2rem;
}

/* =========================================================
   🎯 CARTE VEDETTE (ARTICLE MISE EN AVANT)
   ========================================================= */
.card-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  background: var(--background-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.card-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  
}

@media (prefers-color-scheme: dark) {
  .card-feature img:hover {
    filter: sepia(1) hue-rotate(90deg) saturate(1.2) brightness(1.1) contrast(1.05);
  }
}

.card-feature img:hover {
  filter: sepia(1) hue-rotate(210deg) brightness(1.15);
  transition: filter 0.4s ease;
}

.card-feature .content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-feature .rubrique {
  display: inline-block;
  background: rgba(154, 78, 221, 0.1);
  color: var(--lilas);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

/* Titres et contenu */
.card-feature h1 {
  font-family: "Space Mono", monospace;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--color);
  margin: 0.2em 0 0.3em;
  line-height: 1.3;
}

.card-feature h2 {
  font-family: "Space Mono", monospace;
  font-style: italic;
  font-weight: 400;
  color: var(--cuivre);
  opacity: 0.7;
  font-size: 1.1rem;
  margin-bottom: 1em;
}

.card-feature .excerpt {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
  margin-top: 0.5em;
  text-align: justify;
}

.card-feature .meta {
  color: var(--border-dark);
  font-size: 0.9rem;
  margin-top: 1.2em;
  opacity: 0.8;
}

.card-feature .meta a {
  color: var(--lilas);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.card-feature .meta a:hover {
  text-decoration: none;
}

/* =========================================================
   📚 GRILLE DES AUTRES ARTICLES
   ========================================================= */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--background-card);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  opacity: 0.95;
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


@media (prefers-color-scheme: dark) {
  .card img:hover {
    filter: sepia(1) hue-rotate(90deg) saturate(1.2) brightness(1.1) contrast(1.05);
  }
}

.card img:hover {
  filter: sepia(1) hue-rotate(210deg) brightness(1.15);
  transition: filter 0.4s ease;
}


.card-text {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-text .rubrique {
  display: inline-block;
  background: rgba(154, 78, 221, 0.1);
  color: var(--lilas);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.card-text h2 {
  font-family: "Space Mono", monospace;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color);
  line-height: 1.3;
  margin: 0.3em 0 0em;
}

.card-text .subtitle {
  font-family: "Space Mono", monospace;
  font-style: italic;
  font-weight: 400;
  color: var(--color);
  opacity: 0.7;
  font-size: 0.95rem;
  margin: 0em 0 0.2em;
}


.card-text .excerpt {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0.3rem 0 0.2rem;
  text-align: justify;
}

.card-text .meta {
  font-size: 0.8rem;
  color: var(--lilas);
  opacity: 0.8;
  margin-top: auto;
}

.card .meta a {
  color: var(--lilas);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.card .meta a:hover {
  text-decoration: none;
}


/* ==========================
   Card author
   ========================== */

.articles-grid-author {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card--author-banner {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--background-card);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card--author-banner:hover {
  transform: translateY(-2px);
  opacity: 0.97;
}

.card-banner-link {
  position: relative;
  display: block;
  min-height: 180px;
  text-decoration: none;
  color: inherit;
}

.card-banner-media {
  position: absolute;
  inset: 0;
}

.card-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(50%) brightness(150%);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.card--author-banner:hover .card-banner-media img {
  transform: scale(1.02);
  filter: sepia(100%) hue-rotate(190deg) contrast(50%) brightness(150%);
}

.card-banner-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}

.card-banner-link--noimage {
  background: var(--background-card);
  min-height: auto;
  border: 1px solid var(--border-color);
}

.card-banner-link--noimage::after {
  display: none;
}

.card-banner-overlay {
  position: relative;
  z-index: 2;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
}

.card-banner-title {
  margin: 0;
  color: var(--text-light);
  font-family: "Space Mono", monospace;
  font-size: 1.25rem;
  line-height: 1.25;
}

.card-banner-subtitle {
  margin: 0.35rem 0 0;
  color: var(--text-light);
  opacity: 0.85;
  font-size: 0.95rem;
  font-style: italic;
}

.card-banner-date {
  margin: 0.6rem 0 0;
  color: var(--text-light);
  opacity: 0.7;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.card-banner-link--noimage .card-banner-title,
.card-banner-link--noimage .card-banner-subtitle,
.card-banner-link--noimage .card-banner-date {
  color: var(--text);
}

@media (max-width: 700px) {
  .card-banner-link,
  .card-banner-overlay {
    min-height: 150px;
  }

  .card-banner-overlay {
    padding: 1rem 1.1rem;
  }

  .card-banner-title {
    font-size: 1.1rem;
  }

  .card-banner-subtitle {
    font-size: 0.9rem;
  }
}




/* ==========================
   Card tag
   ========================== */

/* ==========================
   Card tag
   ========================== */

.articles-grid-tag {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card--tag-banner {
  margin-top: 1.5rem;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--background-card);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card--tag-banner:hover {
  transform: translateY(-2px);
  opacity: 0.97;
}

.card-tag-link {
  position: relative;
  display: block;
  min-height: 180px;
  text-decoration: none;
  color: inherit;
}

.card-tag-media {
  position: absolute;
  inset: 0;
}

.card-tag-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(50%) brightness(150%);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.card--tag-banner:hover .card-tag-media img {
  transform: scale(1.02);
  filter: sepia(100%) hue-rotate(190deg) contrast(50%) brightness(150%);
}

.card-tag-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}

.card-tag-link--noimage {
  background: var(--background-card);
  min-height: auto;
  border: 1px solid var(--border-color);
}

.card-tag-link--noimage::after {
  display: none;
}

.card-tag-overlay {
  position: relative;
  z-index: 2;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
}

.card-tag-title {
  margin: 0;
  color: var(--text-light);
  font-family: "Space Mono", monospace;
  font-size: 1.25rem;
  line-height: 1.25;
}

.card-tag-subtitle {
  margin: 0.35rem 0 0;
  color: var(--text-light);
  opacity: 0.85;
  font-size: 0.95rem;
  font-style: italic;
}

.card-tag-authors {
  margin: 0.45rem 0 0;
  color: var(--text-light);
  opacity: 0.9;
  font-size: 0.9rem;
}

.card-tag-author {
  display: inline;
}

.card-tag-date {
  margin: 0.6rem 0 0;
  color: var(--text-light);
  opacity: 0.7;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.card-tag-link--noimage .card-tag-title,
.card-tag-link--noimage .card-tag-subtitle,
.card-tag-link--noimage .card-tag-authors,
.card-tag-link--noimage .card-tag-date {
  color: var(--text);
}

@media (max-width: 700px) {
  .card-tag-link,
  .card-tag-overlay {
    min-height: 150px;
  }

  .card-tag-overlay {
    padding: 1rem 1.1rem;
  }

  .card-tag-title {
    font-size: 1.1rem;
  }

  .card-tag-subtitle {
    font-size: 0.9rem;
  }
}



/* ==========================
   💬 Tooltips
   ========================== */
.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 2px dotted var(--accent);
  color: inherit;
}

.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 250px;
  font-size: 0.9em;
  z-index: 1000;
  white-space: normal;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ==========================
   💬 Chunks
   ========================== */

.chunk {
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background-chunk);
}

/* En-tête cliquable du chunk */
.chunk-summary {
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  font-size: 0.90rem;
  letter-spacing: 0.09em;
  color: var(--accent);
  list-style: none; // enlève le triangle par défaut sur certains navigateurs
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Supprimer le marker par défaut (WebKit) */
.chunk-summary::-webkit-details-marker {
  display: none;
}

/* Flèche à droite */
.chunk-summary::after {
  content: "▾";
  font-size: 1em;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.chunk[open] .chunk-summary {
  border-bottom: 1px solid var(--border);
}

.chunk[open] .chunk-summary::after {
  transform: rotate(180deg);
}

.chunk-body {
  padding: 0.8rem 0.9rem 0.9rem;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  color: var(--text);
}


/* ==========================
   Paragraph highlight
   ========================== */


.p-highlight{
  position: relative;
  margin: 1.2rem auto;
  margin-left: 1.2rem;
  margin-right: 3.2rem;
  padding: 1.2rem 1.9rem 1.2rem 2.0rem;
}

.p-highlight::before{
  content:"";
  position:absolute;
  left:0;
  top:.3rem;
  bottom:.3rem;
  width:2px;
  background: var(--accent);
  border-radius:2px;
}

.p-highlight__content{
  color: var(--text);
  text-align:justify;
  font-size:1.15rem;
  line-height:1.15;
  font-weight:650;
  font-family: "Manrope", sans-serif;
}

.p-highlight__content > p{
  margin:0; /* évite un gros espace si markdown -> <p> */
}

.p-highlight__source{
  margin-top:.8rem;
  font-size:.95rem;
  font-weight:400;
  opacity:.75;
}



/* ==========================
   Citation de l'article
   ========================== */
   
.citation-box {
  margin-top: 3rem;
  padding: 1.2rem;
  border: 1px solid var(--text);
  border-radius: 12px;
  background: var(--background-chunk);
  font-size: 0.9rem;
  color: var(--text);
}

.citation-box strong {
  display: block;
  margin-bottom: 0.6rem;
}

.citation-text {
  margin: 0.5rem 0 1rem;
  line-height: 1.5;
}

.citation-box a {
  color: inherit;
  word-break: break-all;
}



/* boutons */
.citation-copy {
  display: inline-block; 
  border: none;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-right: 8px; 
}

.citation-copy:hover {
  background: #333;
}


/* ==========================
   Licence
   ========================== */


.licence-box {
  margin-top: 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.licence-text {
  margin: 0;
}

.licence-icons {
  display: inline-flex;
  gap: 0.35rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.licence-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.licence-box a {
  color: var(--accent);
}


.licence-box a:hover {
  color: var(--lilas);
}

/* ==========================
   Liste des tags
   ========================== */

.tags-cta {
  padding: 1.5rem;
  text-align: center;
}

.btn-tags {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: var(--background-chunk);
  color: var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-tags:hover {
  opacity: 0.85;
}


.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem;
}

.tag-item {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  color: var(--accent);
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tag-item:hover {
  border-radius: 999px;
  background: var(--background-chunk);
  color: var(--accent-light);
  transform: translateY(-1px);
}



/* ==========================
   Back to top
   ========================== */


html {
  scroll-behavior: smooth;
}

#back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--arrow);
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}



/* ==========================
   TOC
   ========================== */

.toc-box {
  margin: 2rem 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--background-card);
  overflow: hidden;
  color: var(--text);
}

.toc-box summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1rem;
  font-weight: 600;
}

.toc-box summary::-webkit-details-marker {
  display: none;
}

.toc-box summary::after {
  content: "▾";
  float: right;
  transition: transform 0.2s ease;
}

.toc-box:not([open]) summary::after {
  transform: rotate(-90deg);
}

.toc-box__content {
  max-height: 260px;
  overflow-y: auto;
  padding: 0 3rem 1rem;
}

/* Reset des listes */
.toc-box__content ul,
.toc-box__content ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.toc-box__content li {
  margin: 0.35rem 0;
  list-style: none;
}

/* Liens */
.toc-box__content a {
  color: var(--text);
  text-decoration: none;
}

.toc-box__content a:hover {
  text-decoration: underline;
}

.toc-box__content a:visited {
  text-decoration: none;
}

/* Niveau 1 = H1 */
.toc-box__content > nav > ul > li > a,
.toc-box__content > ul > li > a {
  font-weight: 700;
}

/* Sous-niveaux = H2 */
.toc-box__content ul ul {
  margin-top: 0.35rem;
  padding-left: 1rem;
}

.toc-box__content ul ul li a {
  font-weight: 400;
}



/* ==========================
   Boutons bas index
   ========================== */

.rss-list-link a {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  color: #FFA500; 
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.rss-list-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor; 
  display: block;
}

.rss-list-link a:hover {
  opacity: 0.85;
  color: var(--lilas); 
}


/* ==============================================
   Auteur liste
   ================================================ */


.authors-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* ==============================
   👤 ITEM AUTEUR
   ============================== */

.author-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  margin-bottom: 2rem;
}

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

/* ==============================
   📸 PHOTO
   ============================== */

.author-item__photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--accent);
  margin-bottom: 0.75rem;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.author-item:hover .author-item__photo {
  transform: scale(1.05);
  opacity: 0.95;
}

/* ==============================
   🧾 TEXTE
   ============================== */

.author-item__name {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.author-item__count {
  font-size: 0.8rem;
  opacity: 0.6;
  color: var(--text);
}



/* ==========================
   Auteur page
   ========================== */

.author-page {
  width: 100%;
}



/* ==============================
   🎨 HEADER AUTHOR
   ============================== */

.author-header {
  background: var(--accent);
  margin: -2rem;
  margin-bottom: 0.5rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.author-header__inner {
  padding: 1rem 2rem;
}

.author-title {
  margin: 0;
  color: var(--arrow);
}

.author-subtitle {
  margin: 0.4rem 0 0;
  opacity: 0.9;
  color: var(--arrow);
}

/* ==============================
   🧾 INTRO AUTEUR
   ============================== */

.author-intro {
  width: 100%;
}

.author-intro__top--with-photo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

/* ==============================
   📝 TEXTE
   ============================== */

.author-bio {
  margin: 1rem 0;
}

.author-bio p {
  margin: 0;
}

.author-biolongue {
  margin-top: 0;
  width: 100%;
}

.author-biolongue p {
  margin-top: 0;
}

.author-meta {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ==============================
   📸 PHOTO
   ============================== */

.author-intro__profile {
  flex: 0 0 auto;
  margin-left: auto;
}

.author-intro__profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-top: -10rem;
  margin-right: 1rem;
  box-shadow: 0 0 0 0 var(--arrow);
  border: 6px solid var(--accent);
}



.author-email,
.author-siteweb {
  margin: 0.4rem 0;
}

.author-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.25rem;
  flex-wrap: wrap;
}

.author-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.author-social:hover {
  transform: translateY(-2px);
  opacity: 0.85;
  color: var(--arrow);
}

.author-social svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: currentColor;
}
.author-social:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}
.authors-cta {
  margin-top: 3rem;
}

.author-social--web {
  color: var(--background-card);
  background: var(--text);
}

.author-social--email {
  color: var(--background-card);
  background: var(--text);
}

.author-social--orcid {
  color: var(--background-card);
  background: #A6CE39;
}

.author-social--hal {
  color: var(--background-card);
  background: #B03532;
}

.author-social--bluesky {
  color: var(--background-card);
  background: #1185FE;
}

.author-social--mastodon {
  color: var(--background-card);
  background: #6364FF;
}

.author-social--git {
  color: var(--background-card);
  background: #F05032;
}

.authors-cta {
  padding: 1.5rem;
  margin-top: 0rem;
  text-align: center;
}

.btn-authors {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: var(--background-chunk);
  color: var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-authors:hover {
  opacity: 0.85;
}

/* ==============================
   📱 RESPONSIVE
   ============================== */

@media (max-width: 800px) {
  .author-intro__top--with-photo {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-intro__profile {
    display: none;
  }
}



/* =========================================================
   📱 RESPONSIVE
   ========================================================= */

/* 📱 Tablette et petits écrans */
@media (max-width: 940px) {
  .card-feature {
    grid-template-columns: 1fr;
  }

  .card-feature img {
    height: 240px;
    border-radius: 16px 16px 0 0;
  }

  .articles-grid {
    gap: 1.8rem;
  }

  /* 📰 Titres et textes */
  .card-feature h1 {
    font-size: 1.5rem;
  }

  .card-feature h2,
  .card-text h2 {
    font-size: 1rem;
  }
  
  .card-text .excerpt {
     font-size: 0.85rem;
  }

  /* 🏷️ Rubriques et métadonnées */
  .card-feature .rubrique,
  .card-text .rubrique,
  .meta {
    font-size: 0.75rem;
  }

  /* 📖 Titre du volume */
  .volume-title {
    font-size: 1.3rem;
    margin: 0.5rem 0;
  }

  /* 🧭 Titre du site */
  .site-title a {
    font-size: 1.8rem;
  }

  /* 🎨 Bandeau supérieur */
  .top-banner {
    padding: 0.4rem 0.6rem;
  }

  .top-banner a {
    font-size: 0.85rem;
  }

  /* 🧭 Navigation et boutons */
  .volume-nav a,
  .read-more {
    font-size: 0.8rem;
    padding: 5px 10px;
  }

  /* 🖋️ Typo générale */
  body {
    font-size: 0.95rem;
  }

  h1, h2, h3 {
    line-height: 1.25;
  }
  
  .p-highlight__content {
  font-size:1.05rem; 
  }
}

/* 📱 Téléphone */
@media (max-width: 640px) {
  .volume-title {
    font-size: 1.1rem;
  }

  .site-title a {
    font-size: 1.6rem;
  }

  .top-banner a {
    font-size: 0.8rem;
  }

  .card-feature h1 {
    font-size: 1.3rem;
  }

  .card-feature h2,
  .card-text h2 {
    font-size: 1.1rem;
  }

  body {
    font-size: 0.9rem;
  }
  
  .p-highlight__content {
  font-size:1rem; 
  }

  /* 🧩 Centrage des cartes */
  .articles-grid {
    justify-content: center;
    grid-template-columns: 1fr;
  }


}