/* ========================================
   IMPORT TYPOGRAPHIE (Google Fonts)
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ========================================
   PALETTE FAUVE - Henri Matisse
   ======================================== */
:root {
  /* Couleurs Matisse période Fauve */
  --matisse-black: #1a1a1a;           /* Noir profond Matisse */
  --matisse-red: #e63946;             /* Rouge vermillon intense */
  --matisse-orange: #f77f00;          /* Orange cadmium */
  --matisse-yellow: #fcbf49;          /* Jaune vif */
  --matisse-green: #2a9d8f;           /* Vert émeraude */
  --matisse-blue: #457b9d;            /* Bleu outremer */
  --matisse-purple: #6a4c93;          /* Violet profond */
  --matisse-pink: #ff006e;            /* Rose magenta */
  --matisse-cream: #fef9ef;           /* Crème lumineuse */
  --matisse-terracotta: #d4745f;      /* Terre cuite */
  --matisse-turquoise: #06aed5;       /* Turquoise vif */
  --matisse-lime: #a7c957;            /* Vert lime */
  
  /* Variable pour l'effet "Organique" */
  --organic-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* Charte de Couleurs - Inspiration Johannes Vermeer */

:root {
  /* COULEURS PRIMAIRES */
  
  /* Bleu Outremer (Lapis Lazuli) - Profond et apaisant */
  --vermeer-blue: #2A4368;
  
  /* Jaune de Plomb-Étain - Lumineux et doré */
  --vermeer-yellow: #D9B652;
  
  /* Blanc de Plomb - Crème, doux et antique */
  --vermeer-white: #DFDABF;
  
  /* COULEURS SECONDAIRES */
  
  /* Rouge Terre / Vermillon - Chaud et rustique */
  --vermeer-red: #B65C46;
  
  /* Noir de Charbon / Gris Ombre - Pour le contraste */
  --vermeer-dark: #2E3132;
  
  /* Terre d'Ombre - Brun neutre */
  --vermeer-brown: #7F776A;
}


/* ========================================
   STRUCTURE GÉNÉRALE & TEXTURE
   ======================================== */
body {
  font-family: 'Lato', sans-serif; /* Police corps de texte moderne */
  line-height: 1.6;
  padding: 20px;
  color: var(--matisse-black);
  background-color: var(--matisse-cream);
  
  /* TEXTURE : Motif pointillé subtil style papier dessin */
  background-image: radial-gradient(rgba(212, 116, 95, 0.2) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ========================================
   CONTAINERS (Style "Papiers Découpés")
   ======================================== */
section, article, aside, figure {
  background-color: #ffffff;
  padding: 20px;
  margin: 24px 0;
  
  /* Bords organiques et ombres dures (Pop Art) */
  border: 2px solid var(--matisse-black);
  border-radius: var(--organic-radius);
  box-shadow: 6px 6px 0px var(--matisse-terracotta);
  transition: all 0.3s ease;
}

section:hover, article:hover, aside:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--matisse-blue);
}

/* Paragraphs */
p {
  margin: 0 0 1em;
}

/* ========================================
   TITRES (Playfair Display)
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

h1 {
  color: var(--matisse-red);
  background-color: #ffffff;
  padding: 15px 20px;
  border: 2px solid var(--matisse-red);
  box-shadow: 4px 4px 0 var(--matisse-orange);
  border-radius: var(--organic-radius);
  display: inline-block;
}

h2 {
  color: var(--matisse-orange);
  border-left: 6px solid var(--matisse-orange);
  padding-left: 15px;
}

h3 { color: var(--matisse-green); }
h4 { color: var(--matisse-blue); }
h5 { color: var(--matisse-purple); }
h6 { color: var(--matisse-turquoise); }

/* ========================================
   JQUERY ACCORDION - "Étincelant"
   ======================================== */
#accordion, #main-accordion {
  max-width: 1200px;
  margin: 0 auto;
}

#accordion .ui-accordion-header,
#main-accordion .ui-accordion-header {
  background: linear-gradient(135deg, var(--matisse-red), var(--matisse-orange));
  color: #ffffff;
  padding: 16px 20px;
  margin-bottom: 8px;
  cursor: pointer;
  
  /* Style bouton solide */
  border: 2px solid var(--matisse-black);
  border-radius: 8px;
  box-shadow: 4px 4px 0px var(--matisse-purple);
  
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: 1.2em;
  position: relative;
  overflow: hidden; /* Nécessaire pour l'effet shimmer */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* EFFET SHIMMER (Étincelle) */
#accordion .ui-accordion-header::after,
#main-accordion .ui-accordion-header::after,
button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
  z-index: 1;
}

#accordion .ui-accordion-header:hover::after,
#main-accordion .ui-accordion-header:hover::after,
button:hover::after {
  left: 150%;
  transition: 0.7s ease-in-out;
}

#accordion .ui-accordion-header:hover,
#main-accordion .ui-accordion-header:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--matisse-black);
  background: linear-gradient(135deg, var(--matisse-pink), var(--matisse-red));
}

#accordion .ui-accordion-header.ui-accordion-header-active,
#main-accordion .ui-accordion-header.ui-accordion-header-active {
  background: linear-gradient(135deg, var(--matisse-green), var(--matisse-turquoise));
  box-shadow: 2px 2px 0px var(--matisse-black);
  transform: translate(2px, 2px); /* Effet "enfoncé" quand actif */
}

#accordion .ui-accordion-content,
#main-accordion .ui-accordion-content {
  border: 2px solid var(--matisse-black);
  border-top: none;
  border-radius: 0 0 15px 15px;
  padding: 20px;
  background-color: #ffffff;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* Icônes Accordéon */
#accordion .ui-icon,
#main-accordion .ui-icon { display: none; } /* On cache l'icône par défaut jQuery */
#accordion .ui-accordion-header::before,
#main-accordion .ui-accordion-header::before {
  content: "▼";
  float: right;
  font-size: 0.8em;
  margin-left: 10px;
}
#accordion .ui-accordion-header-active::before,
#main-accordion .ui-accordion-header-active::before {
  content: "▲";
}

/* Style léger pour les titres H3 dans l'accordéon principal (pour réinitialiser les marges) */
#main-accordion h3 {
  margin-top: 0; 
  margin-bottom: 0;
  font-family: 'Playfair Display', serif;
}

/* ========================================
   SÉMANTIQUE & ELEMENTS
   ======================================== */
header {
  background-color: #ffe5e5;
  border: 2px solid var(--matisse-red);
  border-radius: var(--organic-radius);
  padding: 20px;
  margin-bottom: 20px;
}

nav {
  background-color: #fff4e6;
  border: 2px solid var(--matisse-orange);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 4px 4px 0 var(--matisse-terracotta);
}

.nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-block;
  }
  #primary-nav {
    display: none;
    margin-top: 10px;
  }
  #primary-nav.is-open {
    display: block;
  }
  #primary-nav a {
    display: inline-block;
    padding: 8px 0;
  }
}

footer {
  background-color: #ecfeff;
  border-top: 4px solid var(--matisse-turquoise);
  padding: 20px;
  margin-top: 40px;
  text-align: center;
  font-family: 'Playfair Display', serif;
}

/* ========================================
   TEXTE INLINE & LIENS
   ======================================== */
strong { color: var(--matisse-red); }
em { color: var(--matisse-purple); font-family: 'Playfair Display', serif; }
mark {
  background-color: var(--matisse-yellow);
  padding: 2px 8px;
  border-radius: 8px 4px 10px 2px; /* Surlignage organique */
}

a {
  color: var(--matisse-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--matisse-turquoise);
  font-weight: 700;
  transition: all 0.2s;
}

a:hover {
  color: #ffffff;
  background-color: var(--matisse-pink);
  border-bottom-color: var(--matisse-pink);
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--matisse-black);
}


        .link {
            display: inline-block;
            background: linear-gradient(135deg, #F2A413 0%, #D92B3A 100%);
            /* Dégradé doré-rouge */
            color: #a9c5d6 !important;
            /* Texte sombre sur fond clair */
            font-weight: bold !important;
            border: 2px solid #F2A413;
            padding: 8px 16px;
            margin: 0 5px;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(242, 164, 19, 0.3);
        }

        .link:hover,
        .link:visited:hover {
            background: linear-gradient(135deg, #2A62A6 0%, #1E88E5 100%);
            /* Dégradé bleu au survol */
            color: #c78f4a !important;
            border-color: #6aade8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4);
            text-decoration: none;
        }



blockquote {
  background-color: #f0fdf4;
  color: var(--matisse-green);
  border-left: 6px solid var(--matisse-green);
  padding: 16px 24px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1em;
  border-radius: 0 10px 10px 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

/* ========================================
   CODE INFORMATIQUE (Style Retro-Terminal)
   ======================================== */
code {
  font-family: 'Fira Code', monospace;
  background-color: var(--matisse-cream);
  border: 1px solid var(--matisse-orange);
  color: var(--matisse-red);
  padding: 2px 6px;
  border-radius: 4px;
}

pre {
  background-color: var(--matisse-black);
  color: var(--matisse-lime);
  padding: 16px;
  border-radius: 8px;
  border: 2px solid var(--matisse-green);
  box-shadow: 6px 6px 0 var(--matisse-green);
  overflow-x: auto;
}

/* ========================================
   FORMULAIRES (Style Pop)
   ======================================== */
input[type="text"],
input[type="email"],
textarea,
select {
  background-color: #ffffff;
  border: 2px solid var(--matisse-black);
  /* Coins asymétriques légers pour garder la lisibilité */
  border-radius: 4px 10px 4px 8px; 
  padding: 10px;
  font-family: 'Lato', sans-serif;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  transition: all 0.2s;
  width: 100%;
  box-sizing: border-box;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--matisse-blue);
  box-shadow: 4px 4px 0 var(--matisse-pink);
  transform: translate(-1px, -1px);
}

/* BOUTONS AVEC EFFET SHIMMER */
button {
  background-color: var(--matisse-turquoise);
  color: #ffffff;
  border: 2px solid var(--matisse-black);
  padding: 10px 24px;
  /* Forme organique prononcée */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: 1em;
  margin: 8px;
  box-shadow: 4px 4px 0 var(--matisse-black);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--matisse-pink);
  transform: translate(-2px, -2px); /* Le bouton monte */
  box-shadow: 6px 6px 0 var(--matisse-black); /* L'ombre grandit */
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0 var(--matisse-black);
}

button[type="submit"] { background-color: var(--matisse-green); }
button[type="reset"] { background-color: var(--matisse-orange); }

/* ========================================
   DETAILS / SUMMARY
   ======================================== */
details {
  background-color: #f0f9ff;
  border: 2px solid var(--matisse-blue);
  border-radius: var(--organic-radius);
  padding: 12px;
  margin: 16px 0;
  box-shadow: 4px 4px 0 var(--matisse-blue);
}

summary {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  cursor: pointer;
  color: var(--matisse-blue);
}

/* ========================================
   KATEX (Maths)
   ======================================== */
.katex-display {
  background-color: #faf5ff;
  padding: 20px;
  border: 2px dashed var(--matisse-purple);
  border-radius: 15px;
  box-shadow: 4px 4px 0 rgba(106, 76, 147, 0.2);
}

/* ========================================
   LISTES & TABLEAUX (Zébré)
   ======================================== */
table {
  width: 100%;
  border-collapse: separate; /* Nécessaire pour le border-radius */
  border-spacing: 0;
  border: 2px solid var(--matisse-black);
  box-shadow: 5px 5px 0 var(--matisse-terracotta);
  border-radius: 12px; /* Coins arrondis globaux */
  overflow: hidden;    /* Masque les coins carrés des cellules */
  margin: 16px 0;
}

thead tr {
  background-color: var(--matisse-blue);
  color: #ffffff;
}

th {
  padding: 15px;
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  border-bottom: 2px solid var(--matisse-black);
  letter-spacing: 0.5px;
}

td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background-color 0.2s;
}

/* Alternance des rangées (Zebra Striping) */
tbody tr:nth-child(odd) {
  background-color: #ffffff; /* Blanc pur */
}

tbody tr:nth-child(even) {
  background-color: #fff4e6; /* Crème orangé très pâle */
}

/* Effet "Étincelle" au survol d'une ligne */
tbody tr:hover {
  background-color: #ffe5e5; /* Rosé pâle au survol */
  cursor: default;
}

tbody tr:hover td {
  color: var(--matisse-red); /* Le texte rougit au survol */
}

/* Pied de tableau */
tfoot {
  background-color: var(--matisse-cream);
  font-weight: bold;
  color: var(--matisse-orange);
}
tfoot td { border-bottom: none; }


/* LISTES ZÉBRÉES (UL / OL) */
main ul, main ol {
  list-style-position: inside; /* Puces à l'intérieur pour la couleur de fond */
  padding: 0;
  border: 2px solid var(--matisse-green);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(42, 157, 143, 0.3);
}

main ul li, main ol li {
  padding: 10px 15px;
  margin: 0;
  border-bottom: 1px dashed var(--matisse-lime);
  transition: padding-left 0.2s ease, background-color 0.2s;
}

main ul li:last-child, main ol li:last-child {
  border-bottom: none;
}

/* Alternance des lignes de liste */
main ul li:nth-child(odd), main ol li:nth-child(odd) {
  background-color: #ffffff;
}

main ul li:nth-child(even), main ol li:nth-child(even) {
  background-color: #f0fdf4; /* Vert très pâle */
}

/* Survol interactif */
main ul li:hover, main ol li:hover {
  background-color: var(--matisse-turquoise);
  color: #ffffff;
  padding-left: 25px; /* Petit décalage dynamique */
}

/* Couleurs des marqueurs (puces/chiffres) */
main ul li::marker {
  color: var(--matisse-red);
  font-size: 1.2em;
}

main ol li::marker {
  color: var(--matisse-orange);
  font-weight: bold;
  font-family: 'Playfair Display';
}


/* LISTES DE DÉFINITION (DL) - Style "Carte" */
dl {
  border: 2px solid var(--matisse-purple);
  border-radius: var(--organic-radius);
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(106, 76, 147, 0.2);
  background-color: #ffffff;
}

dt {
  background-color: var(--matisse-purple);
  color: #ffffff;
  padding: 8px 15px;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
}

dt:first-child { border-top: none; }

dd {
  margin: 0;
  padding: 12px 20px;
  color: var(--matisse-black);
}

/* Alternance sur les paires DT/DD via le DD */
dd:nth-of-type(odd) {
  background-color: #ffffff;
}

dd:nth-of-type(even) {
  background-color: #faf5ff; /* Violet très pâle */
}

/* ========================================
   TABLEAU TRIABLE & FILTRABLE (Style Matisse)
   ======================================== */

/* Les en-têtes cliquables */
th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 25px; /* Place pour l'icône */
  user-select: none;
  transition: background-color 0.2s;
}

th.sortable:hover {
  background-color: var(--matisse-pink); /* Changement de couleur au survol */
  color: #ffffff;
}

/* Icônes de tri (Flèches) */
.sort-icon {
  font-size: 0.8em;
  margin-left: 8px;
  opacity: 0.5;
}

th.sort-asc .sort-icon::after { content: "▲"; color: var(--matisse-yellow); opacity: 1; }
th.sort-desc .sort-icon::after { content: "▼"; color: var(--matisse-yellow); opacity: 1; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: "⇅"; }

/* La ligne des filtres */
.filter-row th {
  background-color: var(--matisse-cream);
  padding: 8px;
  border-bottom: 2px solid var(--matisse-black);
}

/* Les champs de saisie (Inputs) dans le tableau */
input.column-filter {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--matisse-terracotta);
  border-radius: 4px 8px 4px 6px; /* Forme organique */
  font-family: 'Lato', sans-serif;
  font-size: 0.9em;
  box-sizing: border-box; /* Pour ne pas dépasser de la cellule */
  color: var(--matisse-black);
}

input.column-filter:focus {
  outline: none;
  border-color: var(--matisse-blue);
  background-color: #ffffff;
  box-shadow: 2px 2px 0 rgba(69, 123, 157, 0.2);
}

/* ========================================
   BOUTON RETOUR HAUT (Style "Galet Flottant")
   ======================================== */
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--matisse-red);
  color: #ffffff;
  text-align: center;
  line-height: 50px; /* Centre la flèche verticalement */
  font-size: 1.5em;
  text-decoration: none;
  
  /* Forme organique (Galet) */
  border: 2px solid var(--matisse-black);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  
  /* Ombre Pop */
  box-shadow: 4px 4px 0 var(--matisse-black);
  
  z-index: 1000;
  display: none; /* Caché par défaut */
  overflow: hidden; /* Pour l'effet shimmer */
  transition: all 0.3s ease;
}

/* Effet Shimmer (Étincelle) */
#back-to-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

/* Au survol */
#back-to-top:hover {
  background-color: var(--matisse-orange);
  transform: translateY(-5px) rotate(10deg); /* Petite rotation ludique */
  box-shadow: 6px 9px 0 var(--matisse-purple); /* L'ombre change de couleur et s'allonge */
}

#back-to-top:hover::after {
  left: 100%; /* Déclenche l'étincelle */
}

.mesnotes {
  /* Structure */
  padding: 0px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Georgia', serif; /* Police à empattement recommandée pour ce style */
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;

  /* Couleurs & Dégradé */
  color: var(--vermeer-white);
  /* Dégradé diagonal du Bleu vers le Sombre */
  background: linear-gradient(135deg, var(--vermeer-blue) 0%, var(--vermeer-dark) 100%);
  
  /* Ombre portée douce pour le relief */
  box-shadow: 0 4px 6px rgba(46, 49, 50, 0.3);
}

.mesnotes:hover {
  /* On éclaircit légèrement le dégradé en changeant la position */
  background: linear-gradient(135deg, var(--vermeer-blue) 20%, var(--vermeer-dark) 120%);
  /*box-shadow: 0 6px 12px rgba(42, 67, 104, 0.4);*/
  transform: translateY(-1px);
}

.mesnotes:active {
  /* Une touche de rouge très subtile au clic */
  background: linear-gradient(135deg, var(--vermeer-dark), var(--vermeer-red));
  transform: translateY(1px);
}