/* ===== RÉINITIALISATION GÉNÉRALE ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f5f5f5;
    color:black;
    line-height:1.6;
}

/* ===== HEADER ===== */

header{
    background:#0056b3;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    flex-wrap:wrap;
}

.logo h1{
    font-size:32px;
}

.logo p{
    font-size:15px;
}

nav ul{
    display:flex;
    list-style:none;
}

nav ul li{
    margin-left:25px;
}

nav ol li a{
    color:lightgreen;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

nav ul li a:hover{
    color:#ffd700;
}

/* ===== SECTION HERO (bannière d'accueil) ===== */

.hero{
    height:80vh;
    background:url("o.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-text{
    background:rgba(0,0,0,0.65);
    color:white;
    padding:40px;
    border-radius:15px;
    max-width:800px;
    text-align:center;
    animation:apparition 1.5s ease;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.hero-text h2{
    font-size:45px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#ffd700;
    margin-bottom:20px;
    text-shadow:2px 2px 5px red;
}

.hero-text p{
    font-size:20px;
    line-height:1.8;
}

.hero h2{
    font-size:45px;
    margin-bottom:20px;
}

.hero p{
    margin-bottom:25px;
}

.btn{
    display:inline-block;
    background:#ffd700;
    color:#000;
    padding:12px 25px;
    text-decoration:none;
    border-radius:6px;
    font-weight:bold;
}

.btn:hover{
    background:#ffc107;
}

/* ===== SECTIONS GÉNÉRALES ===== */

section{
    padding:60px 8%;
}

section h2{
    text-align:center;
    margin-bottom:30px;
    color:#0056b3;
}

/* ===== CARTES ===== */

.cartes{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.carte{
    background:lightblue;
    width:300px;
    padding:25px;
    border-radius:10px;
    box-shadow:0 5px 12px rgba(0,0,0,.15);
    text-align:center;
    transition:.3s;
}

.carte:hover{
    transform:translateY(-8px);
}

/* ===== AVANTAGES ===== */

.avantages{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.avantages div{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:8px;
    box-shadow:0 5px 12px rgba(0,0,0,.1);
}

/* ===== FORMULAIRES ===== */

form{
    max-width:700px;
    margin:auto;
    background:white;
    padding:30px;
    border-radius:10px;
}

input,
select,
textarea{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:5px;
}

button{
    background:#0056b3;
    color:white;
    border:none;
    padding:15px;
    cursor:pointer;
    width:100%;
    font-size:17px;
    border-radius:5px;
}

button:hover{
    background:#003f85;
}

/* ===== FOOTER ===== */

footer{
    background:#003366;
    color:white;
    text-align:center;
    padding:30px;
}

/* ===== TABLEAU DES TARIFS / RÉSULTATS ===== */

table{
    width:100%;
    border-collapse:collapse;
    margin:30px auto;
    background:white;
    box-shadow:0 5px 12px rgba(0,0,0,.15);
    border-radius:10px;
    overflow:hidden;
}

table th{
    background:#0056b3;
    color:white;
    padding:15px;
    text-align:center;
}

table td{
    padding:12px;
    text-align:center;
    border:1px solid #ddd;
}

table tr:nth-child(even){
    background:#f5f5f5;
}

table tr:hover{
    background:#dbeeff;
}

/* ===== RESPONSIVE MOBILE (max-width:768px) ===== */

@media(max-width:768px){

header{
    flex-direction:column;
}

/* ----- Logo de l'école ----- */

.logo-image{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:15px auto;
    border:4px solid #ffd700;
    box-shadow:0 0 15px rgba(255,215,0,0.8);
    transition:0.4s;
}

.logo-image:hover{
    transform:scale(1.08);
}

/* ----- Nom de l'école ----- */

nav{
    text-align:center;
}

nav h2{
    font-size:38px;
    color:white;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:15px;
    font-weight:bold;
    text-shadow:
        2px 2px 5px #000,
        0 0 10px #ffd700;
    animation:titre 2s infinite alternate;
}

/* ----- Animation du titre ----- */

@keyframes titre{

    from{
        color:white;
        transform:scale(1);
    }

    to{
        color:red;
        transform:scale(1.03);
    }

}

nav ul{
    flex-direction:column;
    text-align:center;
    margin-top:15px;
}

nav ol li{
    margin:10px 0;
}

nav ul li a:visited{
    color:white;
}

nav ul li a:link{
    color:white;
}

nav ul li a:hover{
    color:#ffd700;
}

nav ul li a:active{
    color:#ffd700;
}

.hero h2{
    font-size:32px;
}

.hero{
    height:85vh;
    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("images/ecole.jpg") center/cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

}

/* ===== EN-TÊTE / NAV (hors media query) ===== */

header{
    background:#0056b3;
    color:white;
    padding:20px 8%;
}

nav{
    background:#0056b3;
    text-align:center;
    padding:20px 0;
}

nav h2{
    color:white;
    margin-bottom:15px;
}

nav ul{
    color:yellow;
    display:flex;
    justify-content:center;
    list-style:none;
    flex-wrap:wrap;
}

nav ul li a{
    color:yellow;
    text-decoration:none;
    font-weight:bold;
}

/* ===== VERSION ORDINATEUR (min-width:992px) ===== */

@media (min-width: 992px){

main,
section{
    max-width:1200px;
    margin:auto;
}

table{
    width:100%;
}

img{
    max-width:100%;
    height:auto;
}

}
/* ===== SURCHARGE COULEURS EN-TÊTE (ajouté) ===== */

.logo h1,
.logo p{
    color:lightyellow !important;
}

nav ul li a{
    color:lightblue !important;
}

nav ul li a:link,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active{
    color:lightgreen !important;
}
/* =========================================================
💳 PAGE PAIEMENT - FRATERNITÉ

Couleurs principales :
🔵 Bleu FRATERNITÉ : #0056b3
⚪ Blanc             : #ffffff
🟡 MTN               : #ffcc00
🔵 Moov              : #1688d8
🟢 Celtiis           : #16a36a

Tu peux modifier les couleurs ici si nécessaire.
========================================================= */

/* =========================================================
CONTENEUR PRINCIPAL
========================================================= */

.payment-section {

padding: 80px 20px;

/* Fond légèrement gris */
background: #f7f9fc;

}

.payment-container {

max-width: 1100px;

margin: auto;

}

/* =========================================================
TITRE
========================================================= */

.payment-title {

text-align: center;

margin-bottom: 45px;

}

.payment-title span {

display: inline-block;

color: #0056b3;

font-size: 14px;

font-weight: 700;

letter-spacing: 2px;

margin-bottom: 8px;

}

.payment-title h2 {

color: #172b4d;

font-size: 34px;

margin: 0 0 12px;

}

.payment-title p {

color: #666;

max-width: 650px;

margin: auto;

line-height: 1.7;

}

/* =========================================================
💳 CARTES DES OPÉRATEURS
========================================================= */

.payment-cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 25px;

margin-bottom: 35px;

}

/* =========================================================
CARTE
========================================================= */

.payment-card {

background: #ffffff;

border-radius: 18px;

padding: 28px;

border: 1px solid #e4e9f0;

box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.07);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

/* Animation quand on passe la souris */

.payment-card:hover {

transform: translateY(-5px);

box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.11);

}

/* =========================================================
EN-TÊTE DE LA CARTE
========================================================= */

.operator-header {

display: flex;

align-items: center;

gap: 15px;

margin-bottom: 25px;

}

.operator-header h3 {

margin: 0 0 4px;

color: #172b4d;

font-size: 19px;

}

.operator-header p {

margin: 0;

color: #777;

font-size: 13px;

}

/* =========================================================
LOGOS
========================================================= */

.operator-logo {

width: 55px;

height: 55px;

border-radius: 15px;

display: flex;

align-items: center;

justify-content: center;

font-weight: 800;

flex-shrink: 0;

}

/* 🟡 MTN */

.mtn-logo {

background: #ffcc00;

color: #111;

font-size: 13px;

}

/* 🔵 MOOV */

.moov-logo {

background: #1688d8;

color: #ffffff;

font-size: 13px;

}

/* 🟢 CELTIIS */

.celtiis-logo {

background: #16a36a;

color: #ffffff;

font-size: 25px;

}

/* =========================================================
📱 CODE DE PAIEMENT
========================================================= */

.code-box {

background: #f4f7fb;

border: 1px solid #e2e8f0;

border-radius: 12px;

padding: 17px;

margin-bottom: 15px;

}

.code-box span {

display: block;

color: #777;

font-size: 11px;

font-weight: 600;

margin-bottom: 7px;

letter-spacing: 0.5px;

}

.code-box strong {

display: block;

color: #0056b3;

font-size: 23px;

letter-spacing: 1px;

}

/* =========================================================
📋 BOUTON COPIER
========================================================= */

.copy-btn {

width: 100%;

border: none;

background: #0056b3;

color: #ffffff;

padding: 13px 18px;

border-radius: 10px;

font-size: 14px;

font-weight: 600;

cursor: pointer;

transition:
    background 0.2s ease,
    transform 0.2s ease;

}

.copy-btn:hover {

background: #004494;

}

.copy-btn:active {

transform: scale(0.98);

}

/* =========================================================
📢 CONSIGNE IMPORTANTE
========================================================= */

.payment-instruction {

display: flex;

align-items: flex-start;

gap: 18px;

background: #ffffff;

border-left: 5px solid #0056b3;

border-radius: 14px;

padding: 22px 25px;

margin-bottom: 25px;

box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.06);

}

.warning-icon {

width: 38px;

height: 38px;

background: #0056b3;

color: #ffffff;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-weight: 800;

flex-shrink: 0;

}

.payment-instruction h3 {

margin: 0 0 7px;

color: #172b4d;

}

.payment-instruction p {

margin: 0;

color: #555;

line-height: 1.6;

}

/* =========================================================
📝 INFORMATIONS COMPLÉMENTAIRES
========================================================= */

.payment-extra {

background: #ffffff;

border-radius: 15px;

padding: 25px;

text-align: center;

border: 1px solid #e6eaf0;

}

.payment-extra h3 {

margin: 0 0 10px;

color: #0056b3;

}

.payment-extra p {

margin: 0;

color: #666;

line-height: 1.6;

}

/* =========================================================
📱 TABLETTE
========================================================= */

@media (max-width: 850px) {

.payment-cards {

    grid-template-columns: 1fr;

    max-width: 550px;

    margin-left: auto;

    margin-right: auto;

}

}

/* =========================================================
📱 TÉLÉPHONE
========================================================= */

@media (max-width: 600px) {

.payment-section {

    padding: 55px 15px;

}

.payment-title h2 {

    font-size: 27px;

}

.payment-card {

    padding: 22px;

}

.code-box strong {

    font-size: 21px;

}

.payment-instruction {

    padding: 18px;

}

}