/* =========================================================
   THEME-PRO.CSS — ASSOCIATION-DOUNIA
   Habillage professionnel chargé EN DERNIER (après style.css
   et les blocs <style> de index.php).

   Principe : ce fichier ne change que l'APPARENCE. Aucune
   structure HTML n'est supposée modifiée, aucun élément n'est
   masqué (sauf balises vides), et rien ici ne touche au
   défilement automatique :
     - pas d'overflow/hauteur fixe sur html/body,
     - pas de scroll-snap,
     - scroll-behavior laissé à style.css (le script le gère).
   Pour revenir à l'ancien affichage : retirer la ligne
   <link ... theme-pro.css> dans index.php.
   ========================================================= */

:root {
    --ad-vert-900: #0b3a23;
    --ad-vert-800: #0f4c2e;
    --ad-vert-700: #146c3a;
    --ad-vert-600: #1c8a4c;
    --ad-vert-100: #e6f2ea;
    --ad-vert-50:  #f3f8f4;
    --ad-or:       #d8a31a;
    --ad-or-clair: #f4d77a;
    --ad-texte:    #1d2a22;
    --ad-texte-2:  #55635a;
    --ad-bordure:  #dfe7e1;
    --ad-fond:     #f7f8f5;
    --ad-blanc:    #ffffff;
    --ad-rayon:    16px;
    --ad-ombre:    0 1px 2px rgba(16, 40, 26, .06), 0 8px 24px rgba(16, 40, 26, .08);
    --ad-ombre-forte: 0 2px 4px rgba(16, 40, 26, .08), 0 18px 40px rgba(16, 40, 26, .16);
    --ad-police: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --ad-police-titre: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
    --ad-contenu: 1200px;
    /* marge latérale qui centre le contenu tout en gardant un fond pleine largeur */
    --ad-gouttiere: max(20px, calc((100% - var(--ad-contenu)) / 2));
}

/* ============================= */
/* BASE                          */
/* ============================= */

body {
    font-family: var(--ad-police);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ad-texte);
    background: var(--ad-fond);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ad-vert-700);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--ad-or); }
a:not([href]) { color: inherit; }

h1, h2, h3, h4 { font-family: var(--ad-police-titre); }

::selection { background: var(--ad-or-clair); color: var(--ad-vert-900); }

/* ============================= */
/* NAVIGATION                    */
/* ============================= */

nav {
    background: rgba(11, 58, 35, .92);
    opacity: 1;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 10px 16px;
}

header nav ul { gap: 2px 4px; }

header nav li { font-size: 14px; }

header nav li a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 7px 12px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
header nav li a:hover,
header nav li a:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* "Espace membre" et "Administration" mis en avant */
header nav li:nth-last-child(2) a {
    background: var(--ad-or);
    color: var(--ad-vert-900);
    font-weight: 600;
    margin-left: 8px;
}
header nav li:nth-last-child(2) a:hover { background: var(--ad-or-clair); color: var(--ad-vert-900); }
header nav li:last-child a {
    border: 1px solid rgba(255, 255, 255, .35);
}

/* ============================= */
/* ACCUEIL (hero)                */
/* ============================= */

header #imagePrincipale {
    position: relative;
    height: 100vh;
    min-height: 560px;
    max-height: 920px;
    padding: 110px var(--ad-gouttiere) 70px;
    background: var(--ad-vert-900);
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* Photo de fond légèrement floutée (le texte incrusté dans l'image ne gêne plus) */
header #imagePrincipale::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -2;
    background: url(./images/PubPourSite/acceuil.webp) center 80% / cover no-repeat;
    filter: blur(4px) saturate(115%);
}

header #imagePrincipale::after {
    /* voile vert au-dessus de la photo, sous le texte */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 40, 24, .95) 0%, rgba(9, 48, 29, .86) 30%, rgba(11, 58, 35, .70) 62%, rgba(8, 30, 18, .88) 100%);
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 22px;
    border: 1px solid rgba(244, 215, 122, .55);
    border-radius: 999px;
    background: rgba(216, 163, 26, .14);
    color: var(--ad-or-clair);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

header #imagePrincipale h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

header #premierTrait {
    width: 84px;
    height: 4px;
    margin: 22px auto;
    border-radius: 4px;
    background: var(--ad-or);
}

header #imagePrincipale h3 {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--ad-police);
    font-size: clamp(1.02rem, 2vw, 1.3rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.hero-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-bouton:hover { transform: translateY(-2px); }

.hero-bouton-principal {
    background: var(--ad-or);
    color: var(--ad-vert-900);
    box-shadow: 0 10px 24px rgba(216, 163, 26, .35);
}
.hero-bouton-principal:hover { background: var(--ad-or-clair); color: var(--ad-vert-900); }

.hero-bouton-secondaire {
    border: 1.5px solid rgba(255, 255, 255, .6);
    color: #fff;
}
.hero-bouton-secondaire:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.hero-chiffres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 44px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-chiffres div { text-align: center; }
.hero-chiffres span {
    display: block;
    max-width: 240px;
    margin: 4px auto 0;
    line-height: 1.45;
}
.hero-chiffres strong {
    display: block;
    font-family: var(--ad-police-titre);
    font-size: 1.9rem;
    color: var(--ad-or-clair);
    line-height: 1.1;
}
.hero-chiffres span {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Deuxième bandeau image (dans <main>) : bande de transition */
main > #imagePrincipale {
    position: relative;
    height: 42vh;
    min-height: 260px;
    max-height: 420px;
    padding: 0 var(--ad-gouttiere);
    background: var(--ad-vert-900);
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
main > #imagePrincipale::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    background:
        linear-gradient(rgba(11, 58, 35, .74), rgba(11, 58, 35, .74)),
        url(./images/PubPourSite/acceuil.webp) center 85% / cover no-repeat;
    filter: blur(4px);
}
main > #imagePrincipale h1:empty { display: none; }
main > #imagePrincipale::after {
    content: "« Ensemble pour la paix, la cohésion sociale et le développement »";
    max-width: 820px;
    color: #fff;
    font-family: var(--ad-police-titre);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}

/* ============================= */
/* SECTIONS — socle commun       */
/* ============================= */

section {
    background-color: var(--ad-fond);
}

section h2 {
    font-family: var(--ad-police-titre);
    color: var(--ad-vert-800);
    text-decoration: none;
    font-weight: 700;
}

p { padding: 0; }

/* Titres de section ajoutés visuellement (aucun HTML modifié) */
section#realiser::before,
section#projets::before,
section#proces::before,
section#Lettres::before,
section#infos::before,
section#vocaux::before,
section#galerie::before,
section#contact::before {
    display: block;
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 8px;
    font-family: var(--ad-police-titre);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ad-vert-800);
    text-align: center;
    /* soulignement doré sous le titre */
    background: linear-gradient(var(--ad-or), var(--ad-or)) center bottom / 64px 4px no-repeat;
    padding-bottom: 18px;
}
section#realiser::before { content: "Nos réalisations"; }
section#projets::before  { content: "Nos projets"; }
section#proces::before   { content: "Procès et décisions de justice"; }
section#Lettres::before  { content: "Lettres officielles"; }
section#infos::before    { content: "Informations"; }
section#vocaux::before   { content: "Messages vocaux"; }
section#galerie::before  { content: "Galerie photos"; }
section#contact::before  { content: "Contactez-nous"; margin-bottom: 36px; }

/* Grille de cartes commune */
section#realiser,
section#projets,
section#proces,
section#Lettres,
section#infos,
section#vocaux,
section#pubs,
section#galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: stretch;
    gap: 28px;
    width: 100%;
    margin: 0;
    padding: 84px var(--ad-gouttiere);
    box-sizing: border-box;
}

/* Alternance des fonds pour rythmer la page */
section#realiser, section#proces, section#infos, section#pubs { background: var(--ad-blanc); }
section#projets, section#Lettres, section#vocaux, section#galerie { background: var(--ad-vert-50); }

/* Éléments vides : ne pas créer de trous dans la grille */
section#realiser > span:empty,
section#projets > span:empty,
section#proces > span:empty,
section#Lettres > span:empty,
section#infos > span:empty,
section#vocaux > span:empty,
section#pubs > span:empty,
section#galerie > span:empty,
section#realiser h3:empty, section#realiser p:empty,
section#projets h3:empty,  section#projets p:empty,
section#proces h3:empty,   section#Lettres h3:empty,
section#infos h3:empty,
section#pubs h3:empty,     section#pubs p:empty,
section#galerie h3:empty,  section#galerie p:empty,
.video h4:empty {
    display: none;
}

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

section#realiser > div.realise,
section#projets > div.travail,
section#infos > div.info,
section#pubs > div.pub,
section#galerie > div.photo {
    display: flex;
    flex-direction: column;
    width: auto;
    flex: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-radius: var(--ad-rayon);
    box-shadow: var(--ad-ombre);
    transition: transform .3s ease, box-shadow .3s ease;
}
section#realiser > div.realise:hover,
section#projets > div.travail:hover,
section#infos > div.info:hover,
section#pubs > div.pub:hover,
section#galerie > div.photo:hover {
    transform: translateY(-4px);
    box-shadow: var(--ad-ombre-forte);
}

section#realiser div img,
section#projets div img,
section#infos div img,
section#pubs div.pub img,
section#galerie div img {
    order: -1; /* l'image passe toujours en haut de la carte */
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    background: var(--ad-vert-100);
    transition: transform .6s ease;
}
section#realiser img:hover,
section#projets img:hover,
section#infos div img:hover,
section#pubs div.pub img:hover,
section#galerie div img:hover {
    opacity: 1;
    transform: scale(1.03);
}

section#realiser div h3,
section#projets div h3,
section#infos div h3,
section#pubs div.pub h3,
section#galerie div h3 {
    width: auto;
    margin: 0;
    padding: 18px 20px 20px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ad-texte);
    text-align: left;
}

/* Petit liseré de couleur en haut du texte des cartes projets */
section#projets div h3 { border-top: 3px solid var(--ad-or); }

section#realiser div p,
section#projets div p,
section#pubs div.pub p,
section#galerie div p {
    width: auto;
    margin: 0;
    padding: 0 20px 18px;
    text-align: left;
}

/* ============================= */
/* PUBLICITÉS                    */
/* ============================= */

section#pubs h2 {
    grid-column: 1 / -1;
    margin: 0 auto 8px;
    max-width: 860px;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.3;
    padding-bottom: 18px;
    background: linear-gradient(var(--ad-or), var(--ad-or)) center bottom / 64px 4px no-repeat;
}

/* ============================= */
/* PROCÈS & LETTRES (cartes texte)*/
/* ============================= */

section#proces > div.jugement,
section#Lettres > div.Lettre {
    float: none;
    width: auto;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px 24px;
    text-align: left;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-left: 4px solid var(--ad-vert-700);
    border-radius: 12px;
    box-shadow: var(--ad-ombre);
    transition: transform .3s ease, box-shadow .3s ease;
}
section#proces > div.jugement:hover,
section#Lettres > div.Lettre:hover {
    transform: translateY(-3px);
    box-shadow: var(--ad-ombre-forte);
}
section#proces > div.jugement::before,
section#Lettres > div.Lettre::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--ad-vert-100);
    font-size: 20px;
}
section#proces > div.jugement::before { content: "⚖️"; }
section#Lettres > div.Lettre::before  { content: "✉️"; }

section#proces div p,
section#Lettres div p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    color: var(--ad-texte-2);
}
section#proces div p strong,
section#Lettres div p strong { color: var(--ad-texte); }

/* Liens "Cliquer ici" : présentés comme de petits boutons */
section#proces a[href],
section#Lettres a[href] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 12px 0 4px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ad-vert-700);
    text-decoration: none;
    background: var(--ad-vert-50);
    border: 1px solid var(--ad-vert-100);
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
section#proces a[href]::after,
section#Lettres a[href]::after { content: "→"; }
section#proces a[href]:hover,
section#Lettres a[href]:hover {
    background: var(--ad-vert-700);
    color: #fff;
}
section#Lettres a[href] br { display: none; }

section#Lettres a:not([href]) {
    margin: 0;
    font-size: inherit;
    color: var(--ad-vert-800);
    text-decoration: none;
    font-weight: 600;
}

/* Lien vide (href avec seulement des espaces) : on ne l'affiche pas */
section#Lettres a[href="   "] { display: none; }

/* Carte "Conclusions" : pleine largeur, mise en valeur */
section#Lettres > div.Lettre:nth-of-type(7) {
    grid-column: 1 / -1;
    border-left-color: var(--ad-or);
    background: linear-gradient(135deg, #fffdf5, #ffffff);
}
section#Lettres > div.Lettre:nth-of-type(7)::before { content: "🤝"; background: #fbf1d3; }
section#Lettres > div.Lettre:nth-of-type(7) p { font-size: 15.5px; }

/* ============================= */
/* VOCAUX                        */
/* ============================= */

section#vocaux > div.vocal {
    width: auto;
    padding: 24px;
    text-align: left;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-radius: var(--ad-rayon);
    box-shadow: var(--ad-ombre);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
section#vocaux > div.vocal::before {
    content: "🎧";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--ad-vert-100);
    font-size: 20px;
}
section#vocaux > div.vocal > br { display: none; }
section#vocaux div h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ad-texte);
    text-align: left;
}
section#vocaux audio { width: 100%; }
section#vocaux div.vocal a {
    font-size: 14px;
    font-weight: 600;
}
section#vocaux div.vocal a br { display: none; }
section#vocaux div.vocal a::before { content: "📄 "; }

/* ============================= */
/* PRÉSENTATION                  */
/* ============================= */

#presentation {
    padding: 72px 0 0;
    background: var(--ad-blanc);
}

#presentation .presentation-image {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
#presentation .presentation-image img {
    border-radius: var(--ad-rayon);
    box-shadow: var(--ad-ombre-forte);
}

#presentation .presentation-links {
    gap: 14px 20px;
    max-width: var(--ad-contenu);
    margin: 30px auto 10px;
    padding: 0 20px;
}

#presentation .presentation-links > a {
    padding: 10px 20px;
    color: var(--ad-vert-700);
    font-weight: 600;
    background: var(--ad-vert-50);
    border: 1px solid var(--ad-vert-100);
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
#presentation .presentation-links > a:hover {
    background: var(--ad-vert-700);
    color: #fff;
    text-decoration: none;
}

.compteur-visites {
    margin: 0;
    padding: 9px 18px;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    color: var(--ad-vert-700);
    font-size: 15px;
    box-shadow: none;
}

.bouton-espace-saisie {
    padding: 10px 20px;
    background: var(--ad-vert-700);
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(20, 108, 58, .25);
}

#presentation .vocaux {
    gap: 22px;
    max-width: 900px;
    margin: 26px auto 10px;
    flex-wrap: wrap;
}
#presentation .vocal {
    flex: 1 1 320px;
    width: auto;
    max-width: 440px;
    padding: 20px;
    text-align: left;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-radius: var(--ad-rayon);
    box-shadow: var(--ad-ombre);
}
#presentation .vocal h4 {
    margin-bottom: 12px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ad-texte);
}
#presentation .vocal a {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}
#presentation .vocal a::before { content: "📄 "; }

/* Texte de présentation : carte lisible */
#presentation .presentation-texte {
    width: auto;
    max-width: 900px;
    margin: 40px auto 20px;
    padding: 40px 48px;
    background: var(--ad-vert-50);
    border: 1px solid var(--ad-vert-100);
    border-radius: 20px;
    line-height: 1.75;
}
#presentation .presentation-texte p {
    margin: 0 0 12px;
    padding: 0;
    font-size: 16px;
    color: var(--ad-texte);
}
#presentation .presentation-texte strong[style*="color:red"] {
    color: var(--ad-vert-800) !important;
}
#presentation .presentation-texte p:first-child {
    font-family: var(--ad-police-titre);
    font-size: 1.5rem;
    margin-bottom: 18px;
}
#presentation .presentation-texte p:first-child u { text-decoration: none; }

/* ============================= */
/* VIDÉOS                        */
/* ============================= */

.video-section { margin: 60px auto 0; padding-bottom: 72px; }
.video-section-titre h3 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: var(--ad-vert-800);
    padding-bottom: 16px;
    background: linear-gradient(var(--ad-or), var(--ad-or)) center bottom / 64px 4px no-repeat;
}
.video {
    background: var(--ad-vert-900);
    border-radius: 20px;
    box-shadow: var(--ad-ombre-forte);
}
.video h4 { font-weight: 600; }

/* Éléments ajoutés depuis l'admin */
.element-dynamique h4 { color: var(--ad-vert-700); }

/* ============================= */
/* CONTACT                       */
/* ============================= */

section#contact {
    padding: 90px var(--ad-gouttiere);
    background:
        radial-gradient(1200px 400px at 50% 0%, rgba(20, 108, 58, .08), transparent 70%),
        var(--ad-fond);
}

section#contact .contact-avec-espace-membre {
    max-width: 980px;
    margin: 0 auto;
    gap: 28px;
}

section#contact form#contactForm {
    max-width: 680px;
    margin: 0;
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-radius: 22px;
    padding: 34px 32px;
    box-shadow: var(--ad-ombre-forte);
}

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea {
    margin: 0;
    padding: 14px 16px;
    background: var(--ad-fond);
    border: 1px solid var(--ad-bordure);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ad-texte);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm input[type="tel"]:focus,
#contactForm textarea:focus {
    outline: none;
    background: var(--ad-blanc);
    border-color: var(--ad-vert-600);
    box-shadow: 0 0 0 4px rgba(28, 138, 76, .15);
}

#contactForm .form-buttons:first-of-type .btn-envoi,
#contactForm .form-buttons:first-of-type .btn-enregistrement {
    border-radius: 999px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 18px rgba(20, 108, 58, .22) !important;
}
#contactForm .form-buttons:first-of-type .btn-envoi {
    background: var(--ad-vert-700) !important;
    color: #fff !important;
}
#contactForm .form-buttons:first-of-type .btn-enregistrement {
    background: var(--ad-or) !important;
    color: var(--ad-vert-900) !important;
}
#contactForm .form-buttons:first-of-type .btn-envoi:hover { background: var(--ad-vert-800) !important; }
#contactForm .form-buttons:first-of-type .btn-enregistrement:hover { background: var(--ad-or-clair) !important; }

#contactForm .piece-jointe {
    background: var(--ad-vert-50);
    border: 1.5px dashed #b9cfc0;
    border-radius: 14px;
}
#contactForm .fichier-ligne {
    background: var(--ad-blanc);
    border: 1px solid var(--ad-bordure);
    border-radius: 10px;
}
#contactForm .info-fichiers {
    font-weight: 500;
    font-size: 14px;
    color: var(--ad-texte-2);
}

#contactForm .btn-lire {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ad-vert-700);
    background: transparent;
    border: 1.5px solid var(--ad-vert-700);
    border-radius: 999px;
}
#contactForm .btn-lire:hover {
    background: var(--ad-vert-700);
    color: #fff;
}

.zone-enregistrement { border-color: var(--ad-bordure); border-radius: 14px; }

.bouton-espace-membre {
    background: linear-gradient(135deg, var(--ad-vert-700), var(--ad-vert-900));
    border-radius: 18px;
    min-height: 72px;
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 12px 28px rgba(11, 58, 35, .28);
}
.bouton-espace-membre:hover {
    background: linear-gradient(135deg, var(--ad-vert-600), var(--ad-vert-800));
}

/* ============================= */
/* PIED DE PAGE                  */
/* ============================= */

.pied-pro {
    background: var(--ad-vert-900);
    color: rgba(255, 255, 255, .78);
    padding: 56px var(--ad-gouttiere) 28px;
    font-size: 14.5px;
}
.pied-pro-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}
.pied-pro h4 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.pied-pro p { margin: 0 0 6px; }
.pied-pro a { color: rgba(255, 255, 255, .85); }
.pied-pro a:hover { color: var(--ad-or-clair); }
.pied-pro ul li { margin-bottom: 6px; }
.pied-pro-bas {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

/* ============================= */
/* BOUTONS DE DÉFILEMENT         */
/* ============================= */

#boutonReprendreDefilement,
#boutonReprendreHaut,
#boutonReprendreBas {
    background: var(--ad-vert-700);
    box-shadow: 0 10px 24px rgba(11, 58, 35, .35);
    font-weight: 600;
}
#boutonReprendreDefilement:hover,
#boutonReprendreHaut:hover,
#boutonReprendreBas:hover { background: var(--ad-vert-900); }

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

@media (max-width: 992px) {
    header nav li { font-size: 13px; }
    header nav li a { padding: 6px 9px; }
    #presentation .presentation-texte { padding: 32px 28px; margin-left: 20px; margin-right: 20px; }
}

/* ============================= */
/* MOBILE                        */
/* ============================= */

@media (max-width: 700px) {
    /* Nom de l'association à gauche de la barre, bouton menu à droite */
    nav {
        flex-wrap: wrap;
        padding: 8px 12px;
    }
    nav::before {
        content: "Association-Dounia";
        margin-right: auto;
        color: #fff;
        font-family: var(--ad-police-titre);
        font-weight: 700;
        font-size: 17px;
        letter-spacing: .01em;
    }
    .menu-toggle {
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 10px;
    }
    header nav ul { gap: 0; }
    header nav li { font-size: 15px; }
    header nav li a {
        border-radius: 0;
        padding: 13px 8px;
        text-align: left;
    }
    header nav li:nth-last-child(2) a,
    header nav li:last-child a {
        margin: 8px 0 0;
        border-radius: 10px;
        text-align: center;
    }

    header #imagePrincipale {
        height: auto;
        min-height: calc(100vh - 54px);
        max-height: none;
        padding: 60px 20px 50px;
    }
    main > #imagePrincipale { min-height: 220px; }
    .hero-chiffres { gap: 14px 26px; }
    .hero-chiffres strong { font-size: 1.5rem; }

    section#realiser,
    section#projets,
    section#proces,
    section#Lettres,
    section#infos,
    section#vocaux,
    section#pubs,
    section#galerie {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 60px 16px;
    }

    #presentation { padding-top: 40px; }
    #presentation .presentation-image { padding: 0 12px; }
    #presentation .presentation-texte {
        margin: 30px 12px 10px;
        padding: 26px 20px;
    }
    #presentation .presentation-links > a { width: auto; }
    #presentation .vocal { flex: none; width: 100%; max-width: none; }

    section#contact { padding: 60px 16px; }
    #contactForm { padding: 24px 18px; }
}

/* Menu mobile ouvert : on masque les boutons de défilement qui le recouvraient */
body:has(#menuPrincipal.menu-ouvert) #groupeBoutonsDefilement { display: none !important; }