@font-face {font-family: 'poppins';src: url(../font/Poppins-Regular.ttf)}
@font-face {font-family: 'poppins Bold';src: url(../font/Poppins-Bold.ttf)}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
	flex-direction:column;
	font-family:"poppins";
}

.container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 90%;
}

.logo-head{width:100%;padding:15px 0;display:flex;justify-content:center}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
	font-family:"poppins Bold";
}

.infos{width:100%;display:flex;justify-content:center;margin:15px 0}
.infos_recap{width:80%;display:flex;align-items:center;padding:15px;background:#efefef;flex-direction:column;gap:10px;border-radius:15px}
.infos_recap p{margin:0;font-family:"poppins";color:#000}
.infos_recap p span{font-size:20px;font-family:"poppins Bold";color:#00d4cc}

.bullet{width:100%;display:flex;justify-content:center;margin:15px 0}
.bullet_content{width:80%;display:flex;padding:15px;background:#efefef;align-items:center;gap:10px;flex-direction:column;border-radius:15px}
.bullet_content h3{font-family:"poppins Bold";font-family:15px}
.bullet_content_number{display:flex;justify-content:center}
.bullet_content_av{width:50%}
.bullet_content_av span{font-size:20px;font-family:"poppins Bold";color:#3d1ca1}
.bullet_content_per{width:50%}
.bullet_content_per span{font-size:20px;font-family:"poppins Bold";color:#3d1ca1}
#reduc_per_impot{font-size:20px;font-family:"poppins Bold";color:#0b8f3c}

.form-groupe {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #000;
}

label span{
	color:#c7380c;
}

/* Reset et base */
input, select {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* États de focus */
input:focus, select:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* États de survol */
input:hover, select:hover {
    border-color: #3d1ca1;
}

/* Inputs spécifiques */
input[type="text"], 
input[type="email"], 
input[type="tel"] {
    background-color: #f8f9fa;
	font-family:"poppins";
}

/* Design des selects */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
	font-family:"poppins";
}

/* États désactivés */
input:disabled, select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Gestion des erreurs */
input.error, select.error {
    border-color: #dc3545;
    color: #dc3545;
}

/* Placeholder */
::placeholder {
    color: #3d1ca1;
    opacity: 0.7;
}

button {
    width: 100%;
    padding: 10px;
    background-color:#00d4cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

.erreurs {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Table Container */
.table-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f5f5f5;
  table-layout: fixed;
}

/* Table Header */
th {
  background-color: #3d1ca1;
  color: #fff;
  padding: 12px 5px;
  font-size:13px;
  text-align: center;
  font-weight: bold;
}

/* Table Rows */
tr {
  border-bottom: 1px solid #ddd;
}

th:nth-child(2), th:nth-child(3) {
  text-align: center;
}

/* Table Cells */
td {
  padding: 12px 5px;
  text-align:center;
  font-size:12px
}

/* Rank Column */
td:first-child {
  font-weight: bold;
}

/* Points Column */
td:nth-child(2), td:nth-child(3) {
  text-align: center;
}

/* Alternating Row Colors */
tr:nth-child(even) {
  background-color: #fff;
}

/* Hover Effect */
tr:hover {
  background-color: #e6e6e6;
}



.checkbox_collect{display:flex;align-items:center}
.checkbox_collect p{width:100%;text-align:justify}
input[type="checkbox"]{width:20px;height:20px;margin-right:10px}

.col-submit{width:100%;display:flex;justify-content:center}
#submit_btn{width:90%;background:#3d1ca1;color:#fff;height:50px;font-size:20px;font-family:"poppins Bold";}
#submit_btn:hover{background:#00d4cc}

.capital_retraite{display:flex;width:100%;justify-content:center;flex-direction:column}
.capital_retraite_content{display:flex;width:800px;}
.capital_retraite_content_av{display:flex;flex-direction:column;width:46%;padding:2%;justify-content:center;background:#3d1ca1;align-items:center;gap:10px}
.capital_retraite_content_per{display:flex;flex-direction:column;width:46%;padding:2%;justify-content:center;background:#00d4cc;align-items:center;gap:10px}
.capital_retraite_content_av_capi, .capital_retraite_content_av_capi_net{width:100%;text-align:center}
.capital_retraite_content_av h3, .capital_retraite_content_av_capi p, .capital_retraite_content_av_capi_net p{color:#00d4cc;margin:0}
.capital_retraite_content_per_capi, .capital_retraite_content_per_capi_net{width:100%;text-align:center}
.capital_retraite_content_per h3, .capital_retraite_content_per_capi p, .capital_retraite_content_per_capi_net p{color:#3d1ca1;margin:0}
.capital_retraite_content_av h3, .capital_retraite_content_per h3{
	font-family:"poppins Bold"}
p.capi-result{font-family:"poppins Bold";font-size:22px;margin:0}

.warning{width:96%;margin:10px 0;border-radius:15px;background:#edaa77;padding:10px 2%}
.warning p{font-size:12px}

span.disclaimer_number{font-size:10px !important;color:#bf463b !important;font-family:"poppins Bold" !important}

.disclaimer-section {width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0;}
.disclaimer-footer{width:60%;display:flex;flex-direction:column;align-items:center}
.disclaimer-section-content p {font-family:"Poppins";font-size:12px;text-align: justify;}

.validtel-content{display:flex;width:100%;height:850px}
.validtel-left{width:50%;background:url(../images/bg-validtel.jpg);background-size:cover}
.validtel-right{width:50%;display:flex;align-items:center;justify-content:center;background:#efefef}
#validTel{width:450px}
#validTel p{font-family:"poppins Bold";font-size:18px}
#validTel input[type="text"]{width:250px}
#validTel input[type="submit"]{width:150px;background:#00d4cc;font-family:"poppins Bold";font-size:18px;border-radius:10px;color:#fff;border:none}

.table_capitalisation{margin-top:20px}
td.total_color{background:#00d4cc !important;color:#000;font-family:"poppins Bold"}

.size1{width:60% !important}
.size2{width:50% !important}

.table_distribution{overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* pour iOS */}
}
.table_capitalisation{overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* pour iOS */}
}

@media all and (max-width: 979px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) 
{
.container{width:calc(100% - 60px);}
.container h1{font-size:20px}
label{font-size:14px}
label span{font-size:12px}
.checkbox_collect p{font-size:10px}
#submit_btn{height:70px;font-size: 17px;}
.capital_retraite_content{flex-direction:column;width:100%}
.capital_retraite_content_av{width:96%}
.capital_retraite_content_per{width:96%}
.bullet_content{width:100%}
.mobile_view_container{width:100%;overflow-x:auto;overflow-y:hidden;}
.mobile_view{width:800px;height:418px;}
.validtel-content{height:inherit}
.validtel-left{display:none}
.validtel-right{width:100%;background:inherit}
/**/
.table_distribution{overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* pour iOS */}
}
.table_capitalisation{overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* pour iOS */}
}
}