/* Centre d'aide Aosei — faq.aosei.ci
   Disposition calquée sur le centre d'aide WhatsApp (en-tête fin, rubriques dans une barre
   latérale permanente, recherche au centre), habillée de la charte du site mère aosei.ci :
   palette « Terre d'Afrique », Montserrat, boutons pilule. */

:root {
    --fond: #fffbf5;
    --surface: #f3ebdd;
    --surface-forte: #ecdfca;
    --ivoire: #f6e7cf;
    --creme: #fbf5ec;
    --terre: #4a2814;
    --laterite: #9a5f2e;
    --ocre: #d49a5c;
    --nuit: #1e120a;
    --trait: #7a4a24;
    --texte: #2a170b;
    --doux: #6a4c33;
    --ligne: #e6d6bd;
    --succes: #4a6a3a;
    --erreur: #c2412d;
    --entete: 64px;
    --lateral: 340px;
    --ombre: 0 12px 32px -12px #4a28144d, 0 0 0 1px #4a28140f;
    --f-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --marge: clamp(20px, 5vw, 64px);
    --max: 1200px;
    --f-parole: "Montserrat", system-ui, sans-serif;
    --degrade: linear-gradient(135deg, var(--ocre) 0%, var(--laterite) 50%, var(--terre) 100%);
    /* Fond de discussion officiel (AOSEI_Identite_Visuelle/background), comme le fond des
       conversations WhatsApp. */
    --fond-motif: url("../brand/aosei_fond_discussion.webp");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 400 16px/1.6 var(--f-ui);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--terre); margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
mark { background: #f1ddbc; color: var(--terre); border-radius: 3px; padding: 0 2px; }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; border-radius: 6px; }

.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lien-evitement {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--terre); color: var(--ivoire); padding: 10px 16px; border-radius: 999px;
}
.lien-evitement:focus { top: 12px; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Boutons (identiques au site mère) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    padding: .9em 1.45em; border: 0; border-radius: 999px; cursor: pointer;
    font-size: 16px; font-weight: 600; line-height: 1.1; white-space: nowrap;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.btn-plein { background: var(--terre); color: var(--ivoire); }
.btn-plein:hover { background: var(--laterite); }
.btn-contour { background: transparent; box-shadow: inset 0 0 0 1.5px var(--terre); color: var(--terre); }
.btn-contour:hover { background: var(--terre); color: var(--ivoire); }
.btn-petit { padding: .65em 1.1em; font-size: 15px; }

/* ---------- En-tête ---------- */
.entete {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 16px;
    height: var(--entete); padding: 0 16px 0 12px;
    background: var(--fond); border-bottom: 1px solid var(--ligne);
}
.marque { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--terre); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.marque img { width: 34px; height: 34px; }

.entete-recherche { flex: 1; max-width: 520px; margin-left: calc(var(--lateral) - 200px); }
.entete-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lien-site { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; color: var(--doux); font-size: 15px; font-weight: 600; }
.lien-site .ic { width: 18px; height: 18px; color: var(--laterite); }
.lien-site:hover { background: var(--surface); color: var(--terre); }
.entete-langue {
    position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 0 14px; border-radius: 10px;
    background: var(--surface); color: var(--terre); font-size: 15px; font-weight: 700;
}
.entete-langue:hover,
.entete-langue:focus-within { background: var(--surface-forte); }
.entete-langue .ic { width: 18px; height: 18px; color: var(--laterite); }
.entete-langue select {
    appearance: none; -webkit-appearance: none; padding: 9px 34px 9px 0; border: 0; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    color: inherit; font: inherit;
}
.entete-langue select:focus-visible { outline: 0; }
.entete-langue:focus-within { box-shadow: 0 0 0 2px var(--laterite); }
.entete-langue option { color: var(--texte); font-weight: 500; }

.burger {
    display: none; width: 44px; height: 44px; border: 0; border-radius: 999px;
    background: transparent; color: var(--terre); cursor: pointer; align-items: center; justify-content: center;
}
.burger:hover { background: var(--surface); }
.burger .burger-fermer { display: none; }
.burger[aria-expanded="true"] .burger-ouvrir { display: none; }
.burger[aria-expanded="true"] .burger-fermer { display: block; }

/* ---------- Coque : barre latérale + contenu ---------- */
.coque { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: calc(100vh - var(--entete)); }

.lateral {
    position: sticky; top: var(--entete); align-self: start;
    height: calc(100vh - var(--entete)); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 10px 24px; background: var(--fond);
    scrollbar-width: thin; scrollbar-color: var(--ligne) transparent;
}
.arbre { list-style: none; }
.arbre details > summary { list-style: none; cursor: pointer; }
.arbre details > summary::-webkit-details-marker { display: none; }

.arbre-categorie > details > summary {
    display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 12px;
    color: var(--terre); font-weight: 700; font-size: 16px; line-height: 1.3;
}
.arbre-categorie > details > summary:hover { background: var(--creme); }
.arbre-categorie > details > summary[aria-current="page"] { background: var(--surface); }
.arbre-pastille {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--terre);
}
.arbre-pastille .ic { width: 19px; height: 19px; }
.arbre-categorie > details[open] > summary .arbre-pastille { background: var(--terre); color: var(--ivoire); }
.arbre-libelle { flex: 1; min-width: 0; }
.arbre-chevron { width: 18px; height: 18px; color: var(--doux); transition: transform .2s; }
details[open] > summary > .arbre-chevron { transform: rotate(180deg); }

.arbre-sections { list-style: none; padding: 4px 0 10px 62px; }
.arbre-tout { display: block; padding: 6px 10px; border-radius: 10px; color: var(--laterite); font-size: 14px; font-weight: 700; }
.arbre-tout:hover { background: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.arbre-section > details > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-radius: 10px; color: var(--texte); font-weight: 600; font-size: 14.5px; line-height: 1.35;
}
.arbre-section > details > summary:hover { background: var(--creme); }
.arbre-section .arbre-chevron { width: 16px; height: 16px; }
.arbre-articles { list-style: none; padding: 2px 0 6px 10px; }
.arbre-articles a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--doux); font-size: 14px; line-height: 1.4; }
.arbre-articles a:hover { color: var(--terre); background: var(--creme); }
.arbre-articles a[aria-current="page"] { color: var(--terre); font-weight: 700; background: var(--surface); }

.lateral-pied { display: grid; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.lateral-pied a { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-radius: 12px; color: var(--doux); font-weight: 600; font-size: 15px; }
.lateral-pied a:hover { background: var(--creme); color: var(--terre); }
.lateral-pied .ic { color: var(--laterite); }

.voile { position: fixed; inset: var(--entete) 0 0; z-index: 40; background: #1e120a59; }
.voile[hidden] { display: none; }

.principal { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; }

/* Le motif reste fixe derrière le contenu (comme dans une discussion) et très atténué pour que
   le texte reste parfaitement lisible ; en-tête et barre latérale gardent un fond uni. */
.principal::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    top: var(--entete); right: 0; bottom: 0; left: var(--lateral);
    background: var(--fond-motif) left top / 600px auto repeat;
    opacity: .08;
    /* Fondu du haut vers le bas : le motif s'efface là où le texte se lit. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 90%);
}
.principal-contenu { width: 100%; max-width: 900px; margin: 0 auto; padding: 48px 32px 72px; flex: 1; }

/* ---------- Recherche ---------- */
.recherche { position: relative; }
.recherche-champ {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border-radius: 14px; padding: 0 10px 0 20px;
    transition: background-color .2s, box-shadow .2s;
}
.recherche-champ:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--laterite); }
.recherche-champ > .ic { width: 22px; height: 22px; color: var(--doux); }
.recherche-champ input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: 21px 0; font-size: 16px; color: var(--texte);
}
.recherche-champ input::placeholder { color: #8a6d52; }
.recherche-champ input::-webkit-search-cancel-button { display: none; }
.recherche-effacer {
    display: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent;
    color: var(--doux); cursor: pointer; align-items: center; justify-content: center;
}
.recherche-effacer:hover { background: var(--surface); color: var(--terre); }
.recherche.a-texte .recherche-effacer { display: inline-flex; }

.recherche-compacte .recherche-champ { border-radius: 999px; padding-left: 16px; }
.recherche-compacte .recherche-champ > .ic { width: 18px; height: 18px; }
.recherche-compacte .recherche-champ input { padding: 10px 0; font-size: 15px; }

.suggestions {
    position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; text-align: left;
}
.suggestions[hidden] { display: none; }
.suggestions ul { list-style: none; padding: 6px 0; }
.suggestion a { display: flex; align-items: flex-start; gap: 14px; padding: 10px 16px; }
.suggestion a .suggestion-icone { margin-top: 1px; }
.suggestion-icone {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--doux);
}
.suggestion-icone .ic { width: 17px; height: 17px; }
.suggestion-texte { min-width: 0; }
.suggestion-titre { display: block; color: var(--texte); font-weight: 700; line-height: 1.35; }
.suggestion-categorie { display: block; margin-top: 2px; color: var(--doux); font-size: 12.5px; font-weight: 600; }
.suggestion-extrait {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 2px; color: var(--doux); font-size: 14px; line-height: 1.45;
}
.suggestion-extrait:empty { display: none; }
.suggestions { max-height: min(70vh, 620px); overflow-y: auto; }

/* Apparition des résultats en cascade pendant la frappe. */
.apparition { animation: apparition .22s ease-out both; }
@keyframes apparition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Chargement du catalogue (première frappe seulement) : la loupe devient un indicateur. */
.recherche.chargement .recherche-champ > .ic { animation: chargement .8s linear infinite; color: var(--laterite); }
@keyframes chargement {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.suggestion a:hover,
.suggestion.actif a { background: var(--creme); }
.suggestions-tous {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 20px; border-top: 1px solid var(--ligne); color: var(--laterite); font-weight: 700; font-size: 15px;
}
.suggestions-tous:hover,
.suggestions-tous.actif { background: var(--creme); }
.suggestions-vide { padding: 16px 20px; color: var(--doux); font-size: 15px; }
.suggestions-vide a { color: var(--laterite); font-weight: 600; text-decoration: underline; }

/* ---------- Accueil ---------- */
.accueil-recherche h1 { font-size: 26px; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 14px; }

.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin-top: 40px; }
.carte {
    display: flex; flex-direction: column; height: 100%; padding: 16px 16px 20px;
    border-radius: 12px; background: var(--creme); transition: background-color .2s;
}
.carte:hover { background: var(--surface); }
.carte-illustration {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 150px; margin-bottom: 16px; border-radius: 10px; overflow: hidden;
    background: var(--fond-motif) var(--motif-position, 30% 20%) / 520px auto, var(--ivoire);
}
.carte-illustration::before { content: ""; position: absolute; inset: 0; background: #f6e7cfb8; }
.carte-illustration > * { position: relative; }
.cartes li:nth-child(2) .carte-illustration { --motif-position: 80% 45%; }
.cartes li:nth-child(3) .carte-illustration { --motif-position: 10% 70%; }
.cartes li:nth-child(4) .carte-illustration { --motif-position: 60% 85%; }
.cartes li:nth-child(5) .carte-illustration { --motif-position: 95% 10%; }
.cartes li:nth-child(6) .carte-illustration { --motif-position: 40% 55%; }
.carte-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 22px; background: var(--degrade); color: #fffbf2;
    box-shadow: 0 14px 28px -14px #4a2814b3; transform: rotate(-4deg); transition: transform .25s;
}
.carte:hover .carte-icone { transform: rotate(0) scale(1.04); }
.carte-icone .ic { width: 38px; height: 38px; }
.carte-titre { color: var(--terre); font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.carte-texte {
    margin-top: 4px; color: var(--doux); font-size: 14.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.populaires { margin-top: 56px; }
.populaires h2,
.section-categorie h2 { font-size: 20px; letter-spacing: -.015em; margin-bottom: 10px; }

.liste-liens { list-style: none; }
.liste-liens a {
    display: block; padding: 10px 0; color: var(--laterite); font-weight: 600; line-height: 1.4;
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
    transition: text-decoration-color .2s, color .2s;
}
.liste-liens a:hover { color: var(--terre); text-decoration-color: currentColor; }
.liste-deux-colonnes { columns: 2; column-gap: 40px; }
.liste-deux-colonnes li { break-inside: avoid; }

/* ---------- Bandeau contact ---------- */
.bandeau-aide {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
    margin-top: 56px; padding: 22px 24px; border-radius: 12px; background: var(--creme);
}
.bandeau-aide h2 { font-size: 17px; }
.bandeau-aide p { margin-top: 4px; color: var(--doux); font-size: 15px; }

/* ---------- Pages rubrique / article ---------- */
.fil-ariane { margin-bottom: 16px; }
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; color: var(--doux); font-size: 14px; }
.fil-ariane li { display: inline-flex; align-items: center; gap: 6px; }
.fil-ariane a { color: var(--laterite); font-weight: 600; }
.fil-ariane a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fil-ariane .ic { width: 14px; height: 14px; opacity: .6; }

.entete-page h1 { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.025em; line-height: 1.2; overflow-wrap: break-word; }
.entete-page .description { margin-top: 10px; color: var(--doux); font-size: 17px; max-width: 42em; }

.section-categorie { margin-top: 36px; }
.section-categorie .liste-liens li + li { border-top: 1px solid var(--ligne); }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: var(--doux); font-size: 14px; }
.article-meta .pastille { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--laterite); font-weight: 600; }
.article-meta .pastille .ic { width: 16px; height: 16px; }

.onglets { margin-top: 28px; }
.onglets-liste { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--ligne); }
.onglet {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; margin-bottom: -1px;
    border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
    color: var(--doux); font-size: 15px; font-weight: 600; transition: color .2s, border-color .2s;
}
.onglet:hover { color: var(--terre); }
.onglet[aria-selected="true"] { color: var(--terre); border-bottom-color: var(--laterite); }
.onglet .ic { width: 18px; height: 18px; }
.onglet-panneau { margin-top: 22px; }
.onglet-panneau[hidden] { display: none; }

.prose { margin-top: 24px; color: var(--texte); font-size: 16.5px; line-height: 1.7; max-width: 46em; }
.prose > * + * { margin-top: 1em; }
.prose h3 { margin-top: 1.6em; font-size: 19px; letter-spacing: -.01em; }
.prose a { color: var(--laterite); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--terre); }
.prose strong { color: var(--terre); font-weight: 700; }
.prose ul { padding-left: 1.3em; }
.prose ul li::marker { color: var(--ocre); }
.prose li + li { margin-top: .45em; }
.prose ol { list-style: none; counter-reset: etape; padding: 0; }
.prose ol > li { position: relative; counter-increment: etape; padding-left: 44px; min-height: 30px; }
.prose ol > li::before {
    content: counter(etape); position: absolute; left: 0; top: -1px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--laterite);
    font-size: 14px; font-weight: 800;
}
.prose ol > li + li { margin-top: .85em; }
.onglet-panneau .prose { margin-top: 0; }
.encadre { padding: 16px 20px; border-radius: 12px; background: var(--creme); }
.encadre p + p { margin-top: .6em; }

.avis { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ligne); max-width: 46em; }
.avis h2 { font-size: 17px; }
.avis-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.avis-boutons .btn { min-width: 104px; }
.avis-boutons .btn[aria-pressed="true"] { background: var(--terre); color: var(--ivoire); box-shadow: none; }
.avis-raisons { margin-top: 18px; }
.avis-raisons[hidden] { display: none; }
.avis-raisons p { color: var(--doux); font-size: 15px; margin-bottom: 10px; }
.avis-raisons-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.avis-raisons-liste button {
    padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--surface); color: var(--terre); font-size: 14.5px; font-weight: 600;
}
.avis-raisons-liste button:hover { background: var(--surface-forte); }
.avis-merci { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--succes); font-weight: 600; }
.avis-merci[hidden] { display: none; }
.avis-merci a { color: var(--laterite); text-decoration: underline; text-underline-offset: 3px; }

.associes { margin-top: 40px; max-width: 46em; }
.associes h2 { font-size: 19px; margin-bottom: 6px; }
.associes ul { list-style: none; }
.associes a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--laterite); font-weight: 600; }
.associes a .ic { color: var(--doux); }
.associes a:hover { color: var(--terre); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Recherche (page de résultats) ---------- */
.page-recherche .recherche { margin-top: 20px; }
.resultats-info { margin-top: 26px; color: var(--doux); }
.resultats-info strong { color: var(--terre); }
.resultats { list-style: none; margin-top: 8px; }
.resultats li + li { border-top: 1px solid var(--ligne); }
.resultat a { display: block; padding: 18px 0; }
.resultat .resultat-categorie { color: var(--doux); font-size: 13.5px; font-weight: 600; }
.resultat h2 { margin-top: 4px; color: var(--laterite); font-size: 18px; line-height: 1.35; }
.resultat a:hover h2 { color: var(--terre); text-decoration: underline; text-underline-offset: 3px; }
.resultat p { margin-top: 4px; color: var(--doux); font-size: 15px; }
.aucun-resultat { margin-top: 28px; padding: 26px; border-radius: 12px; background: var(--creme); }
.aucun-resultat h2 { font-size: 19px; }
.aucun-resultat ul { margin: 12px 0 0 1.2em; color: var(--doux); }
.aucun-resultat li + li { margin-top: 4px; }
.pastilles-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; }
.aucun-resultat .pastilles-categories { margin-left: 0; }
.pastilles-categories a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--surface); color: var(--terre); font-size: 14.5px; font-weight: 600;
}
.pastilles-categories a .ic { color: var(--laterite); width: 18px; height: 18px; }
.pastilles-categories a:hover { background: var(--terre); color: var(--ivoire); }
.pastilles-categories a:hover .ic { color: var(--ocre); }

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
.formulaire { padding: 26px; border-radius: 12px; background: var(--creme); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ-large { grid-column: 1 / -1; }
.champ label { color: var(--terre); font-weight: 700; font-size: 14.5px; }
.champ label small { color: var(--doux); font-weight: 500; }
.champ input,
.champ select,
.champ textarea {
    width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--ligne); font-size: 16px; color: var(--texte); transition: box-shadow .2s;
}
.champ select {
    appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.champ textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--laterite); }
.champ .erreur { color: var(--erreur); font-size: 14px; font-weight: 600; }
.champ.a-erreur input,
.champ.a-erreur select,
.champ.a-erreur textarea { box-shadow: inset 0 0 0 2px var(--erreur); }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.formulaire-pied p { color: var(--doux); font-size: 14px; max-width: 28em; }
.alerte { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; }
.alerte-succes { background: #e8efdf; color: #2f4524; }
.alerte-erreur { background: #f8e3dc; color: #7a2617; }
.alerte strong { display: block; }
.contact-cartes { display: grid; gap: 12px; }
.contact-carte { padding: 18px 20px; border-radius: 12px; background: var(--creme); }
.contact-carte h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.contact-carte h2 .ic { color: var(--laterite); }
.contact-carte p { margin-top: 6px; color: var(--doux); font-size: 14.5px; }
.contact-carte a { color: var(--laterite); font-weight: 700; word-break: break-word; }
.contact-carte a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Champ téléphone avec indicatif (façon WhatsApp) ---------- */
.telephone {
    position: relative; display: flex; align-items: stretch;
    border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ligne); transition: box-shadow .2s;
}
.telephone:focus-within { box-shadow: inset 0 0 0 2px var(--laterite); }
.champ.a-erreur .telephone { box-shadow: inset 0 0 0 2px var(--erreur); }
.champ .telephone input[type="tel"] { flex: 1; min-width: 0; box-shadow: none; background: transparent; border-radius: 0 10px 10px 0; }
.champ .telephone input[type="tel"]:focus { box-shadow: none; }
.champ .telephone .telephone-natif { width: auto; max-width: 46%; flex: none; box-shadow: none; border-radius: 10px 0 0 10px; background-color: var(--creme); }
.telephone.js-actif .telephone-natif { display: none; }
.telephone-pays {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    margin: 4px 0 4px 4px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--surface); color: var(--terre); font-size: 15px; font-weight: 700;
}
.telephone-pays:hover,
.telephone-pays[aria-expanded="true"] { background: var(--surface-forte); }
.telephone-pays .ic { width: 16px; height: 16px; color: var(--doux); transition: transform .2s; }
.telephone-pays[aria-expanded="true"] .ic { transform: rotate(180deg); }
.telephone-drapeau { font-size: 19px; line-height: 1; }
.telephone-liste {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(360px, 100%);
    background: #fff; border-radius: 14px; box-shadow: var(--ombre); overflow: hidden;
}
.telephone-liste[hidden] { display: none; }
.telephone-recherche { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ligne); }
.telephone-recherche .ic { width: 18px; height: 18px; color: var(--doux); }
.champ .telephone-recherche input { flex: 1; padding: 6px 0; box-shadow: none; border-radius: 0; background: transparent; font-size: 15px; }
.champ .telephone-recherche input:focus { box-shadow: none; }
.telephone-recherche input::-webkit-search-cancel-button { display: none; }
.telephone-liste ul { list-style: none; max-height: 280px; overflow-y: auto; padding: 6px 0; overscroll-behavior: contain; }
.telephone-option {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px; cursor: pointer; font-size: 15px;
}
.telephone-option .telephone-drapeau { font-size: 20px; }
.telephone-option-nom { flex: 1; min-width: 0; color: var(--texte); }
.telephone-option-indicatif { color: var(--doux); font-weight: 600; font-variant-numeric: tabular-nums; }
.telephone-option:hover,
.telephone-option.actif { background: var(--creme); }
.telephone-option[aria-selected="true"] .telephone-option-nom { color: var(--terre); font-weight: 700; }
.telephone-option[aria-selected="true"]::after { content: "✓"; color: var(--laterite); font-weight: 800; }
.telephone-vide { padding: 14px 16px; color: var(--doux); font-size: 14.5px; }
.telephone-vide[hidden] { display: none; }

/* ---------- Erreurs ---------- */
.page-erreur { padding-top: 24px; text-align: center; }
.page-erreur img { width: 104px; margin: 0 auto 22px; }
.page-erreur .code { color: var(--laterite); font-weight: 800; letter-spacing: .1em; }
.page-erreur h1 { margin-top: 8px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.025em; }
.page-erreur > p { margin: 12px auto 26px; max-width: 32em; color: var(--doux); }
.page-erreur .recherche { max-width: 600px; margin: 0 auto 24px; text-align: left; }

/* ---------- Pied de page : copie conforme du site mère aosei.ci ---------- */
.pied { position: relative; z-index: 1; background: var(--nuit); color: #cdb394; padding: 64px max(var(--marge), calc((100vw - var(--max)) / 2)) 28px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied h2 { font-weight: 800; }
.pied .logo { letter-spacing: -.03em; color: var(--terre); align-items: center; gap: 10px; font-size: 24px; font-weight: 800; display: inline-flex; }
.pied .logo img { width: 38px; height: 38px; }
.pied .logo-clair { color: var(--ivoire); }
.pied-haut { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; display: grid; }
.pied-marque .logo { font-size: 28px; }
.pied-marque .logo img { width: 44px; height: 44px; }
.pied-signature { font: italic 500 17px/1.4 var(--f-parole); color: var(--ivoire); max-width: 14em; margin-top: 18px; }
.pied-col h2 { letter-spacing: 0; color: var(--ivoire); margin-bottom: 14px; font-size: 15px; }
.pied-col a { padding: 5px 0; font-size: 15px; display: block; }
.pied-col a:hover,
.pied-bas a:hover { color: var(--ocre); }
.pied-bas { border-top: 1px solid #3a2617; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 52px; padding-top: 22px; font-size: 14px; display: flex; }
.langue { border: 1px solid #3a2617; border-radius: 999px; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 6px 12px; display: inline-flex; }
.langue select { color: inherit; font: inherit; background: 0 0; border: 0; }
.langue option { color: var(--texte); }
@media (max-width: 1100px) {
    .pied-haut { grid-template-columns: repeat(4, 1fr); }
    .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
    .pied-haut { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .pied .logo { font-size: 21px; }
    .pied .logo img { width: 34px; height: 34px; }
    .langue { margin-left: 0; }
}

/* ---------- Adaptatif ---------- */
@media (max-width: 1180px) {
    :root { --lateral: 300px; }
    .entete-recherche { margin-left: 24px; }
}

@media (max-width: 960px) {
    .burger { display: inline-flex; }
    .entete { gap: 8px; padding: 0 12px 0 6px; }
    .entete-recherche { margin-left: 8px; }

    .coque { grid-template-columns: minmax(0, 1fr); }
    .lateral {
        position: fixed; top: var(--entete); left: 0; bottom: 0; z-index: 50;
        width: min(340px, 88vw); height: auto;
        transform: translateX(-100%); transition: transform .25s ease, visibility .25s;
        visibility: hidden; box-shadow: var(--ombre);
    }
    .lateral.ouvert { transform: none; visibility: visible; }
    .principal::before { left: 0; }
    body.lateral-ouvert { overflow: hidden; }

    .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .principal-contenu { padding: 28px 16px 56px; }
    .marque span { display: none; }
    .entete-langue { padding-left: 10px; gap: 4px; font-size: 14px; }
    .entete-langue select { padding-right: 28px; background-position: right 8px center; }
    .lien-site { padding: 9px; font-size: 0; gap: 0; }
    .lien-site .ic { width: 20px; height: 20px; }
    .accueil-recherche h1 { font-size: 22px; }
    .recherche-champ input { padding: 17px 0; }
    .cartes { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
    .carte { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 12px; }
    .carte-illustration { width: 64px; height: 64px; margin: 0; flex: none; border-radius: 12px; }
    .carte-illustration { background-size: 300px auto; }
    .carte-icone { width: 44px; height: 44px; border-radius: 13px; transform: none; box-shadow: none; }
    .carte-icone .ic { width: 23px; height: 23px; }
    .carte-titre { flex: 1; min-width: 0; }
    .carte-texte { display: none; }
    .liste-deux-colonnes { columns: 1; }
    .champs { grid-template-columns: 1fr; }
    .formulaire { padding: 18px; }
    .onglet { padding: 10px 10px; font-size: 14px; }
    .prose { font-size: 16px; }
    .bandeau-aide .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}