/* Page d'accueil de la plateforme azome.bj : couleurs du Bénin en aplats, sans dégradé. Classes préfixées « ac- ». */
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('../fonts/outfit/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('../fonts/outfit/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('../fonts/outfit/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('../fonts/outfit/outfit-latin-700-normal.woff2') format('woff2'); }
:root { --ac-v: #008751; --ac-vf: #006B40; --ac-vn: #0E3B26; --ac-j: #FCD116; --ac-r: #E8112D; --ac-encre: #17231D; --ac-gris: #5F6B64; --ac-creme: #F6F3EA; --ac-trait: #E6E1D3; }
html { scroll-behavior: smooth; }
body.ac { margin: 0; font-family: 'Outfit', system-ui, sans-serif; color: var(--ac-encre); background: #fff; font-size: 15px; -webkit-font-smoothing: antialiased; }
.ac a { text-decoration: none; }
.ac-bande { display: flex; height: 4px; } .ac-bande span { flex: 1; } .ac-bande span:nth-child(1) { background: var(--ac-v); } .ac-bande span:nth-child(2) { background: var(--ac-j); } .ac-bande span:nth-child(3) { background: var(--ac-r); }
.ac-in { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Marque */
.ac-marque { display: inline-flex; align-items: center; gap: 10px; color: var(--ac-encre); }
.ac-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--ac-vn); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; position: relative; flex-shrink: 0; }
.ac-logo .ac-pastille { position: absolute; right: -4px; bottom: -4px; display: flex; width: 14px; height: 14px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; }
.ac-logo .ac-pastille i { flex: 1; } .ac-pastille i:nth-child(1) { background: var(--ac-v); } .ac-pastille i:nth-child(2) { background: var(--ac-j); } .ac-pastille i:nth-child(3) { background: var(--ac-r); }
.ac-marque b { font-size: 20px; letter-spacing: -.01em; } .ac-marque b em { font-style: normal; color: var(--ac-v); }
.ac-sombre .ac-marque { color: #fff; } .ac-sombre .ac-logo { background: #fff; color: var(--ac-vn); } .ac-sombre .ac-logo .ac-pastille { border-color: var(--ac-vn); } .ac-sombre .ac-marque b em { color: var(--ac-j); }

/* Boutons */
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 13px 22px; font-weight: 600; font-size: 15.5px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .1s; }
.ac-btn:active { transform: translateY(1px); }
.ac-btn-jaune { background: var(--ac-j); color: var(--ac-encre); } .ac-btn-jaune:hover { background: #F2C500; color: var(--ac-encre); }
.ac-btn-contour { border-color: rgba(255,255,255,.45); color: #fff; } .ac-btn-contour:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.ac-btn-vert { background: var(--ac-v); color: #fff; } .ac-btn-vert:hover { background: var(--ac-vf); color: #fff; }
.ac-btn-sm { padding: 9px 15px; font-size: 14.5px; border-radius: 10px; }
.ac :focus-visible { outline: 3px solid var(--ac-j); outline-offset: 2px; }

/* En-tête */
.ac-haut { background: var(--ac-vn); color: #fff; }
.ac-nav { display: flex; align-items: center; gap: 22px; padding-top: 16px; padding-bottom: 16px; }
.ac-liens { display: flex; gap: 24px; margin-left: auto; }
.ac-liens a { color: #BFD6C9; font-weight: 500; } .ac-liens a:hover { color: #fff; }
.ac-burger { display: none; margin-left: 4px; background: none; border: 0; color: #fff; font-size: 26px; padding: 4px; cursor: pointer; }
.ac-menu-mobile { display: none; }
.ac-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 44px; padding-bottom: 68px; }
.ac-etiquette { display: inline-flex; gap: 7px; align-items: center; background: rgba(255,255,255,.1); border-radius: 30px; padding: 6px 13px; font-size: 13px; font-weight: 600; }
.ac-etiquette i { color: var(--ac-j); }
.ac-hero h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.07; margin: 18px 0 16px; font-weight: 700; letter-spacing: -.015em; }
.ac-hero p { color: #CFE2D7; font-size: 18px; line-height: 1.55; margin: 0 0 28px; max-width: 560px; }
.ac-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Aperçu de l'outil (illustration) */
.ac-ecran { background: #fff; border-radius: 18px; overflow: hidden; color: var(--ac-encre); box-shadow: 0 24px 50px rgba(0,0,0,.22); font-size: 12.5px; }
.ac-ecran-barre { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #EEE; } .ac-ecran-barre i { width: 9px; height: 9px; border-radius: 50%; background: #DDD; }
.ac-ecran-corps { display: grid; grid-template-columns: 130px 1fr; min-height: 280px; }
.ac-ecran-menu { background: #F3F0E8; padding: 14px 9px; } .ac-ecran-menu b { display: block; margin: 0 0 10px 7px; font-size: 12.5px; }
.ac-ecran-menu span { display: block; padding: 6px 8px; border-radius: 7px; color: #667168; margin-bottom: 2px; } .ac-ecran-menu span.on { background: #fff; color: var(--ac-encre); font-weight: 600; }
.ac-ecran-main { padding: 16px; } .ac-ecran-main > b { font-size: 15px; }
.ac-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 10px 0 12px; } .ac-tuiles div { border-radius: 11px; padding: 10px; } .ac-tuiles b { display: block; font-size: 19px; }
.ac-ligne { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #F0EEE7; }
.ac-pill { border-radius: 20px; padding: 2px 9px; font-weight: 600; font-size: 11px; }
.ac-c-v { background: #E6F3EC; color: var(--ac-vf); } .ac-c-j { background: #FFF4C2; color: #6E5400; } .ac-c-r { background: #FDE6E9; color: #B00A20; } .ac-c-n { background: #F1EEE5; color: var(--ac-encre); }

/* Vidéo de présentation */
.ac-video-sec { background: var(--ac-creme); }
.ac-video-tete { text-align: center; max-width: 760px; margin: 0 auto 30px; } .ac-video-tete .ac-intro { margin: 0 auto; }
.ac-video { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--ac-vn); aspect-ratio: 16 / 9; box-shadow: 0 24px 50px rgba(14,59,38,.18); }
.ac-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ac-video:fullscreen { border-radius: 0; max-width: none; box-shadow: none; }
.ac-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; background: rgba(14,59,38,.55); color: #fff; cursor: pointer; font-family: inherit; transition: background-color .2s; }
.ac-video-play:hover { background: rgba(14,59,38,.65); }
.ac-video-play span { width: 96px; height: 96px; border-radius: 50%; background: var(--ac-j); color: var(--ac-encre); display: grid; place-items: center; font-size: 46px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .15s; }
.ac-video-play span i { margin-left: 6px; }
.ac-video-play:hover span { transform: scale(1.06); }
.ac-video-play b { font-size: 19px; text-shadow: 0 1px 6px rgba(0,0,0,.35); } .ac-video-play small { font-size: 14px; opacity: .9; }
.ac-video-play[hidden] { display: none; }
.ac-video-outils { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ac-btn-clair { background: #fff; color: var(--ac-encre); border-color: var(--ac-trait); } .ac-btn-clair:hover { border-color: #CFC8B6; color: var(--ac-encre); }
.ac-video-note { color: var(--ac-gris); font-size: 13.5px; }

/* Démo interactive (parcours guidés par profil) */
.ac-demo-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ac-demo-tuile { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: #fff; border: 1px solid var(--ac-trait); border-radius: 18px; padding: 20px; cursor: pointer; font-family: inherit; color: var(--ac-encre); transition: transform .12s, box-shadow .12s, border-color .12s; }
.ac-demo-tuile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,59,38,.08); border-color: var(--c); }
.ac-demo-tuile .ac-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; background: var(--cc); color: var(--c); margin: 0; }
.ac-demo-txt b { display: block; font-size: 17px; } .ac-demo-txt small { display: block; color: var(--ac-gris); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.ac-demo-go { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-weight: 600; font-size: 13.5px; color: var(--c); }
html.ac-demo-ouverte { overflow: hidden; }
.ac-demo { width: min(1120px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #fff; color: var(--ac-encre); box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: 'Outfit', system-ui, sans-serif; }
.ac-demo[open] { display: flex; flex-direction: column; }
.ac-demo::backdrop { background: rgba(14,59,38,.62); }
.ac-demo-tete { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ac-trait); }
.ac-demo-profil { border-radius: 20px; padding: 4px 12px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.ac-demo-tete b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-demo-fermer { margin-left: auto; border: 0; background: #F1EEE5; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--ac-encre); flex-shrink: 0; }
.ac-demo-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 16px; background: var(--ac-creme); flex: 1; min-height: 0; }
.ac-demo-ecran { position: relative; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--ac-trait); background: #fff; cursor: pointer; }
.ac-demo-ecran img { display: block; max-width: 100%; max-height: calc(94vh - 150px); width: auto; height: auto; transition: opacity .25s; }
.ac-demo-ecran.change img { opacity: .35; }
.ac-demo.mobile .ac-demo-ecran { border: 9px solid #1A2420; border-radius: 34px; }
.ac-demo.mobile .ac-demo-ecran img { max-height: calc(94vh - 170px); }
.ac-demo-point { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid #fff; background: var(--ac-j); padding: 0; cursor: pointer; animation: acPulse 1.6s ease-out infinite; z-index: 2; }
.ac-demo-point:focus-visible { outline: 3px solid var(--ac-vn); outline-offset: 3px; }
@keyframes acPulse { 0% { box-shadow: 0 0 0 0 rgba(252,209,22,.75), 0 2px 8px rgba(0,0,0,.3); } 70% { box-shadow: 0 0 0 20px rgba(252,209,22,0), 0 2px 8px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 0 rgba(252,209,22,0), 0 2px 8px rgba(0,0,0,.3); } }
.ac-demo-point.rappel { animation: acPulse 1.6s ease-out infinite, acRappel .5s ease-in-out; }
@keyframes acRappel { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }
.ac-demo-bulle { background: var(--ac-vn); color: #fff; border-radius: 16px; padding: 14px 16px; width: 300px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 14px 34px rgba(0,0,0,.28); flex-shrink: 0; z-index: 3; }
.ac-demo-bulle.flottante { position: absolute; }
.ac-demo-bulle[hidden] { display: none; }
.ac-demo-num { display: block; color: var(--ac-j); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ac-demo-bulle b { display: block; font-size: 16px; margin: 2px 0 4px; }
.ac-demo-bulle-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.ac-demo-aide { color: #BFD6C9; font-size: 12.5px; }
.ac-demo-bulle-bas button { border: 0; border-radius: 9px; background: var(--ac-j); color: var(--ac-encre); font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.ac-demo-barre { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ac-trait); font-size: 14px; font-weight: 600; }
.ac-demo-barre[hidden] { display: none; }
.ac-demo-prog { flex: 1; display: flex; gap: 5px; } .ac-demo-prog i { flex: 1; height: 6px; border-radius: 3px; background: var(--ac-trait); transition: background-color .25s; } .ac-demo-prog i.fait { background: var(--ac-v); }
.ac-demo-fin { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; max-width: 560px; }
.ac-demo-fin[hidden] { display: none; }
.ac-demo-ok { width: 64px; height: 64px; border-radius: 50%; background: #E6F3EC; color: var(--ac-vf); display: grid; place-items: center; font-size: 32px; }
.ac-demo-fin > b { font-size: 24px; } .ac-demo-fin > span { color: var(--ac-gris); }
.ac-demo-fin-actions { margin: 10px 0 14px; }
.ac-demo-autres-titre { font-weight: 600; color: var(--ac-encre) !important; font-size: 14px; }
.ac-demo-autres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ac-demo-autres button { border: 0; border-radius: 30px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }

/* Sections */
.ac-sec { padding: 72px 0; }
.ac-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-vf); }
.ac-h2 { font-size: clamp(25px, 3vw, 34px); font-weight: 700; margin: 8px 0 10px; line-height: 1.15; letter-spacing: -.01em; }
.ac-intro { color: var(--ac-gris); font-size: 17px; line-height: 1.55; max-width: 660px; margin: 0; }
.ac-grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.ac-grille4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.ac-carte { border: 1px solid var(--ac-trait); border-radius: 18px; padding: 22px; background: #fff; }
.ac-carte .ac-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; margin-bottom: 14px; }
.ac-carte h3 { font-size: 17px; margin: 0 0 6px; font-weight: 700; } .ac-carte p { margin: 0; color: var(--ac-gris); line-height: 1.5; font-size: 14.5px; }
.ac-carte.centre { text-align: center; } .ac-carte.centre .ac-ic { margin: 0 auto 12px; }
.ac-etabs .carte-etab { height: 100%; }

/* Rejoindre le projet */
.ac-rejoindre { background: var(--ac-creme); }
.ac-rejoindre-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.ac-rejoindre .ac-tag { color: #B00A20; }
.ac-profils { display: grid; gap: 14px; margin-top: 24px; }
.ac-profil { display: flex; gap: 13px; align-items: center; } .ac-profil i { width: 42px; height: 42px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--ac-vf); font-size: 18px; flex-shrink: 0; }
.ac-profil b { display: block; } .ac-profil span { color: var(--ac-gris); font-size: 14px; }
.ac-form { background: #fff; border: 1px solid var(--ac-trait); border-radius: 20px; padding: 28px; }
.ac-form h3 { font-size: 20px; margin: 0; } .ac-form .ac-sous { color: var(--ac-gris); font-size: 14px; margin: 4px 0 18px; }
.ac-champs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-champ label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.ac-champ input, .ac-champ textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #DCD6C6; border-radius: 11px; padding: 12px 13px; font: inherit; font-size: 15px; background: #fff; color: var(--ac-encre); }
.ac-champ input:focus, .ac-champ textarea:focus { outline: 0; border-color: var(--ac-v); box-shadow: 0 0 0 3px #E6F3EC; }
.ac-champ textarea { min-height: 84px; resize: vertical; }
.ac-puces { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0; }
.ac-puces legend { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; padding: 0; float: left; width: 100%; }
.ac-puces input { position: absolute; opacity: 0; pointer-events: none; }
.ac-puces label { border: 1.5px solid #DCD6C6; border-radius: 30px; padding: 8px 14px; font-weight: 500; cursor: pointer; background: #fff; user-select: none; }
.ac-puces input:checked + label { background: var(--ac-vn); border-color: var(--ac-vn); color: #fff; }
.ac-puces input:focus-visible + label { outline: 3px solid var(--ac-j); outline-offset: 2px; }
.ac-form .ac-btn { width: 100%; margin-top: 16px; }
.ac-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ac-alerte { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; display: flex; gap: 9px; font-size: 14.5px; }
.ac-alerte.success { background: #E6F3EC; color: #0E5A36; } .ac-alerte.danger { background: #FDE8EA; color: #8A0A1C; }

/* Pied de page */
.ac-pied { background: var(--ac-vn); color: #C9DCD1; font-size: 14px; }
.ac-pied .ac-in { display: flex; align-items: center; gap: 22px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; }
.ac-pied .ac-marque { margin-right: auto; }
.ac-pied a { color: #C9DCD1; } .ac-pied a:hover { color: #fff; }
.ac-ecrire { margin: 22px 0 0; font-size: 15px; color: #4A5A52; }
.ac-ecrire i { color: var(--ac-v); margin-right: 4px; }
.ac-ecrire a { color: var(--ac-v); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* Tablette et téléphone */
@media (max-width: 991px) {
    .ac-liens { display: none; } .ac-burger { display: block; }
    .ac-nav .ac-btn-sm { margin-left: auto; }
    .ac-menu-mobile.ouvert { display: grid; gap: 2px; padding: 0 28px 14px; }
    .ac-menu-mobile a { color: #fff; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 500; }
    .ac-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 22px; padding-bottom: 48px; }
    .ac-grille3 { grid-template-columns: 1fr 1fr; } .ac-grille4 { grid-template-columns: 1fr 1fr; }
    .ac-rejoindre-grille { grid-template-columns: 1fr; gap: 28px; }
    .ac-demo-tuiles { grid-template-columns: 1fr 1fr; }
}
/* Démo sur petit écran : plein écran, bulle sous la capture */
@media (max-width: 759px) {
    .ac-demo { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
    .ac-demo-scene { flex-direction: column; justify-content: flex-start; gap: 12px; padding: 10px; overflow: auto; }
    .ac-demo-ecran img, .ac-demo.mobile .ac-demo-ecran img { max-height: 62dvh; }
    .ac-demo.mobile .ac-demo-ecran { border-width: 7px; border-radius: 28px; }
    .ac-demo-bulle { width: 100%; box-sizing: border-box; }
    .ac-demo-tete b { font-size: 14px; }
    .ac-demo-barre { gap: 8px; padding: 10px; } .ac-demo-barre .ac-long { display: none; }
}
@media (max-width: 600px) {
    .ac-in { padding: 0 16px; }
    .ac-nav { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
    .ac-nav .ac-btn-sm .ac-long { display: none; }
    .ac-hero p { font-size: 16px; }
    .ac-actions .ac-btn { width: 100%; }
    .ac-ecran-corps { grid-template-columns: 1fr; } .ac-ecran-menu { display: none; }
    .ac-sec { padding: 48px 0; }
    .ac-grille3, .ac-grille4 { grid-template-columns: 1fr; }
    .ac-demo-tuiles { gap: 10px; } .ac-demo-tuile { padding: 14px; flex-direction: column; gap: 8px; } .ac-demo-txt small { display: none; } .ac-demo-go { margin-top: 4px; }
    .ac-champs2 { grid-template-columns: 1fr; }
    .ac-form { padding: 20px; }
    .ac-pied .ac-in { gap: 12px 18px; }
    .ac-pied .ac-marque { width: 100%; }
    .ac-video { border-radius: 14px; }
    .ac-video-play span { width: 72px; height: 72px; font-size: 34px; }
    .ac-video-play b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }