/* ==========================
   FRAMEWORK ACCESSIBLE & MOBILE v3 - UNIVERSAL CHECKBOX & RADIO
=========================== */

/* RESET */
* {margin:0; padding:0; box-sizing:border-box;}
html {font-size:18px;}
body {font-family:Arial,sans-serif; line-height:1.6; background:#fff; color:#111;}

/* TYPOGRAPHIE */
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#000;margin-bottom:0.5em;}
p{margin-bottom:1em;font-size:1rem;}
a{color:#0055ff;text-decoration:underline;}
a:focus,a:hover{outline:3px solid #ff9900; outline-offset:2px;}

/* CONTAINERS */
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 1em;}

/* GRILLE FLEX */
.row{display:flex; flex-wrap:wrap; margin:-0.5em;}
.col{flex:1; padding:0.5em;}
.col-1{flex:0 0 8.33%;}
.col-2{flex:0 0 16.66%;}
.col-3{flex:0 0 25%;}
.col-4{flex:0 0 33.33%;}
.col-5{flex:0 0 41.66%;}
.col-6{flex:0 0 50%;}
.col-12{flex:0 0 100%;}

/* BOUTONS */
.button{
  display:inline-block;
  padding:0.8em 1.2em;
  font-size:1rem;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:#0055ff;
  border:none;
  border-radius:5px;
  cursor:pointer;
  margin:0.5em 0;
}
.button:focus,.button:hover{
  background:#ff9900;
  color:#000;
  outline:3px solid #ff9900;
  outline-offset:2px;
}

/* FORMULAIRES */
input, select, textarea {
  font-size: 1rem;
  padding: 0.6em;
  margin: 0.4em 0;
  border: 2px solid #000;
  border-radius: 5px;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

/* CHECKBOX ET RADIO UNIVERSELS */
input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-checkbox,
.custom-radio {
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 3px solid #000;
  border-radius: 5px; /* 50% pour radio */
  margin-right: 0.5em;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  background: #fff;
}

.custom-radio {
  border-radius: 50%;
}

input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 10px;
  height: 18px;
  border: solid #000;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

input[type="radio"]:checked + .custom-radio::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 16px;
  height: 16px;
  background: #000;
  border-radius: 50%;
}

/* Focus visible */
input[type="checkbox"]:focus + .custom-checkbox,
input[type="radio"]:focus + .custom-radio {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

/* Labels lisibles */
label {
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.6em;
}

/* TABLES */
table{width:100%; border-collapse:collapse; margin-bottom:1em;}
th,td{padding:0.8em; border:2px solid #000; text-align:left;}
th{background:#111;color:#fff;}

/* CARDS */
.card{border:2px solid #000; border-radius:5px; padding:1em; margin:0.5em 0; background:#f5f5f5;}
.card h3{margin-top:0;}

/* ALERTS */
.alert{padding:0.8em; margin:0.5em 0; border-radius:5px; font-weight:bold;}
.alert-info{background:#cce5ff; color:#004085; border:2px solid #004085;}
.alert-warning{background:#fff3cd; color:#856404; border:2px solid #856404;}

/* MODALS */
.modal{display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.8);}
.modal-content{background:#fff; margin:10% auto; padding:2em; border-radius:5px; max-width:500px; outline:3px solid #ff9900;}

/* NAVBAR & DROPDOWN */
.navbar{display:flex; flex-wrap:wrap; background:#111; align-items:center; padding:0.5em;}
.navbar a{color:#fff; padding:0.8em 1em; text-decoration:none;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:1.5em; cursor:pointer;}
.nav-menu{display:flex; flex-wrap:wrap; align-items:center;}
.dropdown{position:relative;}
.dropbtn{background:none; border:none; color:#fff; padding:0.8em 1em; cursor:pointer; font-weight:bold;}
.dropdown-content{display:none; position:absolute; background:#fff; min-width:150px; box-shadow:0 2px 5px rgba(0,0,0,0.3); z-index:1;}
.dropdown-content a{color:#111; padding:0.5em 1em; display:block; text-decoration:none;}
.dropdown-content a:hover{background:#ff9900; color:#000;}
.show{display:block;}

/* MEDIA QUERIES */
@media(max-width:768px){
  .row{flex-direction:column;}
  .button{width:100%;}
  .navbar{flex-direction:column;}
  .nav-menu{display:none; flex-direction:column; width:100%;}
  .nav-menu.active{display:flex;}
  .nav-toggle{display:block;}
  h1{font-size:1.8rem;} h2{font-size:1.6rem;} h3{font-size:1.4rem;}
}