/* ==========================================================================
   Aibō : en-tête [aibo_entete] et pied de page [aibo_pied] pour Divi.
   Aplats uniquement, aucun dégradé, police sans empattement.
   ========================================================================== */

.aibo-cadre {
	--nuit: #2E3A46;
	--nuit-clair: #3B4855;
	--ardoise: #4F6475;
	--sable: #CDBFA6;
	--craie: #EEEBE4;
	--ocre: #C99A45;
	font-family: "Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	line-height: 1.5;
}
.aibo-cadre *, .aibo-cadre *::before, .aibo-cadre *::after { box-sizing: border-box; }
.aibo-cadre a { text-decoration: none; }
.aibo-cadre :focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }
.aibo-cadre p, .aibo-cadre h3, .aibo-cadre ul, .aibo-cadre li { margin: 0; padding: 0; }
.aibo-cadre svg { display: block; }

/* ---------- En-tête ---------- */
.aibo-cadre.aibo-entete {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	max-width: 1100px; margin: 0 auto; padding: 10px 16px;
	background: var(--nuit); color: var(--craie);
	border-radius: 6px 6px 0 0;
}
/* Pleine largeur (par défaut) : la barre déborde de la ligne Divi jusqu'aux bords de l'écran. */
.aibo-cadre.aibo-entete.aibo-entete-pleine {
	width: 100vw; max-width: 100vw; border-radius: 0;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	padding: 10px max(16px, calc((100vw - 1100px) / 2 + 16px));
}
.aibo-cadre .aibo-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--craie); }
.aibo-cadre .aibo-logo:hover { color: #fff; }
.aibo-cadre .aibo-logo-robot { width: 34px; height: 34px; }
.aibo-cadre .aibo-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.aibo-cadre .aibo-nav a {
	display: inline-flex; align-items: center; color: var(--craie); background: transparent;
	border: 1px solid var(--ardoise); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.aibo-cadre .aibo-nav a[hidden] { display: none; }
.aibo-cadre .aibo-nav a:hover, .aibo-cadre .aibo-nav a.actif { background: var(--ardoise); color: var(--craie); }
.aibo-cadre .aibo-pastille {
	display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px;
	background: var(--ocre); color: var(--nuit); font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}

/* Bouton de remise à zéro (administrateurs) : rond rouge avec le symbole marche/arrêt. */
.aibo-cadre .aibo-reset { display: inline-flex; margin: 0; padding: 0; }
.aibo-cadre .aibo-reset-bouton {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer;
	border-radius: 50%; border: 2px solid #B5523F; background: #B5523F; color: var(--craie);
	transition: background .2s, color .2s;
}
.aibo-cadre .aibo-reset-bouton svg { width: 18px; height: 18px; display: block; }
.aibo-cadre .aibo-reset-bouton:hover { background: transparent; color: #D07A66; border-color: #D07A66; }
.aibo-cadre .aibo-reset-bouton:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }
.aibo-reset-dialogue {
	max-width: 420px; width: calc(100% - 32px); padding: 22px 24px; border: 0; border-radius: 8px;
	background: var(--nuit, #2E3A46); color: var(--craie, #EEEBE4); border-top: 6px solid #B5523F;
	font-family: inherit; font-size: 15px; line-height: 1.5; text-align: left;
}
.aibo-reset-dialogue::backdrop { background: rgba(20, 26, 32, .7); }
.aibo-reset-dialogue p { margin: 0 0 12px; padding: 0; color: inherit; }
.aibo-reset-dialogue .aibo-reset-titre { font-size: 19px; font-weight: 700; }
.aibo-reset-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.aibo-reset-actions button {
	font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 6px; cursor: pointer;
}
.aibo-reset-annuler { background: transparent; color: var(--craie, #EEEBE4); border: 1px solid var(--ardoise, #4F6475); }
.aibo-reset-annuler:hover { background: var(--ardoise, #4F6475); }
.aibo-reset-ok { background: #B5523F; color: var(--craie, #EEEBE4); border: 1px solid #B5523F; }
.aibo-reset-ok:hover { background: #9C4434; border-color: #9C4434; }

@media (max-width: 640px) {
	.aibo-cadre .aibo-nav { margin-left: 0; width: 100%; }
	.aibo-cadre .aibo-reset { flex: 0 0 auto; }
	.aibo-cadre .aibo-nav a { flex: 1 1 auto; justify-content: center; }
}

/* Le jeu n'a plus son propre en-tête : coins arrondis sous la barre Divi. */
.aibo-racine { border-radius: 0 0 6px 6px; }

/* ---------- Pied de page ---------- */
.aibo-cadre.aibo-pied {
	position: relative; overflow: visible; z-index: 3;
	background: var(--nuit); color: var(--craie);
	padding: 48px 0 0; margin: 40px 0 0;
	min-height: 260px;
	container-type: inline-size; container-name: aibopied;
}
.aibo-pied-ciel { position: absolute; inset: 0 0 90px 0; pointer-events: none; overflow: hidden; }
.aibo-etoile { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--craie); opacity: .35; animation: aibo-pied-scintille 3.5s ease-in-out infinite; }
.aibo-etoile:nth-child(3n) { width: 2px; height: 2px; }
@keyframes aibo-pied-scintille { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
/* Les deux lunes se lèvent à cheval sur le bord supérieur du pied de page. */
.aibo-pied-lune { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; overflow: hidden; }
.aibo-pied-lune i { position: absolute; border-radius: 50%; }
.aibo-lune-ilo {
	width: 72px; height: 72px; top: -36px;
	right: max(230px, calc((100% - 1100px) / 2 + 230px));
	background: var(--sable);
	animation: aibo-lune-monte 7s ease-in-out infinite alternate;
}
.aibo-lune-ilo i { background: #BBAC91; }
.aibo-lune-ilo i:nth-child(1) { width: 16px; height: 16px; left: 14px; top: 16px; }
.aibo-lune-ilo i:nth-child(2) { width: 10px; height: 10px; left: 42px; top: 40px; }
.aibo-lune-ilo i:nth-child(3) { width: 7px; height: 7px; left: 22px; top: 48px; }
.aibo-lune-mara {
	width: 30px; height: 30px; top: -15px;
	right: max(176px, calc((100% - 1100px) / 2 + 176px));
	background: #A86F55;
	animation: aibo-lune-monte 5.5s ease-in-out -2s infinite alternate;
}
.aibo-lune-mara i { background: #94604A; width: 8px; height: 8px; left: 6px; top: 7px; }
@keyframes aibo-lune-monte { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.aibo-pied-interieur {
	position: relative; z-index: 1;
	max-width: 1100px; margin: 0 auto; padding: 0 260px 34px 24px;
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
}
.aibo-cadre .aibo-pied-titre { display: inline-block; font-size: 28px; font-weight: 700; color: var(--ocre); margin-bottom: 8px; }
.aibo-cadre .aibo-pied-marque p { color: var(--craie); opacity: .85; font-size: 15px; max-width: 420px; }
.aibo-cadre.aibo-pied h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sable); margin-bottom: 10px; padding: 0; line-height: 1.4; }
.aibo-cadre.aibo-pied ul { list-style: none; }
.aibo-cadre.aibo-pied li { margin-bottom: 6px; list-style: none; }
.aibo-cadre.aibo-pied li a { color: var(--craie); font-size: 15px; border-bottom: 1px solid transparent; }
.aibo-cadre.aibo-pied li a:hover { border-bottom-color: var(--ocre); color: #fff; }

.aibo-pied-sol { position: relative; z-index: 1; }
.aibo-pied-relief { width: 100%; height: 40px; }
.aibo-pied-bas { background: var(--sable); color: var(--nuit); font-size: 13px; padding: 12px 0; min-height: 46px; }
.aibo-pied-bas span { display: block; max-width: 1100px; margin: 0 auto; padding: 0 180px 0 24px; }

/* Aibō debout sur le sol, à droite */
.aibo-cadre .aibo-pied-robot {
	position: absolute; z-index: 2; right: max(24px, calc((100% - 1100px) / 2 + 24px)); bottom: 40px;
	width: 140px; display: block;
}
.aibo-pied-svg { width: 140px; height: 140px; animation: aibo-pied-flotte 3.2s ease-in-out infinite alternate; }
@keyframes aibo-pied-flotte { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.aibo-pied-svg .aibo-antenne { animation: aibo-pied-antenne 2.4s ease-in-out infinite; }
@keyframes aibo-pied-antenne { 0%, 100% { fill: #C99A45; } 50% { fill: #EEEBE4; } }
.aibo-pied-svg .aibo-yeux { transform-origin: 60px 47px; animation: aibo-pied-cligne 5s infinite; }
@keyframes aibo-pied-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.aibo-pied-svg .aibo-bras-d { transform-origin: 100px 46px; transform-box: view-box; }
.aibo-cadre .aibo-pied-robot:hover .aibo-bras-d, .aibo-cadre .aibo-pied-robot:focus-visible .aibo-bras-d { animation: aibo-pied-salut .5s ease-in-out 3 alternate; }
@keyframes aibo-pied-salut { from { transform: rotate(0); } to { transform: rotate(-40deg); } }

.aibo-bulle {
	position: absolute; right: 118px; top: -6px; white-space: nowrap;
	background: var(--craie); color: var(--nuit); font-size: 13px; font-weight: 700;
	padding: 6px 12px; border-radius: 12px;
	opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.aibo-bulle::after { content: ""; position: absolute; right: -6px; bottom: 8px; border-width: 6px 0 6px 8px; border-style: solid; border-color: transparent transparent transparent var(--craie); }
.aibo-cadre .aibo-pied-robot:hover .aibo-bulle, .aibo-cadre .aibo-pied-robot:focus-visible .aibo-bulle { opacity: 1; transform: none; }
.aibo-bulle { animation: aibo-pied-bulle 9s ease-in-out 1.5s infinite; }
@keyframes aibo-pied-bulle { 0%, 70%, 100% { opacity: 0; transform: translateY(6px); } 76%, 94% { opacity: 1; transform: none; } }
.aibo-cadre .aibo-pied-robot:hover .aibo-bulle { animation: none; }

@container aibopied (max-width: 860px) {
	.aibo-pied-interieur { grid-template-columns: 1fr 1fr; padding-right: 24px; padding-bottom: 130px; }
	.aibo-pied-marque { grid-column: 1 / -1; }
	.aibo-cadre .aibo-pied-robot { width: 110px; right: 20px; }
	.aibo-lune-ilo { right: 150px; width: 56px; height: 56px; top: -28px; }
	.aibo-lune-mara { right: 108px; }
	.aibo-pied-svg { width: 110px; height: 110px; }
	.aibo-bulle { right: 92px; }
	.aibo-pied-bas span { padding-right: 24px; }
}
@container aibopied (max-width: 480px) {
	.aibo-pied-interieur { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.aibo-cadre *, .aibo-cadre *::before, .aibo-cadre *::after { animation: none !important; transition: none !important; }
	.aibo-bulle { opacity: 0; }
	.aibo-cadre .aibo-pied-robot:hover .aibo-bulle { opacity: 1; }
}

/* ==========================================================================
   Intégration Divi : supprime le blanc autour du jeu, de l'en-tête et du pied.
   S'applique seulement aux pages qui contiennent un élément Aibō.
   ========================================================================== */
body:has(.aibo-cadre),
body:has(.aibo-cadre) #page-container,
body:has(.aibo-cadre) #et-main-area,
body:has(.aibo-cadre) #main-content,
body:has(.aibo-cadre) .et-l--body,
body:has(.aibo-cadre) .et-l--footer,
body:has(.aibo-cadre) .et-l--header {
	background-color: #EEEBE4 !important;
}
body:has(.aibo-pied-pleine), body:has(.aibo-entete-pleine) { overflow-x: clip; }
/* L'en-tête et le pied débordent de leur ligne, les lunes dépassent vers le haut : Divi ne doit pas les couper. */
.et-l--footer:has(.aibo-cadre), .et-l--header:has(.aibo-cadre), .et_pb_section:has(.aibo-cadre), .et_pb_row:has(.aibo-cadre),
.et_pb_column:has(.aibo-cadre), .et_pb_module:has(.aibo-cadre), .et_pb_code_inner:has(.aibo-cadre) {
	overflow: visible !important;
}
.et_pb_section:has(.aibo-pied) { position: relative; z-index: 3; }

/* Sections, lignes et modules Divi qui contiennent un élément Aibō : aucune marge ni fond blanc. */
.et_pb_section:has(.aibo-cadre), .et_pb_section:has(#aibo-jeu) {
	padding-top: 0 !important; padding-bottom: 0 !important; background-color: transparent !important;
}
.et_pb_row:has(.aibo-cadre), .et_pb_row:has(#aibo-jeu) {
	padding-top: 0 !important; padding-bottom: 0 !important; width: 100% !important; max-width: 1100px !important;
}
.et_pb_column:has(.aibo-cadre), .et_pb_module:has(.aibo-cadre), .et_pb_module:has(#aibo-jeu) {
	margin-bottom: 0 !important;
}
.et_pb_section:has(#aibo-jeu) { padding-top: 0 !important; }
.et_pb_section:has(#aibo-jeu) .et_pb_row:has(#aibo-jeu) { padding-bottom: 0 !important; }

/* Le pied de page occupe toute la largeur de l'écran, même dans une ligne Divi étroite. */
.aibo-cadre.aibo-pied.aibo-pied-pleine {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}

/* Aibō cliquable : bouton sans habillage */
.aibo-cadre button.aibo-pied-robot { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.aibo-cadre .aibo-pied-robot.aibo-roule .aibo-bulle { display: none; }
.aibo-cadre .aibo-pied-robot.aibo-roule .aibo-pied-svg { animation: none; }

/* Horizon toujours visible en bas de l'écran (aperçu du pied de page) */
.aibo-cadre.aibo-pied-apercu {
	position: fixed; bottom: 0; left: 0; width: 100%; height: 16px; z-index: 50;
	background: var(--nuit); overflow: visible; cursor: pointer;
	transition: opacity .2s ease, visibility .2s;
	container-type: inline-size;
}
.aibo-cadre.aibo-pied-apercu.aibo-cache { opacity: 0; visibility: hidden; pointer-events: none; }
.aibo-pied-apercu .aibo-pied-lune { pointer-events: none; }
@media print { .aibo-cadre.aibo-pied-apercu { display: none; } }

/* Lien de l'espace enseignant·e, en rouge, à droite de la barre */
.aibo-cadre .aibo-nav a.aibo-nav-enseignant { background: #B5523F; border-color: #B5523F; color: #fff; }
.aibo-cadre .aibo-nav a.aibo-nav-enseignant:hover, .aibo-cadre .aibo-nav a.aibo-nav-enseignant.actif { background: #9C4434; border-color: #9C4434; color: #fff; }

/* Bascule jamovi / JASP, à droite de la barre */
.aibo-cadre .aibo-bascule-logiciel { display: inline-flex; border: 1px solid rgba(238, 235, 228, .35); border-radius: 999px; overflow: hidden; margin-left: 4px; vertical-align: middle; }
.aibo-cadre .aibo-bascule-logiciel button { font: inherit; font-size: .82em; font-weight: 600; line-height: 1; padding: 7px 11px; margin: 0; border: 0; background: transparent; color: #EEEBE4; cursor: pointer; }
.aibo-cadre .aibo-bascule-logiciel button[aria-pressed="true"] { background: #C99A45; color: #1F2830; cursor: default; }
.aibo-cadre .aibo-bascule-logiciel button:not([aria-pressed="true"]):hover { background: rgba(238, 235, 228, .12); }
.aibo-cadre .aibo-bascule-logiciel.occupe { opacity: .55; pointer-events: none; }

/* Accès à Mon compte, tout à droite de la barre */
.aibo-cadre .aibo-nav a.aibo-nav-compte { display: inline-flex; align-items: center; justify-content: center; padding: 5px; width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box; flex: none; }
.aibo-cadre .aibo-nav a.aibo-nav-compte svg { display: block; }

/* En-tête de la page Kaya (niveau master) */
.aibo-entete-master .aibo-logo small { font-size: .62em; font-weight: 700; letter-spacing: .04em; color: #6AD6C8; margin-left: .3em; }
.aibo-entete-master .aibo-nav a[aria-current="page"] { color: #6AD6C8; }

/* Page Kaya (niveau master) : mêmes en-tête et pied de page, palette bleu nuit, turquoise et lavande. */
.aibo-cadre.aibo-entete-master, .aibo-cadre.aibo-pied-master {
	--nuit: #141833;
	--nuit-clair: #283163;
	--ardoise: #343D70;
	--sable: #B4BBE0;
	--craie: #E8ECFA;
	--ocre: #6AD6C8;
}
.aibo-pied-master .aibo-pied-titre small { font-size: .55em; letter-spacing: .04em; margin-left: .25em; color: #A596F0; }
.aibo-pied-master .aibo-lune-ilo { background: #8C7FD9; }
.aibo-pied-master .aibo-lune-ilo i { background: #6E62C2; }
.aibo-pied-master .aibo-lune-mara { background: #6AD6C8; }
.aibo-pied-master .aibo-lune-mara i { background: #4FB3A6; }
.aibo-pied-master .aibo-pied-bas { background: #7F8CC8; color: #141833; }

/* Page Kaya : aucun pied de page (zone pied du Theme Builder Divi masquée). */
body.aibo-page-master .et-l--footer, body.aibo-page-master #main-footer { display: none !important; }

/* Page Kaya pendant le jeu : pas d'en-tête Divi, le jeu prend toute la fenêtre. */
body.aibo-master-jeu .et-l--header, body.aibo-master-jeu #main-header, body.aibo-master-jeu #top-header, body.aibo-master-jeu header.aibo-entete { display: none !important; }
body.aibo-master-jeu #page-container { padding-top: 0 !important; margin-top: 0 !important; }

/* Boutons musique, bruitages et mode réponses (enseignant·e) */
.aibo-cadre .aibo-nav button.aibo-nav-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--ardoise); background: transparent; color: var(--craie); cursor: pointer; font: inherit; }
.aibo-cadre .aibo-nav button.aibo-nav-icone:hover { background: var(--ardoise); }
.aibo-cadre .aibo-nav button.aibo-nav-icone.off { opacity: .45; }
.aibo-cadre .aibo-nav button.aibo-nav-reponses { display: inline-flex; align-items: center; border: 1px dashed #C99A45; border-radius: 6px; padding: 6px 12px; font: 600 14px/1.4 inherit; font-family: inherit; color: #E8D9B5; background: transparent; cursor: pointer; }
.aibo-cadre .aibo-nav button.aibo-nav-reponses.actif { background: #C99A45; color: #2E3A46; border-style: solid; }

/* Son ou musique coupés : une barre en travers de l'icône, en plus de l'icône assombrie */
.aibo-cadre .aibo-nav button.aibo-nav-icone { position: relative; }
.aibo-cadre .aibo-nav button.aibo-nav-icone.off::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: #E8ECF0; transform: rotate(-40deg); border-radius: 1px; box-shadow: 0 0 0 1.5px #2E3A46; }