body{
    --font-title: "Antonio", sans-serif;
    --font-body: "Raleway", sans-serif;
    font-family: 'Ledger', serif;
    /*font-family: 'Jost', sans-serif;*/
    font-size: 100% !important;
}
.antonio{
    font-family: var(--font-title);
}
.raleway{
    font-family: var(--font-body);
}
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, button, a {
    font-family: var(--font-title);
}
p, input {
    font-family: var(--font-body);
}

* { margin: 0; }
html, body { height: 90%; }
.mainPage { min-height: 90%; }
.footer { height: 142px; }
.footer {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    z-index: 999;
}
.h90vh{ height: 90vh !important; }
.content { /*flex: 1;*/ }
.footer { /* kept */ }
.bg-grDC{ background-color: #DCDCDC }
.active{ border: 1px solid grey !important; }
.taJustify{ text-align: justify !important; }
.bblack2{ border: 2px solid black !important; }
.colorYel{ color: yellow !important; }
header { border-bottom: 1px solid darkred; }
footer{ border-top: 1px solid darkred; }
p, input{ font-size: 150% !important; }
ul, li{ list-style: none !important; }
.Caveat{ font-family: 'Caveat', cursive !important; }
header li a{
    letter-spacing: 2px;
    font-weight: bold;
    background-image: linear-gradient(
            to bottom,
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(148,198,49),
            rgb(148,198,49),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17)
    ) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}
.prevent{
    letter-spacing: 2px;
    background-image: linear-gradient(
            to bottom,
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(148,198,49),
            rgb(148,198,49),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17)
    ) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}
header li:hover{
    color: rgb(148,198,49) !important;
    box-shadow: 2px 2px yellow,.2em .2em rgb(0,148,198);
}
.colorGr { color: rgb(148,198,49) !important; }
.bKab1{ border: 1px solid rgb(148,198,49) !important; }
.bShadowKab{ box-shadow: 2px 2px yellow,.2em .2em rgb(0,148,198); }
.bShadowKab2{ box-shadow: 2px 2px 2px 2px yellow,.2em .2em .8em .2em rgb(0,148,198); }
.bShadowKab3 { color: rgb(148,198,49) !important; box-shadow: 1px 1px 1px 1px yellow,.1em .1em .1em .2em rgb(0,148,198); }
.bg-kab1 { background: linear-gradient(90deg, rgb(247,222,17) 0%, rgb(148,198,49) 55%, rgb(0,148,198) 100%); }
.bg-kab2 { background: linear-gradient(90deg, rgb(0,148,198) 0%, rgb(148,198,49) 55%, rgb(247,222,17) 100%); }
.bg-kab3 { background: linear-gradient(90deg, black 0%, rgb(148,198,49) 55%, black 100%); }
.bg-bleu { background-color: rgb(0,148,198) !important; }
.navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; left: -42px; }
.border-image1 { border-image-source: url({{asset('assets/images/motif1.jpeg')}}); }
.words {
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 0;
    line-height: 1.5;
    font-family: var(--font-body);
    letter-spacing: 2px;
    font-weight: bold;
    background-image: linear-gradient(
            to bottom,
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(0,148,198),
            rgb(148,198,49),
            rgb(148,198,49),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17),
            rgb(247,222,17)
    ) !important;
    color: transparent !important;
}
.words span { font-size: 3rem; display: inline; animation: move 3s ease-in-out infinite; }
@keyframes move {
    0% { transform: translate(-30%, 0); }
    50% { text-shadow: 0 25px 50px rgba(0, 0, 0, 0.75); }
    100% { transform: translate(30%, 0); }
}
.words span:nth-child(2) { animation-delay: 0.5s; }
.words span:nth-child(3) { animation-delay: 1s; }
.words span:nth-child(4) { animation-delay: 1.5s; }
.words span:nth-child(5) { animation-delay: 2s; }
.video-anzinWass { position: relative; width: 100%; overflow: hidden; }
.video-anzinWass video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.contentanZInWass{ position: relative; z-index: 1; }
.bMotif1 {
    border-width: 60px; border-style: solid;
    border-image-source: url('/assets/images/motif1.jpeg');
    border-image-repeat: round;
    background: lightgrey; opacity: 0.6;
}
.pagination .active .page-link {
    background: linear-gradient(90deg, black 0%, rgb(148,198,49) 55%, black 100%) !important;
    color: white !important; border-color: rgb(148,198,49) !important;
}
.pagination .page-item a { color: rgb(148,198,49) !important; }
.pagination a:focus { outline-color: rgb(148,198,49) !important; outline-style: solid; outline-width: 2px; }
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
#principale{ /* background placeholder */ }
h1, p,  ul{ color: black; }
li{ list-style: none; }
img{ width: 26px; }
/* Animation property */
.alert { animation: wiggle 2s linear; }
/* Keyframes */
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}
textarea:focus, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus {
    border-color: #81256f !important; box-shadow: none !important;
}
label{ color: black !important; }
.brillant1{
    box-shadow:0 0 8px black,
    inset 0 0 8px black,
    0 0 16px #c6e2ff,
    inset 0 0 16px lightblue,
    0 0 32px #c6e2ff,
    inset 0 0 32px #c6e2ff;
}
.brillant2{
    box-shadow:0 0 8px black,
    inset 0 0 8px #fff,
    0 0 16px #c6e2ff,
    inset 0 0 16px #c6e2ff,
    0 0 32px #c6e2ff,
    inset 0 0 32px #c6e2ff;
}
.brillant3{
    box-shadow:0 0 8px #fff,
    inset 0 0 8px black,
    0 0 16px #c6e2ff,
    inset 0 0 16px #c6e2ff,
    0 0 32px #c6e2ff,
    inset 0 0 32px #c6e2ff;
}
.brillant4{
    box-shadow: 0 0 1px black, inset 0 0 2px black, 0 0 6px white, inset 0 0 1px black, 0 0 6px #fff, inset 0 0 6px black;
}
.brillant5{
    box-shadow: 0 0 2px black, inset 0 0 8px black, 0 0 4px white, inset 0 0 6px black, 0 0 2px #fff, inset 0 0 1px black;
}
.h400{ height: 400px !important; }

/* ====== FIN ORIGINAL ====== */



/* ====== (tout ton CSS d’origine inchangé ci-dessus) ====== */


/* ====== Amawal – design chic & moderne ====== */
.amawal {
    --aw-bg: #F9FAFB;
    --aw-card: #ffffff;
    --aw-text: #1F2937;          /* anthracite lisible */
    --aw-muted: #6B7280;         /* gris doux */
    --aw-primary: #3E8AFF;       /* bleu moderne et chic */
    --aw-accent: #E5E4E2;        /* platinum */
    --aw-border: rgba(0,0,0,.1);
    --aw-radius: 18px;
    --aw-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.amawal .bg-grDC {
    background: linear-gradient(135deg, #F9FAFB 0%, #E5E4E2 100%);
    color: var(--aw-text);
}

/* Titres */
.amawal h1 {
    font-weight: 700;
    letter-spacing: .5px;
}

/* Bouton “?” */
.amawal .btn.btn-white {
    font-family: var(--font-title);
    border: none;
    background: var(--aw-card);
    border-radius: 50%;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--aw-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.amawal .btn.btn-white:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Champ recherche */
.amawal #inputSearch.form-control {
    max-width: 720px;
    margin: 0 auto 12px;
    border-radius: 999px;
    border: 1px solid var(--aw-border);
    padding: 14px 20px;
    font-size: 1.1rem !important;
    box-shadow: none;
    transition: all .2s ease;
}
.amawal #inputSearch:focus {
    border-color: var(--aw-primary) !important;
    box-shadow: 0 0 0 6px rgba(62,138,255,.15) !important;
}

/* Bouton Nadi */
.amawal .bg-kab3.active {
    font-family: var(--font-title);
    max-width: 420px;
    margin: 6px auto;
    border-radius: 999px;
    border: none !important;
    padding: 14px 24px;
    font-size: 1.15rem;
    font-weight: 600;
    /*background: linear-gradient(90deg, var(--aw-primary) 0%, #1E40AF 100%) !important;*/
    background: linear-gradient(90deg, black 0%, rgb(148,198,49) 55%, black 100%);
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(62,138,255,.35);
    transition: all .2s ease;
}
.amawal .bg-kab3.active:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* Résultats & suggestions */
.amawal #affichageSyn,
.amawal #affichageSugg,
.amawal .shadow-lg.bg-body.rounded.border.border-dark {
    font-family: var(--font-body);
    background: var(--aw-card) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    box-shadow: var(--aw-shadow) !important;
}

/* Message d’attente */
.amawal #affichageSyn p.h1,
.amawal #affichageSugg p.h1 {
    font-size: 1.3rem !important;
    font-weight: 400;
}

/* Encadré compteur */
.amawal .brillant3 {
    font-family: var(--font-title);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    background: var(--aw-card);
    border: 1px solid var(--aw-border);
    font-weight: 600;
}

/* Formulaire participatif */
.amawal .brillant1,
.amawal .brillant5 {
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow) !important;
    background: var(--aw-card) !important;
}

/* Champs form */
.amawal input[type="text"],
.amawal input[type="search"],
.amawal textarea,
.amawal select {
    border: 1px solid var(--aw-border) !important;
    border-radius: 12px !important;
    padding: 10px 14px;
    font-size: 1rem !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.amawal input:focus,
.amawal textarea:focus,
.amawal select:focus {
    border-color: var(--aw-primary) !important;
    box-shadow: 0 0 0 5px rgba(62,138,255,.15) !important;
}

/* Bouton submit du form (Arnu) */
.amawal button[type="submit"] {
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 1.1rem;
    /*background: linear-gradient(90deg, var(--aw-primary) 0%, #2563EB 100%) !important;*/
    background: linear-gradient(90deg, black 0%, rgb(148,198,49) 55%, black 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(62,138,255,.25);
    transition: all .2s ease;
}
.amawal button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Modal */
.amawal .modal-content {
    border-radius: 20px;
    border: 1px solid var(--aw-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    background: var(--aw-card);
}
.amawal .modal-header {
    border-bottom: 1px solid var(--aw-border);
}
.amawal .modal-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--aw-text);
}

/* Flash messages */
.amawal .alert p {
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    box-shadow: var(--aw-shadow);
}

/* Petites animations */
.amawal .btn,
.amawal input,
.amawal textarea,
.amawal select {
    transition: all .2s ease;
}