/* LOT 129 — « RIEN DE FLOU » : les mots expliqués, les chiffres qui s'ouvrent, les écrans vides qui disent quoi faire.
   Chargé par l'application (sahel.css) ET par la vitrine (clarte.css) : les variables ont un repli. */

/* ---------- Un mot du métier : souligné en pointillé, il s'explique au toucher ---------- */
a.terme, a.terme:visited {
    color: inherit; text-decoration: none; cursor: help;
    border-bottom: 1.5px dotted var(--accent, var(--vert, #2B6441));
}
a.terme:hover { background: var(--accent-pale, var(--vert-pale, #e9f2ec)); }
a.terme:focus-visible { outline: 2px solid var(--accent, var(--vert, #2B6441)); outline-offset: 2px; border-radius: 3px; }
/* Sur un fond sombre (bandeaux verts de la vitrine) : le pointillé reste visible. */
.terme-clair a.terme { border-bottom-color: currentColor; }

/* La bulle : une feuille en bas de l'écran (jamais cachée par un doigt, lisible en arabe comme en français). */
.terme-bulle {
    position: fixed; z-index: 2000; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 30rem; margin-inline: auto; padding: 14px 16px 12px;
    background: #fff; color: #141814; border: 1px solid var(--trait, #dde5e1); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(22, 33, 29, .28); font-size: 1rem; line-height: 1.5; text-align: start;
}
.terme-bulle[hidden] { display: none; }
.terme-bulle-mot { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--accent-fonce, var(--vert-fonce, #1E4630)); }
.terme-bulle p { margin: 0 0 6px; }
.terme-bulle-ex { color: #4a5a54; font-size: .95rem; }
.terme-bulle-ex::before { content: attr(data-etiquette) " : "; font-weight: 700; }
.terme-bulle-pied { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 8px; }
.terme-bulle-pied a { font-weight: 600; }
.terme-bulle-fermer {
    min-height: 40px; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--trait, #dde5e1);
    background: #f4f7f5; font: inherit; font-weight: 600; cursor: pointer; color: #141814;
}
.terme-bulle-fermer:focus-visible { outline: 2px solid var(--accent, var(--vert, #2B6441)); outline-offset: 2px; }

/* ---------- Un chiffre qui s'ouvre (vitrine) : pastille « Voir le détail » ---------- */
a.acc-chiffre { display: block; text-decoration: none; color: inherit; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
a.acc-chiffre:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(22, 33, 29, .16); }
a.acc-chiffre:focus-visible { outline: 3px solid var(--accent, #2B6441); outline-offset: 3px; }
a.acc-chiffre .acc-voir { display: inline-block; margin-top: .35rem; font-size: .78rem; font-weight: 700; color: var(--accent, #2B6441); border-bottom: 1px solid currentColor; }
a.acc-chiffre .acc-voir::after { content: " ›"; }
html[dir="rtl"] a.acc-chiffre .acc-voir::after { content: " ‹"; }
@media (prefers-reduced-motion: reduce) { a.acc-chiffre { transition: none; } a.acc-chiffre:hover { transform: none; } }

/* Les détails : des <details> que le script ouvre quand on touche le chiffre. */
.acc-details { margin-top: 1rem; display: grid; gap: .6rem; }
.detail-chiffre {
    background: #fff; border: 1px solid var(--trait, #dde5e1); border-radius: 16px; padding: 0 1rem;
    box-shadow: 0 6px 20px rgba(22, 33, 29, .06); scroll-margin-top: 80px;
}
.detail-chiffre:target { border-color: var(--accent, #2B6441); box-shadow: 0 0 0 3px var(--accent-pale, #e9f2ec); }
.detail-chiffre > summary {
    list-style: none; cursor: pointer; padding: .85rem 0; font-weight: 700; display: flex; gap: .6rem; align-items: baseline; min-height: 44px;
}
.detail-chiffre > summary::-webkit-details-marker { display: none; }
.detail-chiffre > summary::after { content: "+"; margin-inline-start: auto; font-size: 1.3rem; color: var(--accent, #2B6441); line-height: 1; }
.detail-chiffre[open] > summary::after { content: "−"; }
.detail-chiffre > summary:focus-visible { outline: 2px solid var(--accent, #2B6441); outline-offset: 2px; border-radius: 8px; }
.detail-chiffre > summary b { font-size: 1.4rem; color: var(--accent, #2B6441); font-variant-numeric: tabular-nums; }
.detail-corps { padding-bottom: 1rem; }
.detail-corps p { margin: 0 0 .6rem; }
.detail-corps ul { margin: 0 0 .6rem; padding-inline-start: 1.2rem; }
.detail-corps li { margin-bottom: .3rem; }
.detail-exemple { background: var(--accent-pale, #e9f2ec); border-radius: 10px; padding: .55rem .8rem; font-size: .95rem; }
.detail-exemple b { color: var(--accent-fonce, #1E4630); }
.detail-etiquette { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-pale, #6E736C); margin-bottom: .15rem; }
/* Un détail dans un détail : « 6 cycles » → un cycle → ses documents. */
.detail-chiffre .detail-chiffre { box-shadow: none; background: var(--fond, #f7f9f8); margin-bottom: .5rem; }
.detail-chiffre .detail-chiffre > summary { font-weight: 600; }
.detail-cycles { display: grid; gap: .5rem; }
.detail-langues { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem; padding: 0; list-style: none; }
.detail-langues li { margin: 0; padding: .45rem .8rem; border-radius: 10px; background: var(--fond, #f7f9f8); border: 1px solid var(--trait, #dde5e1); }
.detail-langues b { display: block; font-size: .8rem; color: var(--encre-pale, #6E736C); }
.detail-etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0 0 .8rem; }
.detail-etapes li { counter-increment: etape; position: relative; padding-inline-start: 2.2rem; margin-bottom: .6rem; }
.detail-etapes li::before {
    content: counter(etape); position: absolute; inset-inline-start: 0; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--accent, #2B6441); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.detail-adresse { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; background: #f1f4f2; padding: .15rem .5rem; border-radius: 6px; }

/* Le prix d'une offre, expliqué (page des tarifs). */
.detail-prix { margin: .6rem 0 0; font-size: .92rem; }
.detail-prix > summary { cursor: pointer; font-weight: 600; color: var(--accent, #2B6441); min-height: 32px; }
.detail-prix > div { padding: .4rem 0 0; color: var(--encre-douce, #4a5249); }

/* ---------- La page Lexique ---------- */
.lexique-recherche { display: flex; gap: .5rem; margin: 1rem 0; }
.lexique-recherche input { flex: 1; min-width: 0; min-height: 46px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--trait, #dde5e1); font: inherit; }
.lexique-recherche input:focus { outline: 2px solid var(--accent, var(--vert, #2B6441)); outline-offset: 1px; }
.lexique-groupes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.lexique-groupes a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: var(--accent-pale, var(--vert-pale, #e9f2ec)); text-decoration: none; font-size: .9rem; font-weight: 600; }
.lexique-groupe { margin-top: 1.6rem; scroll-margin-top: 80px; }
.lexique-fiche { padding: .8rem 1rem; margin: 0 0 .6rem; background: #fff; border: 1px solid var(--trait, #dde5e1); border-radius: 14px; scroll-margin-top: 80px; }
.lexique-fiche:target { border-color: var(--accent, var(--vert, #2B6441)); box-shadow: 0 0 0 3px var(--accent-pale, var(--vert-pale, #e9f2ec)); }
.lexique-fiche h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.lexique-fiche p { margin: 0 0 .3rem; }
.lexique-fiche .lexique-ex { color: #4a5a54; font-size: .95rem; }
.lexique-fiche .lexique-ex b { color: #141814; }
.lexique-vide { padding: 1rem; text-align: center; color: #4a5a54; }

/* ---------- Un écran vide qui dit pourquoi et quoi faire ---------- */
.vide-guide {
    text-align: center; padding: 1.4rem 1rem; border: 2px dashed var(--trait, #dde5e1); border-radius: 16px;
    background: var(--fond, #faf9f6); margin: .6rem 0;
}
.vide-guide-titre { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; color: #141814; }
.vide-guide-pourquoi { margin: 0 auto .6rem; max-width: 46ch; color: #4a5a54; }
.vide-guide-quoi { margin: 0 auto .9rem; max-width: 46ch; }
.vide-guide .btn { margin: .15rem; }
.vide-guide-secours { display: block; margin-top: .4rem; font-size: .9rem; }
td > .vide-guide { margin: 0; }

/* ---------- Un établissement pas encore visible : le bandeau de la direction ---------- */
.bandeau-publication { border: 2px solid var(--or, #B8923F); background: #fdf6e8; border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1rem; color: #3b2a07; }
.bandeau-publication h2 { margin: 0 0 .3rem; font-size: 1.1rem; color: #7A5510; }
.bandeau-publication ul { margin: .4rem 0 .8rem; padding-inline-start: 1.2rem; }
.bandeau-publication li.fait { color: #1E4630; }
.bandeau-publication li.manque { font-weight: 600; }
.bandeau-publication form { display: inline; }

/* Lot 238 : le bandeau des archives d'un ancien logiciel — couleur pleine, aucune transparence, texte foncé sur fond clair. */
.archive-avertissement { border-inline-start: 6px solid #8B0000; background: #FFF1E6; color: #3B1300; }
.archive-avertissement strong { color: #8B0000; }

/* Lot 239 : le bandeau du substitut du chef — couleur pleine, texte foncé sur fond clair. */
.bandeau-substitut { background: #E8F0FE; color: #0B2A5B; border-inline-start: 6px solid #1A4FA0; padding: .5rem .9rem; margin: .4rem 0; border-radius: 6px; font-size: .92rem; }