/* clair.css : le guide des agents en charte Avaliance claire. Chargée après hub.css, guide.css et lego.css, qui ne sont pas modifiées.
   Le violet porte le texte, le vert ne porte rien et reste dessous. */
:root { color-scheme: light; --bg: #ffffff; --panel: #F5F5F5; --panel2: #ffffff; --text: #212529; --muted: #5D5D5D; --line: #E2E2E2;
  --or: #AEBF38; --or2: #430A4B; --violet: #430A4B; --alerte: #A93226; --ok: #1E5B3A; --moitie: #D9A21B; }
body { background: #fff; color: var(--text); }
a { color: var(--violet); } a:hover { color: #000; }
h1, h2, h3 { color: var(--violet); }
.barre { background: #fff; border-right: 1px solid var(--line); }
.barre-tete a { background-image: url("logo-avaliance-violet.png"); }
.rub li a:hover { background: var(--panel); }
.rub > button { color: var(--muted); }
.entete { background: rgba(255,255,255,.97); }
.entete-titre { color: var(--violet); } .entete-titre:hover { color: #000; }
.entete-rech input { background: #fff; }
.entete-rech ul { background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
th { background: var(--violet); color: #fff; }
tr:hover td { background: rgba(67,10,75,.03); }
.matrice tbody tr:hover td.p { background: var(--or2); color: #fff; }
.copier:hover { background: #CDD749; }
.prompt-bloc { background: #fff; }
pre.prompt { color: var(--text); }
pre.case, code.blk, .lire pre { background: #F7F7F7; color: var(--text); }
pre.case i { color: var(--violet); font-weight: 700; }
.mini { background: #fff; } .mini .bar { background: #FAFAFA; }
.hero { background: #fff; border-color: var(--line); }
.hero .lead { color: var(--muted); }
.hero::after { border-color: rgba(174,191,56,.25); }
.gestes .rouge em, .grille .ko b { color: var(--alerte); }
.grille .ko { border-color: var(--alerte); }
.etiq { border-color: #C9C9C9; }
.chemin-phrase code { color: var(--muted); }
/* le schéma, version claire */
.sch .n rect { fill: #fff; stroke: #D5D5D5; }
.sch .n text { fill: #6b6b6b; }
.sch .lien { stroke: #C9C9C9; }
.sch .sous-col { fill: var(--muted); }
.sch .col { stroke: #E2E2E2; }
.sch .p-ok { fill: #1E5B3A; stroke: #1E5B3A; }
.sch .p-moitie { fill: #D9A21B; stroke: #D9A21B; }
.sch .p-vide { fill: #fff; stroke: #8A8A8A; }
.sch .p-humain { fill: #fff; stroke: #8A8A8A; }
.cadre, .svgbox, .vagues { background: #fff; }
.voir { background: rgba(255,255,255,.95); }

/* ── moins de violet : titres en encre, le violet en filet ── */
h1, h2, h3 { color: #15171A; }
th { background: #F6F7F8; color: #15171A; border-bottom: 2px solid #430A4B; }
.bandeau { width: 100%; height: 230px; object-fit: cover; border-radius: 14px; margin: 4px 0 18px; display: block; }

/* ── le menu : titres en gras, une icône au trait, gros chevron, pages en retrait sous un filet ── */
.rub { margin-top: 4px; }
.rub > button { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #15171A; padding: 9px 10px; align-items: center; gap: 11px; border-radius: 8px; }
.rub > button:hover { background: #F6F7F8; }
.rub > button::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.rub > button::after, .rub > button[aria-expanded="false"]::after { content: ""; width: 16px; height: 16px; margin-left: auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat; transition: transform .15s; }
.rub > button[aria-expanded="false"]::after { transform: rotate(-90deg); }
.rub:nth-child(1) > button { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/></svg>"); }
.rub:nth-child(2) > button { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5' width='14' height='14' rx='2'/><rect x='9' y='9' width='6' height='6' rx='1'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/></svg>"); }
.rub:nth-child(3) > button { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='19' r='2'/><circle cx='18' cy='5' r='2'/><path d='M8 19h8a3.5 3.5 0 0 0 0-7H8a3.5 3.5 0 0 1 0-7h8'/></svg>"); }
.rub:nth-child(4) > button { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/><path d='M4 19.5V21h16'/></svg>"); }
.rub ul { margin: 2px 0 8px 20px; padding-left: 12px; border-left: 1px solid #D9DCE0; }
.rub li a { font-size: 13.5px; color: #2B2F33; padding: 6px 10px; }
.rub li a[aria-current="page"] { background: #F1F4DF; color: #15171A; font-weight: 700; box-shadow: inset 3px 0 0 #AEBF38; border-radius: 0 6px 6px 0; }

/* ── 11/11 : les images des pages des agents, chacune à sa place ── */
.chapeau { display: grid; gap: 28px; align-items: center; margin: 6px 0 18px; }
.chapeau.duo-d { grid-template-columns: 1.15fr 1fr; }
.chapeau.duo-g { grid-template-columns: 1fr 1.15fr; }
.chapeau.duo-g > figure { order: -1; }
.chapeau .lead { margin: 0; }
main figure { margin: 0; }
main figure img { width: 100%; display: block; border-radius: 14px; object-fit: cover; aspect-ratio: 4 / 3; }
main figure figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
figure.large { margin: 26px 0; } figure.large img { aspect-ratio: 21 / 8; }
figure.demi-d, figure.demi-g { width: 44%; margin: 8px 0 18px; }
figure.demi-d { float: right; margin-left: 26px; } figure.demi-g { float: left; margin-right: 26px; }
main h2, main .defile, main .svgbox, main .vagues, main .prompt-bloc, main .boucle, main .cols2, main .barres, main .marques, main .tuiles, main .ruban { clear: both; }
@media (max-width: 900px) { .chapeau.duo-d, .chapeau.duo-g { grid-template-columns: 1fr; } figure.demi-d, figure.demi-g { float: none; width: 100%; margin: 14px 0; } }

/* ── 11/11 : plus de bandes à gauche ; rien ne dépasse ── */
.ph { border-left: 1px solid var(--line); }
.ruban, .ruban.alerte { border-left: 1px solid var(--line); border-radius: 10px; background: #FAFAFB; }
.consequence { border-left: 0; padding-left: 0; }
.row > span { min-width: 0; }
.grille { grid-template-columns: minmax(84px, 1.1fr) repeat(4, minmax(0, 1fr)); font-size: 11.5px; }
.grille div { min-width: 0; overflow-wrap: anywhere; padding: 6px; }
.boucle div, .marques div, .gestes div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille .h:nth-child(n+2):nth-child(-n+5) { display: none; } }

/* ── 11/11 · thème B : les images se fondent dans le texte, sans cadre ── */
main figure img { border-radius: 0; mix-blend-mode: multiply; object-fit: contain; background: none; }
figure.large img { aspect-ratio: auto; max-height: 340px; }
figure.demi-d, figure.demi-g { width: 38%; }
.chapeau figure img { aspect-ratio: auto; }

/* ── 11/11 · Miniatures en filigrane sous les blocs des pages des agents ── */
.fil { position: relative; overflow: hidden; }
.fil::before { content: ""; position: absolute; top: 0; bottom: 0; width: 46%; background: var(--img) center / cover no-repeat; z-index: 0; pointer-events: none; opacity: .75; }
.fil.droite::before { right: 0; -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 35%, transparent 100%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 35%, transparent 100%); }
.fil.gauche::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.6) 35%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.6) 35%, transparent 100%); }
.fil > * { position: relative; z-index: 1; }
.chapeau.fil { display: block; min-height: 220px; padding: 26px 0; margin: 4px 0 18px; }
.chapeau.fil .lead { max-width: 56%; }
.chapeau.fil.gauche .lead { margin-left: auto; }
.ph.fil .row > span, .ph.fil .syn { text-shadow: 0 0 10px #fff, 0 0 2px #fff; }
@media (max-width: 900px) { .fil::before { width: 100%; opacity: .2; -webkit-mask-image: none; mask-image: none; } .chapeau.fil .lead { max-width: none; margin: 0; } }

/* ── la barre du haut : titre à gauche, recherche au milieu, retour à l'accueil à droite ── */
.entete { display: grid; grid-template-columns: auto 1fr minmax(260px, 460px) 1fr auto; align-items: center; }
.entete .menu-ic { grid-column: 1; }
.entete-titre { grid-column: 2; justify-self: start; }
.entete-rech { grid-column: 3; margin: 0; width: 100%; justify-self: center; }
.entete-accueil { grid-column: 5; justify-self: end; white-space: nowrap; text-decoration: none; font-size: 13.5px; font-weight: 700; color: var(--violet); border: 1px solid #D8C6DB; border-radius: 10px; padding: 8px 14px; background: #fff; }
.entete-accueil:hover { background: #F1F4DF; border-color: var(--or); color: #15171A; }
@media (max-width: 900px) {
  .entete { grid-template-columns: auto 1fr auto; row-gap: 8px; }
  .entete-titre { grid-column: 2; } .entete-accueil { grid-column: 3; font-size: 12.5px; padding: 6px 10px; }
  .entete-rech { grid-column: 1 / -1; grid-row: 2; }
}
/* recherche exactement au milieu */
.entete { grid-template-columns: 1fr minmax(260px, 460px) 1fr; }
.entete .menu-ic { grid-column: 1; grid-row: 1; justify-self: start; }
.entete-titre { grid-column: 1; grid-row: 1; }
body.replie .entete-titre { margin-left: 44px; }
.entete-rech { grid-column: 2; grid-row: 1; }
.entete-accueil { grid-column: 3; grid-row: 1; }
@media (max-width: 1024px) { .entete-titre { margin-left: 44px; } }
@media (max-width: 900px) { .entete { grid-template-columns: 1fr auto; } .entete-accueil { grid-column: 2; } .entete-rech { grid-column: 1 / -1; grid-row: 2; } }
.entete-accueil, .entete-accueil:hover { background: #AEBF38; color: #430A4B; border-color: #AEBF38; font-weight: 800; }
.entete-accueil:hover { background: #C3D24E; }