@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

html {
font-size: clamp(14px, 0.9rem + 0.5vw, 20px);
-webkit-text-size-adjust: 100%;
background: repeating-conic-gradient(#eee 0 25%, #ddd 0 50%)
        0 / 20px 20px;
 margin: 0;
padding:0;     
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding:0; 
}

button {
    padding: 6px 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    background:  navy ;
    font-size: 1.0rem;
}



nav a {
    color: white;
    margin-right: 10px;
    text-decoration: none;
}

.colonnes2 {
column-count: 2;
column-gap: 20px;
column-fill: balance;
width: calc(100% - 20px);
margin: 0 auto;
padding: 0;
list-style-position: inside;
overflow-wrap: break-word;
word-break: break-word;
}

.colonnes2 ul {
	font-size: 1.1rem;
    list-style: none;
    margin: 0 auto;
    /*padding: 60px 0 80px;*/
    width: fit-content;
}
	
	

xxxmain {
    /*padding: 20px;*/
    margin: 0 ;
    padding: 0 2rem; 
 /*   margin-top: -10px;*/
 /*padding-top: 1rem;*/
background:  #f8fcff ;
}

main {
display: flow-root;
margin: 0 !important ;
padding: 0 2rem;
padding-bottom: 10rem;
color: navy;
background:  #f8fcff ;
background:  sepia ;
min-height: 100dvh;
}

main > p:first-child {
    margin-top: 0;
}

/*
main  p{
margin-top : 0 !important ;
background:  lightgreen ;
}
*/

h1, h2, h3, h4, h5, h6 {
font-family: 'Marcellus', serif, system-ui;
}

h1, h2, h3 {
text-align: center;
}


main > h1:first-of-type,
main > h2:first-of-type
{
    margin:0;
    padding:0;
    padding-top: 1rem;
    padding-bottom: 0rem;
    display: block;
    text-align:center;
    /*outline: 1px solid red !important;*/
}




/* Images normales */
main img {
    display: block;
    width: 98%;
    height: auto;
    margin: 1rem auto;
    border: 1px solid gray;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Images pleine largeur */
main img.fullwidth {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

main img.ombre {
    box-shadow: 0 8px 8px -6px rgba(0,0,0,0.4);
}



/* Suppression des marges du paragraphe */
main p:has(> img.fullwidth) {
    margin: 0;
    padding: 0;
    background: green;
}


main pre{
    font-size: 1.0rem;
    padding: 1rem;
    display: flow-root;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;
}


main   code {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: inherit;
}


#htmlSource{
	font-size: 1.1rem  ; 
	padding: 30px  !important;
	padding-bottom: 10rem  !important;
margin:1rem! important; 
   /*display: flow-root;*/
    border:1px solid #ccc; 
    max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
    background: #f5f5f5;
    border: 2px solid #ccc;
    border-radius: 8px;
    display:none;
}



.toolbar {
    margin: 0;
    padding: 0;
    background: blue;
}


/*
p:has(> img.fullwidth) {
    margin-top: 0;
    margin-bottom: 0;
}
*/

/*
.fullwidth {
    display: block;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
}
*/


/*
main p:has(img){
    text-align:center;
      margin:0.5rem 0;
}
*/
main figure{
    text-align:center;
}







/*
.topbar{
position:fixed;
top:0;left:0;right:0;
height:52px;
background: red;
border-bottom:1px solid #ddd;
display:flex;
justify-content:flex-end;
align-items:center;
padding:0 15px;
}
*/
/*
#hamburger{
cursor:pointer;
position:fixed;
top:10px;
right:12px;

margin:0;
padding:8px;

background-color: none;
mix-blend-mode:difference;
color:#ffffff;
line-height:1;
font-size:2.2rem;
border-radius:6px;
box-shadow:0 4px 8px rgba(0,0,0,0.3);
border:2px solid  gold;
border-radius: 8px;
z-index:10000;
text-shadow:0 0 2px rgba(255,255,255,1);
-webkit-text-stroke:0.8px #ffffff;
}
*/


/*
#hamburger{
background-color:rgba(0,0,0,0.22);
box-shadow:0 6px 10px rgba(0,0,0,0.45),0 -4px 8px rgba(255,255,255,0.55);
border:2px solid gold;
border-radius:8px;
color:#fff;
-webkit-text-stroke:1.4px #000;
text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
cursor:pointer;
position:fixed;
top:10px;
right:12px;
padding:8px;
margin:0;
font-size:2.2rem;
line-height:1;
z-index:10000;
}

*/

#hamburger{
background-color:color-mix(in srgb,   beige ,transparent 50%);
box-shadow:0 6px 10px rgba(0,0,0,0.45),0 -4px 8px rgba(255,255,255,0.55);
border:2px solid gold;
border-radius:8px;
/*
color: text-shadow:
    -2px 0 navy,
     2px 0 navy,
     0 -2px navy,
     0 2px navy;;
     */
/*
-webkit-text-stroke:1.4px #000;
text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;*/

text-shadow:
    -2px 0 black,
     2px 0 black,
     0 -2px black,
     0 2px black;
cursor:pointer;
position:fixed;
top:10px;
right:12px;
padding:8px;
margin:0;
font-size:2.2rem;
line-height:1;
z-index:10000;
}

/*
.sidebar{
position:fixed;
top:20px;
left:-42vw;

width:42vw;
max-width:350px;
height:calc(100vh - 40px);
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
padding-top:20px;
padding-bottom:40px;
box-sizing:border-box;
background-color: none
transform:translateX(-100%);
transition:transform 0.4s ease-in-out;
 z-index: 9999;
}

.sidebar::-webkit-scrollbar{
display:none;
}

.sidebar.open{
left:0;
}
*/


.sidebar{
position:fixed;
top:20px;
left:0;
width:42vw;
max-width:350px;
height:calc(100vh - 40px);
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
padding:20px 0 40px 0;
box-sizing:border-box;
background-color: transparent;
transform:translateX(-100%);
transition:transform 0.3s ease-in-out;
z-index:9999;
}

.sidebar::-webkit-scrollbar{display:none;}

.sidebar.open{
transform:translateX(0);
}






.sidebar a{display:block;padding:10px;text-decoration:none;color:#333;}
.sidebar a:hover{background:#eee;}

.menu-navigation{
margin:0 20px 0 0;
padding-top:20px;
padding-bottom:120px;

background-color:lightblue;
border-top:2px solid aliceblue;
border-right:2px solid aliceblue;
border-bottom:2px solid aliceblue;
border-left:none;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
box-shadow:10px 0 15px rgba(0,0,0,0.15), 0 -10px 15px rgba(0,0,0,0.15), 0 10px 15px rgba(0,0,0,0.15);
}

.menu-navigation > ul { 
padding-top: 20px;
list-style:none;
}
/*
.menu-navigation button{
background:none;
border:none;
color:inherit;
font-size:2rem;
cursor:pointer;
padding: 16px;
transition:transform 0.2s;
}
.menu-navigation button:hover{
transform:scale(1.2);
}
*/



.nav-table{
width:100%;
border-collapse:collapse;
margin:10px 0;
color:inherit;
border:none !important;
}
.nav-table td{
text-align:center;
padding:5px 0;
vertical-align:middle;
}
.nav-table tr{
background: none !important;
}

.nav-table button{
background: beige;
border:2px solid gray;
border-radius:10px;
color:inherit;
font-size:24px;
cursor:pointer;
padding:  4px;
display:block;
margin:0 auto;
transition:transform 0.2s;
}
.nav-table tr:nth-child(n+2){
font-size: 12px;
text-transform:uppercase;
opacity:0.7;
}
.nav-table button:hover{
transform:scale(1.2);
}












.treeview{

}

.treeview li > a {
    display: block;
    margin: 0;
    padding: 2px 0;
    line-height: 1.45;
    text-decoration: none;
    color: #212529;
    background: transparent;
}

.treeview details {
    margin: 0;
    padding: 0;
}

.treeview summary {
    display: block;
    margin: 0;
    padding: 2px 0;
    line-height: 1.45;
    cursor: pointer;
    color: #212529;
    list-style: none;
}

.treeview summary::before {
    content: "📁 ";
}

.treeview a::before {
    content: "📄 ";
}

.treeview details > ul {
    margin: 0 0 0 18px;
    padding: 0;
}

.treeview details li {
    margin: 0;
    padding: 0;

}

.treeview details li > a {
    display: block;
    margin: 0;
    padding: 2px 0;
        line-height: 1.45;
}









/*
.content{max-width:900px;margin:auto;padding:80px 20px;}
*/
pre {
font-family: sans;
font-size: 1.2rem;
background-color: lightgray;
padding: 0.8rem;
overflow-x: auto;
max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
}






hr {
border: none;
height: 0.125rem;
background: linear-gradient(to right, transparent, var(--color-accent), transparent);
margin: clamp(2rem, 1.25rem + 2vw, 4rem) 0;
border-radius: 62.4375rem;
display: block;
}


hr.spacer {
    border: none;
    background: none;
    margin: 0;
    height: 4vh;
}

.h8 {height: 8px;}
.h16 {height: 16px;}
.h32 {height: 32px;}
.h64 {height: 64px;}
.h128{height: 128px;}



table {
width: 98%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 1.2rem;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
border-radius: 0.4rem;
}

th, td {
padding: 0.3rem 0.4rem;
border-bottom: 0.0625rem solid var(--color-border);
border-right: 0.0625rem solid var(--color-border);
text-align: left;
}

th {
background-color: #80b0ff;
font-family: var(--font-title);
font-weight: bold;
color: var(--color-accent);
}

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

th:first-child {
border-top-left-radius: 0.4rem;
}

th:last-child {
border-top-right-radius: 0.4rem;
border-right: none;
}

tr:last-child td:first-child {
border-bottom-left-radius: 0.4rem;
}

tr:last-child td:last-child {
border-bottom-right-radius: 0.4rem;
border-right: none;
}

tr:last-child td {
border-bottom: none;
}

td:last-child {
border-right: none;
}







details {
background-color: var(--color-quote-bg);
padding: 0.6rem 1rem;
/*border: 0.0625rem solid var(--color-border);
border-radius: 0.25rem;*/
display: block;
}

summary {
font-weight: bold;
cursor: pointer;
font-family: var(--font-title);
color: var(--color-accent);
outline: none;
display: list-item;
}

summary::-webkit-details-marker {
color: var(--color-accent);
}

address {
font-style: normal;
color: var(--color-text-muted);
border-left: 0.125rem solid var(--color-border);
padding-left: 0.8rem;
margin: 1rem 0;
display: block;
}

abbr[title] {
border-bottom: 0.0625rem dotted var(--color-text-muted);
cursor: help;
text-decoration: none;
}








/* Mise en forme du texte */

.b  { font-weight: bold; }
.i  { font-style: italic; }
.u  { text-decoration: underline; }
.s  { text-decoration: line-through; }
.h {background:yellow; padding: 2px 6px;}

.c  { text-align: center; }
.center {text-align:center;display:block;}
.l  { text-align: left; }
.r  { text-align: right; }
.j  { text-align: justify; }

/* Tailles */

.xs { font-size: 0.8em; }
.sm { font-size: 0.9em; }
.lg { font-size: 1.2em; }
.xl { font-size: 1.5em; }
.xxl { font-size: 2em; }
.big{font-size:1.4em;}

/* Couleurs */

.red    { color: red;  }
.green  { color: green; }
.blue   { color: blue; }
.orange { color: orange; }
.purple { color: purple; }
.black { color: black; }
.white { color: white; }

/* Fond */

.bg-red    { background: red;  padding: 2px 6px; }
.bg-green  { background: green;  padding: 2px 6px; }
.bg-blue   { background: blue;  padding: 2px 6px; }
.bg-yellow { background: yellow;  padding: 2px 6px; }
.bg-cyan   { background: cyan;  padding: 2px 6px; }
/* Espacement */

.m1 { margin: 0.5rem; }
.m2 { margin: 1rem; }

.p0 { padding: 0px 6px;}
.p1 { padding: 0.5rem; }
.p2 { padding: 1rem; }

.p24 {  padding: 2px 4px;}

/* Bordures */

.br  { border: 1px solid #ccc; }
.rd  { border-radius: 8px; }
.sh  { box-shadow: 0 2px 5px rgba(0,0,0,.2); }



.rounded {
border-radius: 8px;
}
.height30vh{
height: 30vh;
}

.grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue);
}
.grad2 {
  background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);
}
.grad3 { 
  background: radial-gradient(red, orange, yellow, green, blue, purple);
}
.grad4{
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}





/*

div[box]{display:flex;align-items:center;padding:15px;margin:20px 0;border-radius:4px;border-left:5px solid #ccc;}

div[box]{
display:flex;
align-items:center;
padding:15px;
border-radius:8px;border: 1px solid #ccc; 
border-left:8px solid #ccc;
box-shadow:0 4px 6px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.1);
margin:14px auto;
width:90%;
}



div[box]::before{font-size:2rem;margin-right:20px;flex-shrink:0;}
div[defaultBox]{background:#f0f0f0;border-color:#757575;color:#212121;}
div[defaultBox]::before{display:none;}
div[info]{background:#e3f2fd;border-color:#2196f3;color:#0d47a1;}
div[info]::before{content:"ℹ";}
div[warning]{background:#fff3e0;border-color:#ff9800;color:#e65100;}
div[warning]::before{content:"⚠️";}
div[error]{background:#ffebee;border-color:#f44336;color:#b71c1c;}
div[error]::before{content:"🛑";}
div[success]{background:#e8f5e9;border-color:#4caf50;color:#1b5e20;}
div[success]::before{content:"✅";}
div[box] .box-contenu{flex-grow:1;}
div[box] h3{margin-top:0;margin-bottom:10px;font-size:1.2rem;color:inherit;font-weight:bold;text-align:center;border-bottom:1px solid rgba(0,0,0,0.08);padding-bottom:5px;}
div[box] p{margin:0 0 10px 0;}
div[box] p:last-child{margin-bottom:0;}
div[question]{background:var(--msg-bg,#f3e5f5);border-color:var(--msg-color,#9c27b0);color:var(--msg-color,#9c27b0);}
div[question]::before{content:"❓";}
div[update]{background:var(--msg-bg,#e0f7fa);border-color:var(--msg-color,#00bcd4);color:var(--msg-color,#00bcd4);}
div[update]::before{content:"🔄";}
div[security]{background:var(--msg-bg,#e8eaf6);border-color:var(--msg-color,#3f51b5);color:var(--msg-color,#3f51b5);}
div[security]::before{content:"🛡️";}
div[calendar]{background:var(--msg-bg,#f9fbe7);border-color:var(--msg-color,#afb42b);color:var(--msg-color,#afb42b);}
div[calendar]::before{content:"📅";}
div[money]{background:var(--msg-bg,#e8f5e9);border-color:var(--msg-color,#2e7d32);color:var(--msg-color,#2e7d32);}
div[money]::before{content:"💶";}
div[time]{background:var(--msg-bg,#eceff1);border-color:var(--msg-color,#607d8b);color:var(--msg-color,#607d8b);}
div[time]::before{content:"🕒";}
div[danger]{background:var(--msg-bg,#ffebee);border-color:var(--msg-color,#d32f2f);color:var(--msg-color,#d32f2f);}
div[danger]::before{content:"🛑";}
div[primary]{background:var(--msg-bg,#f5f5f5);border-color:var(--msg-color,#616161);color:var(--msg-color,#616161);}
div[primary]::before{content:"📌";}
div[idea]{background:var(--msg-bg,#fffde7);border-color:var(--msg-color,#fbc02d);color:var(--msg-color,#fbc02d);}
div[idea]::before{content:"💡";}
div[todo]{background:var(--msg-bg,#fff9c4);border-color:var(--msg-color,#f57f17);color:var(--msg-color,#f57f17);}
div[todo]::before{content:"📝";}
div[note]{background:var(--msg-bg,#fafafa);border-color:var(--msg-color,#757575);color:var(--msg-color,#757575);}
div[note]::before{content:"📝";}
div[tip]{background:var(--msg-bg,#e8f8f5);border-color:var(--msg-color,#117a65);color:var(--msg-color,#117a65);}
div[tip]::before{content:"✨";}
div[important]{background:var(--msg-bg,#fdf2e9);border-color:var(--msg-color,#e67e22);color:var(--msg-color,#e67e22);}
div[important]::before{content:"✨";}
div[help]{background:var(--msg-bg,#f4ecf7);border-color:var(--msg-color,#8e44ad);color:var(--msg-color,#8e44ad);}
div[help]::before{content:"🙋";}
div[lock]{background:var(--msg-bg,#f2f4f4);border-color:var(--msg-color,#34495e);color:var(--msg-color,#34495e);}
div[lock]::before{content:"🔒";}
div[link]{background:var(--msg-bg,#eaf2f8);border-color:var(--msg-color,#2980b9);color:var(--msg-color,#2980b9);}
div[link]::before{content:"🔗";}
div[download]{background:var(--msg-bg,#ebf5fb);border-color:var(--msg-color,#2471a3);color:var(--msg-color,#2471a3);}
div[download]::before{content:"📥";}
div[upload]{background:var(--msg-bg,#fef9e7);border-color:var(--msg-color,#b7950b);color:var(--msg-color,#b7950b);}
div[upload]::before{content:"📤";}
div[construction]{background:var(--msg-bg,#fef5e7);border-color:var(--msg-color,#d35400);color:var(--msg-color,#d35400);}
div[construction]::before{content:"🚧";}
div[archive]{background:var(--msg-bg,#f4f6f7);border-color:var(--msg-color,#7f8c8d);color:var(--msg-color,#7f8c8d);}
div[archive]::before{content:"📦";}
div[trash]{background:var(--msg-bg,#fdedec);border-color:var(--msg-color,#c0392b);color:var(--msg-color,#c0392b);}
div[trash]::before{content:"🗑️";}
div[pin]{background:var(--msg-bg,#fcf3cf);border-color:var(--msg-color,#f1c40f);color:var(--msg-color,#f1c40f);}
div[pin]::before{content:"📌";}
div[quote]{background:var(--msg-bg,#f5eef8);border-color:var(--msg-color,#9b59b6);color:var(--msg-color,#9b59b6);}
div[quote]::before{content:"💬";}
div[bug]{background:var(--msg-bg,#fce4d6);border-color:var(--msg-color,#e65100);color:var(--msg-color,#e65100);}
div[bug]::before{content:"🪲";}
div[analytics]{background:var(--msg-bg,#eaf2f8);border-color:var(--msg-color,#1f618d);color:var(--msg-color,#1f618d);}
div[analytics]::before{content:"📊";}
div[user]{background:var(--msg-bg,#ebf5fb);border-color:var(--msg-color,#2e4053);color:var(--msg-color,#2e4053);}
div[user]::before{content:"👤";}
div[email]{background:var(--msg-bg,#eaf2f8);border-color:var(--msg-color,#1a5276);color:var(--msg-color,#1a5276);}
div[email]::before{content:"✉️";}
div[phone]{background:var(--msg-bg,#eafaf1);border-color:var(--msg-color,#196f3d);color:var(--msg-color,#196f3d);}
div[phone]::before{content:"📞";}
div[map]{background:var(--msg-bg,#f4f6f7);border-color:var(--msg-color,#626567);color:var(--msg-color,#626567);}
div[map]::before{content:"🗺️";}
*/





span[b]{font-weight:bold;}
span[i]{font-style:italic;}
span[u]{text-decoration:underline;}
span[s]{text-decoration:line-through;}
span[xs]{font-size:0.75rem;}
span[sm]{font-size:0.85rem;}
span[lg]{font-size:1.3rem;}
span[xl]{font-size:1.5rem;}
span[xxl]{font-size:1.8rem;}
span[red]{color:red !important;}
span[green]{color:green;}
span[blue]{color:blue;}
span[white]{color:white;}
span[bg-yellow]{background-color:#ffd;padding:4px 10px;color:#640;}
span[bg-green]{background-color:#dfd;padding:4px 10px;color:#060;}
span[gras]{font-weight:bold;}
span[big]{font-size:1.5rem !important;}
span[center]{text-align:center;display:block;}
span[highlight]{background:yellow;padding:4px;}
span[shadow]{text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
span[gray]{color:#888;}
span[orange]{color:orange;}
span[purple]{color:purple;}
span[bg-gray]{background-color:#eee;padding:2px 6px;}
span[bg-red]{background-color:#fdd;padding:4px 10px;color:#900;}
span[bg-blue]{background-color:#d1ecf1;padding:4px 10px;color:#006;}
span[bold]{font-weight:bold;}
span[italic]{font-style:italic;}
span[upper]{text-transform:uppercase;}
span[mono]{font-family:monospace;}
span[big2]{font-size:2.0rem !important;}
span[big3]{font-size:3.0rem !important;}
span[small]{font-size:0.85rem;}
span[right]{text-align:right;}
span[left]{text-align:left;}
span[border1]{border:1px solid LightGray !important;padding:2px 6px;}
span[border2]{border:2px solid #999;padding:2px 6px;}
span[border-red]{border:2px solid red;padding:2px 16px;}
span[border-green]{border:2px solid green;padding:2px 6px;}
span[border-blue]{border:1px solid blue !important;}
span[rounded]{border-radius:0.6rem !important;}
span[height30vh]{height:30vh;}
span[mark]{background-color:beige;padding-left:5px;padding-right:5px;border-radius:2px;}
span[grad1]{height:150px;width:200px;background-image:radial-gradient(red, green, blue);}
span[grad2]{background:radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);}
span[grad3]{background:radial-gradient(red, orange, yellow, green, blue, purple);}
span[grad4]{background:linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%));}



/*
.box{
display:flex;
align-items:center;
padding:15px;
border-radius:8px;
border:1px solid #ccc;
border-left:8px solid #ccc;
box-shadow:0 4px 6px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.1);
margin:14px auto;
width:90%;
}
.box::before{
font-size:2rem;
margin-right:20px;
flex-shrink:0;
}

*/

.info,.warning,.error,.success,.question,.update,.security,.calendar,.money,.time,.danger,.primary,.idea,.todo,.note,.tip,.important,.help,.lock,.link,.download,.upload,.construction,.archive,.trash,.pin,.quote,.bug,.analytics,.user,.email,.phone,.map{
display:flex;
align-items:center;
padding:15px;
border-radius:8px;
border:1px solid #ccc;
border-left:8px solid #ccc;
box-shadow:0 4px 6px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.1);
margin:14px auto;
width:90%;
}
.info::before,.warning::before,.error::before,.success::before,.question::before,.update::before,.security::before,.calendar::before,.money::before,.time::before,.danger::before,.primary::before,.idea::before,.todo::before,.note::before,.tip::before,.important::before,.help::before,.lock::before,.link::before,.download::before,.upload::before,.construction::before,.archive::before,.trash::before,.pin::before,.quote::before,.bug::before,.analytics::before,.user::before,.email::before,.phone::before,.map::before{
font-size:2rem;
margin-right:20px;
flex-shrink:0;
}
/*
.info{background:#e3f2fd;border-color:#2196f3;color:#0d47a1;}
.info::before{content:"ℹ";}
.warning{background:#fff3e0;border-color:#ff9800;color:#e65100;}
.warning::before{content:"⚠️";}
.error{background:#ffebee;border-color:#f44336;color:#b71c1c;}
.error::before{content:"🛑";}
.success{background:#e8f5e9;border-color:#4caf50;color:#1b5e20;}
.success::before{content:"✅";}
*/
















.defaultBox{
background:#f0f0f0;
border-color:#757575;
color:#212121;
}
.defaultBox::before{
display:none;
}
.info{
background:#e3f2fd;
border-color:#2196f3;
color:#0d47a1;
}
.info::before{
content:"ℹ";
}
.warning{
background:#fff3e0;
border-color:#ff9800;
color:#e65100;
}
.warning::before{
content:"⚠️";
}
.error{
background:#ffebee;
border-color:#f44336;
color:#b71c1c;
}
.error::before{
content:"🛑";
}
.success{
background:#e8f5e9;
border-color:#4caf50;
color:#1b5e20;
}
.success::before{
content:"✅";
}
.box .box-contenu{
flex-grow:1;
}
.box h3{
margin-top:0;
margin-bottom:10px;
font-size:1.2rem;
color:inherit;
font-weight:bold;
text-align:center;
border-bottom:1px solid rgba(0,0,0,0.08);
padding-bottom:5px;
}
.box p{
margin:0 0 10px 0;
}
.box p:last-child{
margin-bottom:0;
}




.question{
background:var(--msg-bg,#f3e5f5);
border-color:var(--msg-color,#9c27b0);
color:var(--msg-color,#9c27b0);
}
.question::before{
content:"❓";
}
.update{
background:var(--msg-bg,#e0f7fa);
border-color:var(--msg-color,#00bcd4);
color:var(--msg-color,#00bcd4);
}
.update::before{
content:"🔄";
}
.security{
background:var(--msg-bg,#e8eaf6);
border-color:var(--msg-color,#3f51b5);
color:var(--msg-color,#3f51b5);
}
.security::before{
content:"🛡️";
}
.calendar{
background:var(--msg-bg,#f9fbe7);
border-color:var(--msg-color,#afb42b);
color:var(--msg-color,#afb42b);
}
.calendar::before{
content:"📅";
}
.money{
background:var(--msg-bg,#e8f5e9);
border-color:var(--msg-color,#2e7d32);
color:var(--msg-color,#2e7d32);
}
.money::before{
content:"💶";
}
.time{
background:var(--msg-bg,#eceff1);
border-color:var(--msg-color,#607d8b);
color:var(--msg-color,#607d8b);
}
.time::before{
content:"🕒";
}
.danger{
background:var(--msg-bg,#ffebee);
border-color:var(--msg-color,#d32f2f);
color:var(--msg-color,#d32f2f);
}
.danger::before{
content:"🛑";
}
.primary{
background:var(--msg-bg,#f5f5f5);
border-color:var(--msg-color,#616161);
color:var(--msg-color,#616161);
}
.primary::before{
content:"📌";
}
.idea{
background:var(--msg-bg,#fffde7);
border-color:var(--msg-color,#fbc02d);
color:var(--msg-color,#fbc02d);
}
.idea::before{
content:"💡";
}
.todo{
background:var(--msg-bg,#fff9c4);
border-color:var(--msg-color,#f57f17);
color:var(--msg-color,#f57f17);
}
.todo::before{
content:"📝";
}
.note{
background:var(--msg-bg,#fafafa);
border-color:var(--msg-color,#757575);
color:var(--msg-color,#757575);
}
.note::before{
content:"📝";
}
.tip{
background:var(--msg-bg,#e8f8f5);
border-color:var(--msg-color,#117a65);
color:var(--msg-color,#117a65);
}
.tip::before{
content:"✨";
}
.important{
background:var(--msg-bg,#fdf2e9);
border-color:var(--msg-color,#e67e22);
color:var(--msg-color,#e67e22);
}
.important::before{
content:"✨";
}
.help{
background:var(--msg-bg,#f4ecf7);
border-color:var(--msg-color,#8e44ad);
color:var(--msg-color,#8e44ad);
}
.help::before{
content:"🙋";
}
.lock{
background:var(--msg-bg,#f2f4f4);
border-color:var(--msg-color,#34495e);
color:var(--msg-color,#34495e);
}
.lock::before{
content:"🔒";
}
.link{
background:var(--msg-bg,#eaf2f8);
border-color:var(--msg-color,#2980b9);
color:var(--msg-color,#2980b9);
}
.link::before{
content:"🔗";
}
.download{
background:var(--msg-bg,#ebf5fb);
border-color:var(--msg-color,#2471a3);
color:var(--msg-color,#2471a3);
}
.download::before{
content:"📥";
}
.upload{
background:var(--msg-bg,#fef9e7);
border-color:var(--msg-color,#b7950b);
color:var(--msg-color,#b7950b);
}
.upload::before{
content:"📤";
}
.construction{
background:var(--msg-bg,#fef5e7);
border-color:var(--msg-color,#d35400);
color:var(--msg-color,#d35400);
}
.construction::before{
content:"🚧";
}
.archive{
background:var(--msg-bg,#f4f6f7);
border-color:var(--msg-color,#7f8c8d);
color:var(--msg-color,#7f8c8d);
}
.archive::before{
content:"📦";
}
.trash{
background:var(--msg-bg,#fdedec);
border-color:var(--msg-color,#c0392b);
color:var(--msg-color,#c0392b);
}
.trash::before{
content:"🗑️";
}
.pin{
background:var(--msg-bg,#fcf3cf);
border-color:var(--msg-color,#f1c40f);
color:var(--msg-color,#f1c40f);
}
.pin::before{
content:"📌";
}
.quote{
background:var(--msg-bg,#f5eef8);
border-color:var(--msg-color,#9b59b6);
color:var(--msg-color,#9b59b6);
}
.quote::before{
content:"💬";
}
.bug{
background:var(--msg-bg,#fce4d6);
border-color:var(--msg-color,#e65100);
color:var(--msg-color,#e65100);
}
.bug::before{
content:"🪲";
}
.analytics{
background:var(--msg-bg,#eaf2f8);
border-color:var(--msg-color,#1f618d);
color:var(--msg-color,#1f618d);
}
.analytics::before{
content:"📊";
}
.user{
background:var(--msg-bg,#ebf5fb);
border-color:var(--msg-color,#2e4053);
color:var(--msg-color,#2e4053);
}
.user::before{
content:"👤";
}
.email{
background:var(--msg-bg,#eaf2f8);
border-color:var(--msg-color,#1a5276);
color:var(--msg-color,#1a5276);
}
.email::before{
content:"✉️";
}
.phone{
background:var(--msg-bg,#eafaf1);
border-color:var(--msg-color,#196f3d);
color:var(--msg-color,#196f3d);
}
.phone::before{
content:"📞";
}
.map{
background:var(--msg-bg,#f4f6f7);
border-color:var(--msg-color,#626567);
color:var(--msg-color,#626567);
}
.map::before{
content:"🗺️";
}




/*


#admin-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e1e1e;
    color: #fff;
    padding: 25px;
    width: 320px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: Arial, sans-serif;
    z-index: 9999;
}

.admin-title {
    margin: 0 0 15px 0;
    font-size: 20px;
    text-align: center;
}

.admin-btn {
    width: 100%;
    padding: 12px;
    margin: 6px 0;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
}

.admin-btn.edit { background: #2d89ef; }
.admin-btn.cache { background: #f39c12; }
.admin-btn.nav { background: #27ae60; }
.admin-btn.close { background: #c0392b; margin-top: 10px; }

*/