/* ============================================================
   Design tokens — palette arbitrée au lot 2 :
   marque #008cba, fond crème, accent #ff884d, neutres chauds.
   Les anciens tokens quasi-doublons (blue-vivid, navy, primary-light)
   sont des alias de la marque, à résorber au fil des lots.
   ============================================================ */
:root {
    /* Marque et accent */
    --color-primary: #008cba;
    --color-primary-dark: #006e93;
    --color-primary-soft: #d2e9f1;
    --color-primary-glow: rgba(0, 140, 186, 0.5);
    --color-accent: #ff884d;
    /* Alias hérités (pointent désormais vers la marque) */
    --color-primary-light: var(--color-primary);
    --color-blue-vivid: var(--color-primary);
    --color-navy: var(--color-primary-dark);
    /* Fonds et texte — défaut : blanc + gris très légers */
    --color-bg-page: #ffffff;
    --color-bg: #ffffff;
    --color-bg-soft: #f6f7f8;
    --color-bg-muted: #eef0f2;
    --color-text: #1f2328;
    --color-text-muted: #68707a;
    /* Neutres */
    --color-border: #e2e5e9;
    --color-border-light: #ebedf0;
    --color-border-mid: #d2d6dc;
    /* Ombres douces */
    --color-shadow: rgba(31, 35, 40, 0.10);
    --shadow-card: 0 1px 3px rgba(31, 35, 40, 0.12);
    /* Polices (auto-hébergées via fonts.css) */
    --font-body: Karma, serif;
    --font-heading: Cormorant, serif;
    --font-system: Arial, Helvetica, sans-serif;
    /* Échelle d'espacement */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
}

body{
    min-height:100vh;
    background-color: var(--color-bg-page);
    color: var(--color-text);
    margin:10px;
}
/* text global */

h1 {
    margin-left:21px;
    margin-top:2px;
    font-family: var(--font-heading);
    font-size: 3.125rem;
    font-weight: normal;
}

h2 {
    background: white;
    border-bottom:1px solid var(--color-primary-soft);
    margin-top:0px;
    padding:20px;
    top:0px;
    font-family: var(--font-heading);
    font-weight: normal;
    text-decoration: none;
    color: black;
    font-size: 2.25rem;
}

h3 {
    font-family: var(--font-heading);
    font-weight: normal;
    font-style: italic;
    font-size: 1rem;
}

h4 {
    font-family: var(--font-body);
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem;
    margin:1px 3px 6px 9px;
}

h4 a{
    color:var(--color-blue-vivid);
    border:1px solid var(--color-blue-vivid);
    padding:3px;
    border-radius:7px;
}

h5{
    font-size: 1.25rem;
    font-family: var(--font-body);
    font-weight: normal;
    font-style: normal;
    margin:1px 3px 6px 9px;
}

h5 a{
    text-decoration:underline;
    color:var(--color-blue-vivid);
}

p {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0px;
}



.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    display:block;
    grid-area: sd;
}

.wrapper {
    display: grid;
    grid-column-gap:3px;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "main main main main main main sd sd sd"
      "main main main main main main sd sd sd"
      "main main main main main main sd sd sd"
      "main main main main main main sd sd sd"
      "main main main main main main sd sd sd"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}

.navbar .menu_button{
    display:none;
}

.footer{
    bottom: 0;
    border-top:1px solid #f2f2f2;
    text-align: center;

}

iframe {
  max-width: 100vw;
  max-height: 56.25vw;
  /* 315/560 = .5625 */
}

/*main news content*/
.acontain {
    text-decoration:none;
    color:black;
    background-color:white;
}

.abc {
    background-color: white;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: 10px 10px 5px var(--color-border-light);
    border:1px solid #80ccff;
    border-radius: 5px;
    padding:10px;
    margin: 20px 10px;
    transition-property: box-shadow border;
    transition-duration: 200ms;
}


.abc:hover {
    box-shadow: 10px 10px 5px var(--color-border-light);
    border: 2px solid #80ccff;
    border-radius: 25px;
}

.grid-container {
  display: grid;
  grid-template-columns: 70% 30%;
  background-color: #2196F3;
  padding: 0px;
}

.grid-item {
    background-color: white;
    padding: 5px;
    font-size: 1.125rem;
    text-align: justify;
}

/*main detail news*/
.main_detail {

    margin-left:20px;
    margin-top:20px;
    border-left: 1px solid var(--color-primary-soft);
    border-bottom: 1px solid var(--color-primary-soft);
    padding : 20px;
    padding-bottom: 50px;
    box-shadow: 1px 1px 10px var(--color-border-light);
}


/* Contrainte de base des contenus riches (club, jeunes, événements…) —
   les pages d'article (.post-detail) la raffinent plus bas. */
.main_detail .textdetail figure {
    max-width: 100%;
    margin: var(--space-4) auto;
}

.main_detail a {
    text-decoration:none;
}

.main_detail td a {
    color:#3c6efa;
}

.main_detail .textdetail img{
    max-width: 100%;
    /* Plafond d'affichage : contient surtout les portraits (900 px de
       fichier), les paysages étant déjà bornés par la colonne. */
    max-height: 32rem;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Cadre : passe-partout blanc + liseré, l'ombre suit plus bas. */
    padding: var(--space-1);
    background: #fff;
    border: 1px solid var(--color-border-mid);
    border-radius: 6px;
    box-shadow:0 4px 10px 0 var(--color-shadow),0 4px 20px 0 rgba(0,0,0,0.19);
    
}

.main_detail .textdetail figcaption{
    color:black;
    border-top:1px solid grey;
    padding:3px;
    box-shadow:0 4px 10px 0 var(--color-shadow),0 4px 20px 0 rgba(0,0,0,0.19);
}
/* calendrier */
.message_top{
    font-family: var(--font-heading);
    color:white;
    padding:7px;
    border-radius:7px;
    background-color:rgba(60, 110, 250, 60);    
}

.young_cal{
    color:#4a9029;
    font-size: 1.0625rem;
    text-decoration:underline;
}

.equipes_cal{
    color:#013e7f;
    font-size: 1.0625rem;
    text-decoration:underline;
}

.event_cal{
    color:#da610a;
    font-size: 1.0625rem;
    text-decoration:underline;
}

.cal_link{
    background: white;
    margin-top:0px;
    padding:20px;
    top:0px;
    font-family: var(--font-heading);
    font-weight: normal;
    font-size: 2.25rem;
    text-align:center
}
.cal_link a{
    border:3px solid var(--color-primary-soft);
    border-radius:9px;
    color:black;
    text-decoration:none;
    padding:12px;
    box-shadow: 1px 1px 10px lightgrey;
}

.cal_link a:hover{
    color:black;
    background-color:lightblue;
}
/*wrapper side*/
.wrapper_side{
    display:grid;
    grid-auto-rows:minmax(100px,auto);
    grid-template-columns:1fr;
    grid-template-areas:
        "une"
        "cal"
        "spon";
        
    margin: 1em;
    grid-row-gap:1em;
 
}
.alaune{
    grid-area:une;
    padding:1em;
    box-shadow: 1px 1px 10px lightgrey;
}

.alaune ul{
    font-family: var(--font-body);
    font-size: 1rem;
    padding:3px;
}

.alaune li{
    font-family: var(--font-body);
    list-style-type: none;
    font-size: 1rem;
    padding: 0px 0px 7px 10px;
    letter-spacing: 0px;

}

.alaune li a:hover {
    border-left:2px solid #ff884d;
    color:var(--color-primary-light);
}


.alaune li a{
    text-decoration:none;
    padding-left:20px ;
    border-left:2px solid var(--color-primary-light);
    color:black;
}

.alaune .toview a {
    border-color:green;
}

.cal_wrap{
    grid-area:cal;
    padding:1em;
    box-shadow: 1px 1px 10px lightgrey;
}

.sponsor{
    grid-area:spon;
    box-shadow: 1px 1px 10px lightgrey;

}
.sponsor li{
    list-style-type: none;
    padding:7px;
    margin:3px;
}

.sponsor li a{
    text-decoration:underline;
    color:black;
}
.sponsor img{
    width:10%;
}

#flex-container {
    display: flex;
    flex-direction: row;

}

#flex-container > .flex-item {
    flex: auto;
    margin:3px;

}

#flex-container > .raw-item {
    width: auto;
    padding:15px;
    margin:3px;

}

.flex-item{
    overflow: auto;
    white-space: nowrap;
}

.flex-item li .closebtn{
    display: none;
}
.flex-item li{
    display: inline;
}

.flex-item li a{
    font-family: var(--font-heading);
    font-weight: normal;
    color: black;
    text-decoration: none;
    line-height: 70px;
    padding: 5px 15px;
    opacity: 0.7;
    border-bottom:1px solid lightgray;
    margin:3px;
}

.flex-item .active{
    border-bottom:3px solid lightblue;
    border-radius:3px;
}

.menu-li a{
    font-size: 1.5rem;
}
.user-li{
    font-size: 1rem;
    float:right;
    display:inline;
    color:blue;
}

.user-li form{
    display:inline;
}

.user-li form button{
    font-family: var(--font-heading);
    font-weight: normal;
    font-size: 1rem;
    background:none;
    border:none;
    cursor:pointer;
    color: black;
    line-height: 70px;
    padding: 5px 15px;
    opacity: 0.7;
    border-bottom:1px solid lightgray;
    margin:3px;
}

.drop-btn{
    font-family:Comfortaa;
    background-color: #99ccff;
    color: white;
    padding: 16px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    margin-left:70px;
    border-radius: 25%;
}
/* ###################################################### */

/*slideshow */

/* Position the image container (needed to position the left and right arrows) */
/* Slideshow container */
.container {
    border:1px solid white;
    position: relative;
    margin: auto;
}
.mySlides img{
  display: block;
  width:70%;
  margin-left: auto;
  margin-right: auto;
}

/* Next & previous buttons */
.prev, .next {
    background-color: rgba(0,0,0,0.3);
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 1.125rem;
    transition: 0.6s ease;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
    display:none;
    position: absolute;
    top: 50%;
    width:100%;
    text-align:center;
    border:1px solid black;
}
.text a{
    display:block;
    text-decoration:none;
    color:white;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #0039e6;
    
}
.text:hover{
    box-shadow: 0 0 10px 5px var(--color-primary-glow);
}
.container:hover .text {
    display:block;
    opacity: 1;
    background-color: #ffd480;
    border:5px solid #00cc99;
    color: #0039e6;
    font-size: 0.9375rem;
    padding: 8px 12px;
    position: absolute;
    top: 45%;
    left: 20%;
    width: 50%;
    text-align: center;
}


.caption-container {
  text-align: center;
  background-color: white;
  border-top:1px solid var(--color-primary-soft);
  margin:1px;
  padding: 2px 16px;
  color: black;
}


/* Six columns side by side */

.column {
    display:inline;
    float: left;
    height: 20%;
    width:20%;
}
.container .row li{
    display:none;
}
/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 1;
}

.demo:hover {
    opacity: 1;
}

/*fin slidshow */


/* ###################################################### */

/* pagination */

.center {
  text-align: center;
}

.pagination {
    display: inline-block;
}

.pagination a {
    background-color: white;
    font-family: var(--font-body);
    color: black;
    float: left;
    margin: 0 4px;
    padding: 16px 32px;
    border-radius: 35px;
    text-decoration: none;
}


.pagination .active {
    background-color:  #0077b3;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: var(--color-border);
    border-radius: 5px;
}


/*equipes*/
.equipes table, td, tr{
    border: 1px solid lightgrey;
}
.alaune .year a{
    text-decoration:none;
    padding-left:20px ;
    color:black;
}

.alaune .year .active {
    text-decoration:underline;
    font-weight: bold;

}
.alaune .team .active {
    text-decoration:underline;
    font-weight: bold;
    border-left:2px solid #ff884d;
}

.alaune .year a:hover{
    color:var(--color-primary-light);
}
.calclaronde{
    font-family: var(--font-body);
    font-size: 1rem;
    margin:20px;
}

.calclaronde li{
    display:inline;
    padding:1em;
}

.calclaronde li a{
    color:black;
}
.cat{
    font-family: var(--font-body);
    font-size: 1.5rem;
}

/*form formulaire*/

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid var(--color-primary);
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    box-shadow: 1px 1px 10px var(--color-border-light);
}

.button1 a{
    color: black;
}
    
.button1:hover {
    background-color: var(--color-primary);
    color: white;
}


input[type=text], [type=email], input[type=password]{
    display: block;
    width: 70%;
    padding: 12px 20px;
    margin: 1px 1px;
    background-color: var(--color-bg-soft);
    font-size: 0.875rem;
    border: 2px solid var(--color-border-mid);
    border-radius: 4px;
}
textarea {
    display:block;
    width: 70%;
    height: 150px;
    padding: 12px 20px;
    border: 2px solid var(--color-border-mid);
    border-radius: 4px;
    background-color: var(--color-bg-soft);
    font-size: 0.875rem;
    resize: none;
}

.module p{
    margin:.7rem;
}
.module textarea {
    display:block;
    width: 85%;
    margin:auto;
    height: 90px;
    padding: auto;
    border: 2px solid var(--color-border-mid);
    border-radius: 4px;
    background-color: var(--color-bg-soft);
    font-size: 0.875rem;
    resize: none;
}

.module input[type=submit] {
    margin:.7rem;
}

input[type=submit] {
    font-family: var(--font-body);
    background-color: white; /* Green */
    border: 2px solid var(--color-primary);
    color: black;
    padding: 16px 32px;
    margin:auto;
    width:auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 20px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: var(--color-primary); 
    color: white; 
    border: 2px solid var(--color-primary);
}


/*table*/

#table_club {
    font-family: var(--font-body);
    border-collapse: collapse;
    width: 100%;
}

#table_club  td, #table_club  th {
    border: 1px solid var(--color-border);
    padding: 8px;
    width: 70px;
}

#table_club tr:nth-child(even){background-color: #f2f2f2;}

#table_club  tr:hover {background-color: var(--color-border);}

#table_club  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #00aaff;
    color: white;
}

.main_detail table, .main_detail td{
    border: 1px solid var(--color-border);
    border-collapse:collapse;
}

.module table, .module td{
    border: 1px solid var(--color-border);
    border-collapse:collapse;
}


/* event */
/*************** etiquette **********************/

.card-container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

}

.visual {

}

.visual img{
    width:100%;
}

.card-event {
    max-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border:1px solid lightgray;
    background: none;
    padding: 0.7rem;
    color:black;
    text-decoration:none;
}

.card-event:hover{
    box-shadow: 0 0 5px 2px var(--color-primary-glow);
}

/* cours */
/*************** etiquette **********************/
.module{
    margin:1rem;
    padding:1rem;
    border:1px solid lightgray;
    border-radius:10px;
    box-shadow:0 4px 8px 0 var(--color-shadow), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}
/*.contents{  
    margin:1rem;
    padding:1rem;
    border:1px solid lightgray;
    border-radius:10px;
    box-shadow:0 4px 8px 0 var(--color-shadow), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}
.contents a{  
    color:var(--color-blue-vivid);
    font-family: var(--font-body);  
}*/

.module li{
    display:inline-block;
}
.module a{  
    color:var(--color-blue-vivid);
    font-family: var(--font-body);  
}
.module img{
    display: block;
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow:0 4px 10px 0 var(--color-shadow),0 4px 20px 0 rgba(0,0,0,0.19);
}
.content-types li{
    display:inline-block;
}

#module-contents li{ 
    display:inline-block;
}

#tips{
    display:none;
}

/* lichess */

.wrapper_board {
    text-align: center;
}
/* chessboard */
.wrapper_board li{
    display:inline-block;
}

.wrapper_board input[type=submit] {
    background-color: #4CAF50;
    width:10rem;
    border: none;
    color: white;
    padding: 12px 12px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

.button_tactic{
    width:10rem;
}
#canvas{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    max-width:540px;
    cursor:pointer;;
    box-shadow:0 4px 10px 0 var(--color-shadow),0 4px 20px 0 rgba(0,0,0,0.19);
}

.wrapper_skills{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 10px;

}
.wrapper_skills input[type=submit] {
    font-family: var(--font-body);
    background-color: white; 
    border: 2px solid var(--color-primary);
    color: black;
    padding: 0;
    width:70%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 0;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    cursor: pointer;
}
.wrapper_skills input[type=submit]:hover {
    background-color: var(--color-primary); 
    color: white; 
    border: 2px solid var(--color-primary);
}
.chess_container {
  width: 100%;
  height:50%;
  background-color: lightgrey;
}

.skills {
    height:50%;   
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}

.finale {width: 34%; background-color: orange;}
.theme {width: 12%; background-color: steelblue;}
.mat {width: 12%; background-color: #078F35;}

#id_content{
    display:block;
}
#id_play_move{
    display:inline-flex;
}
#eval_form li{
  color: black;
  display:inline-block;
}
#lecteur{
    margin-left:50%;
}
#delete_branch{
    float:right;
}

.games_list ol{
    font-family: var(--font-body);
    font-size: 1.3125rem;
    padding:.7rem;
    margin-bottom:1rem;
}
.games_list a{
    color:black;
    padding:0.3rem;
}
.games_list a:hover{
   background-color:lavender;
}

.games_list li{
    padding:0.3rem; 
    margin-bottom:.1rem;
    font-family: var(--font-body);
    list-style-type: lower;
    font-size: 1rem;
    letter-spacing: 0px;
}

/* ============================================================ */
/* lot 2 — accueil : hero, cartes actu, événements, partenaires */
/* ============================================================ */

/* Bandeau d'accueil */
.hero {
    margin: var(--space-4) var(--space-2);
    padding: var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.hero h1 {
    margin: 0 0 var(--space-2) 0;
    font-size: 2.5rem;
    line-height: 1.1;
}

.hero p {
    margin: 0 0 var(--space-4) 0;
    max-width: 38em;
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.btn-join {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 150ms;
}

.btn-join:hover {
    background-color: var(--color-primary-dark);
}

/* Titre de section (l'ex-h1 « Actualité ») */
h2.section-title {
    background: none;
    margin: var(--space-6) var(--space-2) var(--space-2);
    padding: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary-soft);
}

/* Cartes actu */
.post-card {
    margin: var(--space-4) var(--space-2);
}

.post-card > a {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 150ms, border-color 150ms;
}

.post-card.no-thumb > a {
    grid-template-columns: 1fr;
}

.post-card > a:hover {
    border-color: var(--color-primary);
    box-shadow: 0 3px 10px var(--color-shadow);
}

.post-card h3 {
    margin: 0 0 var(--space-1) 0;
    font-family: var(--font-heading);
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.2;
}

.post-card .post-date {
    margin: 0 0 var(--space-2) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.post-card .post-excerpt p {
    margin: 0;
    line-height: 1.5;
}

.post-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    align-self: center;
}

/* Blocs de la sidebar */
.side-block {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}

.side-block h2 {
    background: none;
    margin: 0 0 var(--space-3) 0;
    padding: 0 0 var(--space-2) 0;
    font-size: 1.375rem;
    border-bottom: 2px solid var(--color-primary-soft);
}

/* Liste datée des prochains événements */
.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-list li + li {
    margin-top: var(--space-2);
}

.event-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    text-decoration: none;
    color: var(--color-text);
    border-radius: 6px;
    transition: background-color 150ms;
}

.event-list a:hover {
    background-color: var(--color-primary-soft);
}

.event-date {
    flex: none;
    width: 3rem;
    padding: var(--space-1) 0;
    text-align: center;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    line-height: 1.1;
    font-family: var(--font-body);
}

.event-date .event-day {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
}

.event-date .event-month {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.event-name {
    font-size: 1rem;
    line-height: 1.3;
}

/* Partenaires en logos */
.sponsor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.sponsor-list img {
    max-height: 3rem;
    max-width: 8rem;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 150ms, opacity 150ms;
}

.sponsor-list a:hover img {
    filter: none;
    opacity: 1;
}

/* Footer */
.footer address {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    padding: var(--space-4);
}

/* Burger : caché au-dessus de 820px */
.nav-toggle {
    display: none;
}

/* ============================================================ */
/* lot 2 (extension) — détail d'article                          */
/* ============================================================ */

/* Conteneur : surface carte du nouveau langage. Combiné à
   .main_detail (partagé avec d'autres pages), défini après lui
   pour l'emporter à spécificité égale. */
.post-detail {
    margin: var(--space-4) var(--space-2);
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.post-detail h1 {
    margin: 0 0 var(--space-1) 0;
    font-size: 2rem;
    line-height: 1.15;
}

.post-detail .post-date {
    margin: 0 0 var(--space-4) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Contenu CKEditor : 197 articles existants, HTML libre
   (allowedContent). Le scan recense h2/h3, tableaux, listes,
   169 images avec width inline — d'où les deux !important. */
.post-detail .textdetail {
    line-height: 1.6;
    overflow-wrap: break-word;
}

.post-detail .textdetail h2 {
    background: none;
    margin: var(--space-5) 0 var(--space-3);
    padding: 0 0 var(--space-1) 0;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--color-border-light);
}

.post-detail .textdetail h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-size: 1.25rem;
    font-style: normal;
}

.post-detail .textdetail img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: var(--space-4) auto;
    border-radius: 6px;
    box-shadow: var(--shadow-card);
}

.post-detail .textdetail figure {
    margin: var(--space-4) auto;
    max-width: 100%;
}

.post-detail .textdetail figcaption {
    border-top: none;
    box-shadow: none;
    padding: var(--space-1) 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.post-detail .textdetail table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: var(--space-4) 0;
}

.post-detail .textdetail td,
.post-detail .textdetail th {
    border: 1px solid var(--color-border);
    padding: var(--space-1) var(--space-2);
}

.post-detail .textdetail a {
    color: var(--color-primary);
}

.post-detail .textdetail ul,
.post-detail .textdetail ol {
    margin: var(--space-2) 0 var(--space-3);
    padding-left: var(--space-5);
}

/* Commentaires : coup de peinture uniquement */
.comments-block h2 {
    background: none;
    margin: 0 0 var(--space-3) 0;
    padding: 0 0 var(--space-2) 0;
    font-size: 1.375rem;
    border-bottom: 2px solid var(--color-primary-soft);
}

.comments-block .comment h3 {
    margin: var(--space-3) 0 var(--space-1);
    font-style: normal;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.comments-block .comment p {
    margin: 0 0 var(--space-2);
}

/* Éditeur (django-prose-editor) : images et figures à l'échelle du
   cadre d'édition, comme sur le site public. */
/* Variables attendues par les CSS du paquet (sinon var() invalide →
   fond transparent) : surface d'édition blanche, comme CKEditor avant. */
.prose-editor {
    --body-bg: #ffffff;
    --body-fg: var(--color-text);
    --prose-editor-background: #ffffff;
}

.prose-editor img,
.prose-editor figure {
    max-width: 100%;
    height: auto;
}

.prose-editor img {
    max-height: 32rem;
    width: auto;
}