<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "ISO-8859-1";

.table-frame {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	display: grid;
  	grid-auto-rows: minmax(20px, auto);
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
  	max-width: 55em;
  	background-color: #fae9cd;
}

.ethernet {
	grid-template-columns: repeat(6, 1fr [col_start]);
	grid-template-rows: repeat(4, 1fr [row_start]);
}
.internet {
	grid-template-columns: repeat(8, 1fr [col_start]);
	grid-template-rows: repeat(8, 1fr [row_start]);
}
.arp {
	grid-template-columns: repeat(6, 1fr [col_start]);
	grid-template-rows: repeat(6, 1fr [row_start]);
}
.udp {
	grid-template-columns: repeat(4, 1fr [col_start]);
	grid-template-rows: repeat(3, 1fr [row_start]);
}

.dhcp {
	grid-template-columns: repeat(4, 1fr [col_start]);
	grid-template-rows: repeat(12, 1fr [row_start]);
}

.tcp {
	grid-template-columns: repeat(32, 1fr [col_start]);
	grid-template-rows: repeat(8, 1fr [row_start]);
}

.table-frame .element {
  	border: 1px solid  gray;
  	text-align: center;
  	padding-top: 10px;
  	font-family: Arial;
  	font-weight: bold;
  	word-break: break-all; /* Couper le mot s'il dépasse */
  	font-size: clamp(10px, 1.5vw, 20px);
}

.section_p {
	background-color: #fff;
	border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
    margin-right: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.section_p h2 {
 	color: #007bff;
 	border-bottom: 2px solid #007bff;
 	padding-bottom: 5px;
 	margin:5px;
 	font-size: 1.2em;
}
.section_p p {
	padding:10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.section_p ul li {
    background-color: #eef;
    margin: 5px 0;
    padding: 5px;
    border-radius: 5px;
}

.section_p code, pre {
    /*font-family: "Courier New", Courier, monospace;*/
    padding: 2px 5px;
    display: block;
}
.section_p code.inline {
    display: inline;
}

.box1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.box2 { grid-column: 2 / 3; grid-row: 1 / 2; background-color: lightgrey;}
.box3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.box4 {	grid-column: 4 / 5; grid-row: 1 / 2; background-color: lightgrey;}
.box5 {	grid-column: 5 / 6; grid-row: 1 / 2; }
.box6 {	grid-column: 6 / 7; grid-row: 1 / 2; background-color: lightgrey;}
.box7 {	grid-column: 1 / 7; grid-row: 2 / 3; }
.box8 {	grid-column: 1 / 7; grid-row: 3 / 4; }
.box9 {	grid-column: 1 / 3; grid-row: 4 / 5; }
.box10 { grid-column: 3 / 7; grid-row: 4 / 5; }


.ibox1 { grid-column: 1 / 3; grid-row: 1 / 2; }
.ibox2 { grid-column: 3 / 5; grid-row: 1 / 2; background-color: lightgrey;}
.ibox3 { grid-column: 5 / 7; grid-row: 1 / 2; }
.ibox4 { grid-column: 7 / 9; grid-row: 1 / 2; background-color: lightgrey;}
.ibox5 { grid-column: 1 / 2; grid-row: 2 / 3; }
.ibox6 { grid-column: 2 / 3; grid-row: 2 / 3; }
.ibox7 { grid-column: 3 / 5; grid-row: 2 / 3; }
.ibox8 { grid-column: 5 / 9; grid-row: 2 / 3; }
.ibox9 { grid-column: 1 / 5; grid-row: 3 / 4; }
.ibox10 { grid-column: 5 / 6; grid-row: 3 / 4; }
.ibox11 { grid-column: 6 / 9; grid-row: 3 / 4; }
.ibox12 { grid-column: 1 / 3; grid-row: 4 / 5; }
.ibox13 { grid-column: 3 / 5; grid-row: 4 / 5; }
.ibox14 { grid-column: 5 / 9; grid-row: 4 / 5; }
.ibox15 { grid-column: 1 / 9; grid-row: 5 / 6; }
.ibox16 { grid-column: 1 / 9; grid-row: 6 / 7; }
.ibox17 { grid-column: 1 / 9; grid-row: 7 / 8; }
.ibox18 { grid-column: 1 / 9; grid-row: 8 / 9; }


.abox1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.abox2 { grid-column: 2 / 3; grid-row: 1 / 2; background-color: lightgrey;}
.abox3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.abox4 { grid-column: 4 / 5; grid-row: 1 / 2; background-color: lightgrey;}
.abox5 { grid-column: 5 / 6; grid-row: 1 / 2; }
.abox6 { grid-column: 6 / 7; grid-row: 1 / 2; background-color: lightgrey;}
.abox7 { grid-column: 1 / 3; grid-row: 2 / 3; }
.abox8 { grid-column: 3 / 5; grid-row: 2 / 3; }
.abox9 { grid-column: 5 / 6; grid-row: 2 / 3; }
.abox10 { grid-column: 6 / 7; grid-row: 2 / 3; }
.abox11 { grid-column: 1 / 3; grid-row: 3 / 4; }
.abox12 { grid-column: 3 / 7; grid-row: 3 / 4; }
.abox13 { grid-column: 1 / 3; grid-row: 4 / 5; }
.abox14 { grid-column: 3 / 7; grid-row: 4 / 5; }
.abox15 { grid-column: 1 / 3; grid-row: 5 / 6; }
.abox16 { grid-column: 3 / 7; grid-row: 5 / 6; }
.abox17 { grid-column: 1 / 3; grid-row: 6 / 7; }
.abox18 { grid-column: 3 / 7; grid-row: 6 / 7; }

.ubox1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.ubox2 { grid-column: 2 / 3; grid-row: 1 / 2; background-color: lightgrey;}
.ubox3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.ubox4 { grid-column: 4 / 5; grid-row: 1 / 2; background-color: lightgrey;}
.ubox5 { grid-column: 1 / 3; grid-row: 2 / 3; }
.ubox6 { grid-column: 3 / 5; grid-row: 2 / 3; }
.ubox7 { grid-column: 1 / 3; grid-row: 3 / 4; }
.ubox8 { grid-column: 3 / 5; grid-row: 3 / 4; }

.dbox1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.dbox2 { grid-column: 2 / 3; grid-row: 1 / 2; background-color: lightgrey;}
.dbox3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.dbox4 { grid-column: 4 / 5; grid-row: 1 / 2; background-color: lightgrey;}
.dbox5 { grid-column: 1 / 2; grid-row: 2 / 3; }
.dbox6 { grid-column: 2 / 3; grid-row: 2 / 3; }
.dbox7 { grid-column: 3 / 4; grid-row: 2 / 3; }
.dbox8 { grid-column: 4 / 5; grid-row: 2 / 3; }
.dbox9 { grid-column: 1 / 5; grid-row: 3 / 4; }
.dbox10 { grid-column: 1 / 3; grid-row: 4 / 5; }
.dbox11 { grid-column: 3 / 5; grid-row: 4 / 5; }
.dbox12 { grid-column: 1 / 5; grid-row: 5 / 6; }
.dbox13 { grid-column: 1 / 5; grid-row: 6 / 7; }
.dbox14 { grid-column: 1 / 5; grid-row: 7 / 8; }
.dbox15 { grid-column: 1 / 5; grid-row: 8 / 9; }
.dbox16 { grid-column: 1 / 5; grid-row: 9 / 10; }
.dbox17 { grid-column: 1 / 5; grid-row: 10 / 11; }
.dbox18 { grid-column: 1 / 5; grid-row: 11 / 12; }
.dbox19 { grid-column: 1 / 5; grid-row: 12 / 13; }

.tbox1 { grid-column: 1 / 2; grid-row: 1 / 2;}
.tbox2 { grid-column: 2 / 3; grid-row: 1 / 2;}
.tbox3 { grid-column: 3 / 4; grid-row: 1 / 2;}
.tbox4 { grid-column: 4 / 5; grid-row: 1 / 2;}
.tbox5 { grid-column: 5 / 6; grid-row: 1 / 2;}
.tbox6 { grid-column: 6 / 7; grid-row: 1 / 2;}
.tbox7 { grid-column: 7 / 8; grid-row: 1 / 2;}
.tbox8 { grid-column: 8 / 9; grid-row: 1 / 2;}
.tbox9 { grid-column: 9 / 10; grid-row: 1 / 2;}
.tbox10 { grid-column: 10 / 11; grid-row: 1 / 2;}
.tbox11 { grid-column: 11 / 12; grid-row: 1 / 2;}
.tbox12 { grid-column: 12 / 13; grid-row: 1 / 2;}
.tbox13 { grid-column: 13 / 14; grid-row: 1 / 2;}
.tbox14 { grid-column: 14 / 15; grid-row: 1 / 2;}
.tbox15 { grid-column: 15 / 16; grid-row: 1 / 2;}
.tbox16 { grid-column: 16 / 17; grid-row: 1 / 2;}
.tbox17 { grid-column: 17 / 18; grid-row: 1 / 2;}
.tbox18 { grid-column: 18 / 19; grid-row: 1 / 2;}
.tbox19 { grid-column: 19 / 20; grid-row: 1 / 2;}
.tbox20 { grid-column: 20 / 21; grid-row: 1 / 2;}
.tbox21 { grid-column: 21 / 22; grid-row: 1 / 2;}
.tbox22 { grid-column: 22 / 23; grid-row: 1 / 2;}
.tbox23 { grid-column: 23 / 24; grid-row: 1 / 2;}
.tbox24 { grid-column: 24 / 25; grid-row: 1 / 2;}
.tbox25 { grid-column: 25 / 26; grid-row: 1 / 2;}
.tbox26 { grid-column: 26 / 27; grid-row: 1 / 2;}
.tbox27 { grid-column: 27 / 28; grid-row: 1 / 2;}
.tbox28 { grid-column: 28 / 29; grid-row: 1 / 2;}
.tbox29 { grid-column: 29 / 30; grid-row: 1 / 2;}
.tbox30 { grid-column: 30 / 31; grid-row: 1 / 2;}
.tbox31 { grid-column: 31 / 32; grid-row: 1 / 2;}
.tbox32 { grid-column: 32 / 33; grid-row: 1 / 2;}


.tbox33 { grid-column: 1 / 17; grid-row:2 / 3;}
.tbox34 { grid-column: 17 / 33; grid-row: 2 / 3;}

.tbox35 { grid-column: 1 / 33; grid-row: 3 / 4;}
.tbox36 { grid-column: 1 / 33; grid-row: 4 / 5;}

.tbox37 { grid-column: 1 / 5; grid-row: 5 / 6;}
.tbox38 { grid-column: 5 / 11; grid-row: 5 / 6;}

.tbox39 { grid-column: 11 / 12; grid-row: 5 / 6; font-size: 0.75vw;}
.tbox40 { grid-column: 12 / 13; grid-row: 5 / 6; font-size: 0.75vw;}
.tbox41 { grid-column: 13 / 14; grid-row: 5 / 6; font-size: 0.75vw;}
.tbox42 { grid-column: 14 / 15; grid-row: 5 / 6; font-size: 0.75vw;}
.tbox43 { grid-column: 15 / 16; grid-row: 5 / 6; font-size: 0.75vw;}
.tbox44 { grid-column: 16 / 17; grid-row: 5 / 6; font-size: 0.75vw;}

.tbox45 { grid-column: 17 / 33; grid-row: 5 / 6;}

.tbox46 { grid-column: 1 / 17; grid-row: 6 / 7;}
.tbox47 { grid-column: 17 / 33; grid-row: 6 / 7;}
.tbox48 { grid-column: 1 / 23; grid-row: 7 / 8;}
.tbox49 { grid-column: 23 / 33; grid-row: 7 / 8;}
.tbox50 { grid-column: 1 / 33; grid-row: 8 / 9;}

.code-block {
            background-color: #f4f4f4;
            border-left: 3px solid rgb(21, 150, 240);
            margin-left: 10px;
        	overflow-x: auto;
            font-family: monospace;
            line-height: 1.5;
            white-space: nowrap;
            padding-left: 5px;
        }
        
        .example-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .example-table th, .example-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .example-table th {
            background-color: #f2f2f2;
        }
        .notice {
            background-color: #e7f3fe;
            padding: 10px;
            border-left: 4px solid #2196F3;
            margin-bottom: 15px;
            color: #0b6fc3;
        }
        .important {
            color: #d9534f;
            font-weight: bold;
        }
.highlight {
            background-color: #e7f3fe;
            padding: 10px;
            border-left: 4px solid #00f;
            margin: 15px 0;
            margin-bottom: 15px;
        }
.pack {
	color:grey;
}
        
.pack table {
    margin: 0 auto;
    border-collapse: collapse;
    font-family: "Courier New", Courier, monospace;
    font-size: 2vw; /* 2% de la largeur de l'écran */
}

.pack td {
    width: 30px;
    height: 30px;
    padding: 5px;
    color: black;
    text-align: center;
    border: 1px solid #ddd;
    font-size: clamp(10px, 1.5vw, 20px);
    background-color: white;
}
     
.pack .pink { background-color: #f4b5c1; }
.pack .blue { background-color: #8fc4e8; }
.pack .orange { background-color: #f9a45e; }
.pack .purple { background-color: #cbb3e3; }
.pack .green { background-color: #b3d594; }
.pack .beige { background-color: #F5F5DC; }
.pack .lightgreen { background-color: #CCFFCC;}

.legend {
	margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.legend-item {
    margin: 5px 0;
    display: flex;
    flex-direction: row;
    align-items: left;
}
.color-box {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}</pre></body></html>