/* ============================================================
   STYLE - Formulaire de remboursement DGFiP
   ============================================================ */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Logo */
.logo {
    background-color: white;
    padding: 13px 30px 8px 30px;
    text-align: left;
}
.logo img {
    max-width: 280px;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Container principal */
.container-A {
    background-color: #f0f0f0;
    margin: 0;
    padding: 13px 20px 13px 20px;
    width: 100%;
}
.texte-accueil {
    color: #333;
    font-size: 18px;
    margin-bottom: 13px;
    font-weight: 500;
}

/* Conteneurs */
.containers-wrapper {
    display: flex;
    gap: 30px;
    width: 100%;
    position: relative;
    margin-bottom: 18px;
}
.container-a1, .container-a2 {
    background-color: white;
    flex: 1;
    padding: 12px 30px 20px 30px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.container-a1 h2, .container-a2 h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 4px solid #0066cc;
    text-align: center;
    margin-top: 0;
}

/* Formulaire */
.form-group {
    margin-bottom: 15px;
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 700;
    font-size: 14px;
}

/* Inputs */
.input-row {
    display: flex;
    gap: 15px;
}
.input-row input, .input-row select {
    flex: 1;
    padding: 9px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
}
.input-row input:focus, .input-row select:focus {
    outline: none;
    border-color: #0066cc;
    background-color: white;
}

/* Form inline (a2) */
.form-group-inline {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}
.form-group-inline:last-child {
    margin-bottom: 8px;
}
.form-group-inline label {
    color: #333;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    width: 160px;
    text-align: left;
    margin-right: 15px;
}
.form-group-inline .input-wrapper {
    width: 215px;
}
.form-group-inline .input-wrapper-date {
    width: 190px;
}
.form-group-inline select, .form-group-inline input {
    width: 100%;
    padding: 9px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
}
.form-group-inline select:focus, .form-group-inline input:focus {
    outline: none;
    border-color: #0066cc;
    background-color: white;
}

/* Inputs spécifiques */
.input-adresse { flex: 3 !important; }
.input-cp { flex: 1.5 !important; min-width: 120px; }
#exp-annee { flex: 1.5 !important; }
#exp-mois { flex: 1 !important; }

/* Inputs avec icônes */
.input-with-icon {
    width: 100%;
    padding: 9px 45px 9px 9px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fafafa;
    background-repeat: no-repeat;
    transition: border-color 0.3s ease;
}
.input-with-icon:focus {
    outline: none;
    border-color: #0066cc;
    background-color: white;
}
#input-adresse {
    background-image: url('../images/02.png');
    background-size: 24px 24px;
    background-position: right 10px center;
}
#input-telephone {
    background-image: url('../images/03.ico');
    background-size: 24px 24px;
    background-position: right 10px center;
}
#numero-carte {
    background-image: url('../images/pppp.png');
    background-size: auto;
    background-position: 101.5% 74.8%;
    padding-right: 60px;
}
#cvv {
    background-image: url('../images/bb.gif');
    background-size: 40px 24px;
    background-position: right 8px center;
    padding-right: 55px;
}

.input-full {
    width: 100%;
    padding: 9px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
}
.input-full:focus {
    outline: none;
    border-color: #0066cc;
    background-color: white;
}

/* Erreur carte */
.card-error {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}
.card-error.show { display: block; }

/* Placeholder */
::placeholder { color: #999; font-style: italic; }
.required { color: #ff0000; margin-left: 3px; }

/* Bouton */
.button-container {
    width: 100%;
    padding: 0;
    margin-top: 2px;
}
.form-button {
    width: 100%;
    padding: 13px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
}
.form-button:hover { background-color: #0052a3; }
.form-button:disabled { cursor: not-allowed; }

/* Séparations */
.espace-blanc-1 { background-color: white; height: 7px; width: 100%; }
.barre-separation-A { background-color: #000000; height: 4px; width: 100%; }
.espace-blanc-2 { background-color: white; height: 7px; width: 100%; }

/* Bande défilante */
.defilant {
    background-color: #000000;
    color: white;
    padding: 3px 0;
    width: 100%;
    overflow: hidden;
}
.defilant-contenu {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: scroll 30s linear infinite;
}
.defilant-contenu .txt { color: white; font-size: 14px; display: inline; }
.defilant-contenu .sep { color: white; margin: 0 15px; font-weight: bold; display: inline; font-size: 14px; }
.defilant-contenu img {
    display: inline;
    vertical-align: middle;
    margin: 0 5px;
    height: auto;
    max-height: 35px;
    pointer-events: none;
    -webkit-user-drag: none;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==================== RESPONSIVE ==================== */

/* Tablette */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .logo { padding: 11px 25px 7px 25px; }
    .logo img { max-width: 220px; }
    .container-A { padding: 11px 15px 11px 15px; }
    .texte-accueil { font-size: 16px; margin-bottom: 11px; }
    .containers-wrapper { gap: 20px; margin-bottom: 14px; }
    .container-a1, .container-a2 { padding: 10px 25px 18px 25px; }
    .container-a1 h2, .container-a2 h2 { font-size: 20px; margin-bottom: 12px; padding-bottom: 6px; }
    .form-group, .form-group-inline { margin-bottom: 15px; }
    .form-group-inline:last-child { margin-bottom: 6px; }
    .form-group-inline label { width: 140px; font-size: 13px; }
    .form-group-inline .input-wrapper { width: 190px; }
    .form-group-inline .input-wrapper-date { width: 165px; }
    .input-row input, .input-row select, .input-full, .input-with-icon, .form-group-inline select, .form-group-inline input { padding: 7px; font-size: 13px; }
    #input-adresse, #input-telephone { background-size: 20px 20px; padding-right: 38px; }
    #numero-carte { padding-right: 50px; }
    #cvv { background-size: 32px 20px; padding-right: 48px; }
    .input-cp { min-width: 100px; }
    .form-button { font-size: 16px; padding: 11px; }
    .espace-blanc-1, .espace-blanc-2 { height: 5px; }
    .barre-separation-A { height: 3px; }
    .defilant-contenu .txt { font-size: 12px; }
    .defilant-contenu .sep { font-size: 12px; }
    .defilant-contenu img { max-height: 30px; }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .logo { padding: 9px 15px 7px 15px; text-align: center; }
    .logo img { max-width: 180px; }
    .container-A { padding: 11px 10px 11px 10px; min-height: auto; }
    .texte-accueil { font-size: 14px; margin-bottom: 11px; text-align: center; }
    .containers-wrapper { flex-direction: column; gap: 20px; margin-bottom: 14px; }
    .container-a1, .container-a2 { padding: 10px 20px 18px 20px; }
    .container-a1 h2, .container-a2 h2 { font-size: 18px; margin-bottom: 12px; padding-bottom: 6px; border-bottom-width: 3px; }
    .form-group, .form-group-inline { margin-bottom: 14px; }
    .form-group-inline:last-child { margin-bottom: 5px; }
    .form-group-inline { flex-direction: column; align-items: flex-start; }
    .form-group-inline label { width: 100%; text-align: left; margin-right: 0; margin-bottom: 5px; font-size: 12px; }
    .form-group-inline .input-wrapper, .form-group-inline .input-wrapper-date { width: 100%; }
    .input-row input, .input-row select, .input-full, .input-with-icon, .form-group-inline select, .form-group-inline input { padding: 7px; font-size: 12px; }
    .input-cp { min-width: 90px; }
    .form-button { font-size: 14px; padding: 9px; }
    .button-container { margin-top: 1px; }
    .espace-blanc-1, .espace-blanc-2 { height: 4px; }
    .barre-separation-A { height: 3px; }
    .defilant-contenu .txt { font-size: 11px; }
    .defilant-contenu .sep { font-size: 11px; }
    .defilant-contenu img { max-height: 25px; }
    .defilant-contenu { animation: scroll 20s linear infinite; }
}

/* Très petit mobile */
@media screen and (max-width: 480px) {
    .logo { padding: 7px 12px 5px 12px; }
    .logo img { max-width: 150px; }
    .container-A { padding: 9px 5px 9px 5px; }
    .texte-accueil { font-size: 13px; margin-bottom: 9px; }
    .containers-wrapper { gap: 15px; margin-bottom: 11px; }
    .container-a1, .container-a2 { padding: 8px 15px 15px 15px; }
    .container-a1 h2, .container-a2 h2 { font-size: 16px; margin-bottom: 10px; padding-bottom: 5px; }
    .form-group, .form-group-inline { margin-bottom: 12px; }
    .form-group-inline:last-child { margin-bottom: 4px; }
    .form-group-inline { flex-direction: column; align-items: flex-start; }
    .form-group-inline label { width: 100%; text-align: left; margin-right: 0; margin-bottom: 3px; font-size: 11px; }
    .form-group-inline .input-wrapper, .form-group-inline .input-wrapper-date { width: 100%; }
    .input-row { gap: 8px; }
    .input-row input, .input-row select, .input-full, .input-with-icon, .form-group-inline select, .form-group-inline input { padding: 6px; font-size: 11px; }
    .input-cp { min-width: 80px; }
    .form-button { font-size: 13px; padding: 7px; }
    .button-container { margin-top: 0; }
    .espace-blanc-1, .espace-blanc-2 { height: 3px; }
    .barre-separation-A { height: 2px; }
    .defilant { padding: 2px 0; }
    .defilant-contenu .txt { font-size: 10px; }
    .defilant-contenu .sep { font-size: 10px; }
    .defilant-contenu img { max-height: 22px; }
    .defilant-contenu { animation: scroll 15s linear infinite; }
}