/* Medrese edition: porcelain walls, patterned ceramic panels, quiet reading areas. */
:root{--bg:#f3efe4;--panel:#102d49;--gold:#c9a86a;--ivory:#fbf8ef;--muted:#536777}
body{color:#193b59;background:#f2eddf url('/assets/medrese-iznik.png') repeat;background-size:390px}
header{background:#102d49f5;color:#f6efdf;border-bottom:4px double #c9a86a}
#main,main:has(.ceramic-home){box-sizing:border-box;max-width:1280px;width:calc(100% - 96px);margin:28px auto;padding:25px 42px 35px;background:#faf7ef;box-shadow:0 8px 35px #0d29444a;border:1px solid #c7bca6;color:#193b59}
#main::before,#main::after{height:32px;border:0;background:#f4efdf url('/assets/medrese-iznik.png') center / 210px auto;box-shadow:0 1px #25547c,0 -1px #25547c}
#main::before{margin-bottom:30px}#main::after{margin-top:40px}
.ceramic-home .hero-eyebrow,.eyebrow{color:#466477}
.ceramic-hero{padding:0 0 24px}
.ceramic-portals{grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr);gap:20px 24px;margin:26px auto 35px}
.ceramic-portal,.ceramic-portal:hover{color:#183f65;border:17px solid transparent;border-radius:3px;padding:18px 18px 25px;background:linear-gradient(#fbf8effa,#f4eee2fa) padding-box,url('/assets/medrese-iznik.png') center / 250px border-box;box-shadow:0 3px 10px #173c5b20,inset 0 0 0 1px #b8b1a0}
.ceramic-portal:hover{box-shadow:0 8px 18px #173c5b35,inset 0 0 0 1px #245d86}
.ceramic-portal strong{font-size:25px}.portal-subtitle{color:#345c75}.ceramic-portal small{color:#526b79}.portal-heading,.portal-arrow{color:#126674}.portal-number{color:#52778a}
.ceramic-emblem{border-radius:110px 110px 3px 3px;background:radial-gradient(ellipse at 50% 25%,#204b69,#0a233c 80%);border:5px double #cab47e;padding:38px 16px 30px;box-shadow:0 0 0 7px #eee7d8,0 0 0 8px #b6b09d}
.ceramic-emblem::before,.ceramic-emblem::after{display:none}.ceramic-emblem .ceramic-logo{width:170px;margin-bottom:15px}.emblem-caption{color:#dfc087;font-size:7px;letter-spacing:1.5px}
.ceramic-home .tagline,.ceramic-home .tagline span{color:#143c62}.ceramic-home .hero-intro{color:#4c6371}.ceramic-home .hero-bottom>span{color:#5d6b70}.ceramic-home .scroll-link{color:#476578}
.primary{background:#174c76;color:#fff8e8;border-color:#174c76}.primary:hover{background:#103958;color:white}
.ceramic-method{background:#efe9da;border:4px double #aab7b9;border-radius:0}.about-split,.faq-section,.closing-section{color:#193b59}.about-copy p,.closing-section p,.page-intro .lead,.contact-copy .lead{color:#526775}.signature,.contact-email,.text-link{color:#286a7e}.faq-list details{border-color:#c8d1cc}.faq-list p{color:#526775}.muted,.hint{color:#637681}
.card,.contact-form,.chapter-group,.chapter-tile,.reader,.editor-panel,dialog{color:#f6efdf;--muted:#bdcbd4}.card .muted,.card .hint,.contact-form .hint,.chapter-group .muted{color:#bdcbd4}
.subject-module{border:12px solid transparent;padding:26px;background:linear-gradient(#102d49,#102d49) padding-box,url('/assets/medrese-iznik.png') center / 240px border-box;color:#f6efdf}.subject-module::before{display:none}
.theory-article{color:#17334b;background:#faf7ef}.theory-article .muted{color:#526375}
#footer{background:#102d49;color:#f6efdf;padding:32px max(24px,calc((100vw - 1150px)/2));margin:0;border-top:4px double #c9a86a}#footer a,#footer .muted{color:#d1dce1}
@media(max-width:1050px){#main,main:has(.ceramic-home){width:calc(100% - 52px);padding:22px 28px}.ceramic-portals{grid-template-columns:minmax(0,1fr) 155px minmax(0,1fr);gap:16px}.ceramic-portal{border-width:12px;padding:15px 12px 24px}.ceramic-portal strong{font-size:22px}.ceramic-emblem{padding:30px 10px 25px}}
@media(max-width:760px){body{background-size:240px}#main,main:has(.ceramic-home){width:calc(100% - 24px);margin:12px auto;padding:16px 14px 24px}#main::before,#main::after{height:23px;background-size:160px}#main::before{margin-bottom:22px}.ceramic-portals{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.ceramic-emblem{width:180px;justify-self:center;padding:28px 15px 22px;margin:5px 0 20px}.ceramic-emblem .ceramic-logo{width:138px}.ceramic-portal,.ceramic-portal:hover{border-width:9px;padding:14px 9px 25px;background-size:auto,190px}.ceramic-portal strong{font-size:21px}.portal-heading{margin-bottom:10px}.portal-subtitle{font-size:11px}.ceramic-home .tagline{font-size:33px}.ceramic-method{padding:25px 18px}.subject-module{border-width:9px;padding:20px}}
#main .button:not(.primary){color:#1b4c6d;border-color:#7995a3;background:#eeeadd}
#main .card .button:not(.primary),#main .reader .button:not(.primary){color:#f6efdf;background:#173c58;border-color:#6d879a}
.subject-module.is-active{border-color:transparent;outline:2px solid #b49351;outline-offset:3px}
/* Selected cobalt çini wall: aligned square tiles with fine mineral joints. */
body{--wall-tile:300px;background-color:#082d73;background-image:linear-gradient(to right,#d8d5c1bb 1px,#09254e77 2px,transparent 3px),linear-gradient(to bottom,#d8d5c1bb 1px,#09254e77 2px,transparent 3px),url('/assets/iznik-cobalt-wall.png');background-size:var(--wall-tile) var(--wall-tile);background-position:0 0;background-repeat:repeat}
@media(max-width:760px){body{--wall-tile:180px}}

/* Contrast repair: consistent midnight surfaces across all application routes. */
:root{--bg:#071c30;--panel:#102d49;--ivory:#f7f2e8;--muted:#bdcbd7;--line:#456075;color-scheme:dark}
body{color:#f7f2e8}
#main,main:has(.ceramic-home){background:#071c30;color:#f7f2e8;border-color:#627586}
.ceramic-home .tagline,.ceramic-home .tagline span,.about-split,.faq-section,.closing-section{color:#f7f2e8}
.ceramic-home .hero-intro,.ceramic-home .hero-bottom>span,.about-copy p,.closing-section p,.page-intro .lead,.contact-copy .lead,.faq-list p,.muted,.hint{color:#bdcbd7}
.ceramic-home .hero-eyebrow,.eyebrow,.signature,.contact-email,.text-link,.ceramic-home .scroll-link{color:#e0c38a}
.ceramic-portal,.ceramic-portal:hover{color:#f7f2e8;background:linear-gradient(#102d49,#0c243c) padding-box,url('/assets/medrese-iznik.png') center / 250px border-box}
.portal-subtitle,.ceramic-portal small{color:#c4d3df}.portal-heading,.portal-arrow,.portal-number{color:#e0c38a}
#main .button:not(.primary){color:#f7f2e8;border-color:#627c90;background:#102d49}
#main .choice{background:#102a42;color:#f7f2e8;border:1px solid #668197}
#main .choice b{color:#d9e3eb}
#main .choice:hover{background:#183e5c;border-color:#e0c38a}
#main .choice.selected{background:#29465b;border-color:#f3d392;box-shadow:inset 0 0 0 1px #f3d392}
#main .choice.correct{background:#123f36;border-color:#83e1bb}
#main .choice.wrong{background:#4b2734;border-color:#ffb1b1}
input,select,textarea{color:#f7f2e8;background:#091a2b;border-color:#627c90}
input::placeholder,textarea::placeholder{color:#aebfce;opacity:1}
/* Intentionally light reading panels carry their own dark text palette. */
.ceramic-method{color:#17334b;--muted:#405366}.ceramic-method .eyebrow{color:#705727}
.theory-article{color:#17334b;--muted:#526375}.theory-article .eyebrow,.theory-article .formula{color:#785c2a}.theory-article .muted,.theory-article .hint{color:#526375}
@media(max-width:760px){.ceramic-portal,.ceramic-portal:hover{background-size:auto,190px}}
/* Completed answers remain readable while further clicks are disabled. */
#main .choice:disabled{opacity:1;color:#f7f2e8;cursor:default}

/* Approved çini 03: glazed plaques, with live accessible labels. */
.ceramic-portals{max-width:1120px;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);gap:24px}
.ceramic-portal,.ceramic-portal:hover,.subject-module,.subject-module:hover,.subject-module.is-active{
 border:0;border-radius:5px;background-color:#061b47;
 background-image:url('/assets/iznik-ceramic-tile-03.webp');background-size:100% 108%;background-position:top center;background-repeat:no-repeat;
 box-shadow:0 6px 12px #0008; color:#fff3d9;
}
.ceramic-portal{padding:55px 17% 65px;min-height:265px;justify-content:center;text-align:center}
.ceramic-portal strong{font-size:25px;line-height:1.15;text-shadow:0 2px 3px #000}
.portal-heading{margin-bottom:9px}.portal-subtitle,.ceramic-portal small{color:#eee6d5;text-shadow:0 1px 3px #000}
.portal-arrow{bottom:25%;right:18%}.ceramic-portal small{padding-right:15px}
.subject-module{padding:17% 17% 19%;min-height:300px;justify-content:center;text-align:center;gap:10px}
.subject-symbol,.subject-arrow{display:none}.subject-copy{min-width:0}.subject-copy>strong{font-family:Georgia,serif;font-size:32px;color:#fff3d9;text-shadow:0 2px 3px #000}
.subject-copy .eyebrow{color:#e8d6b2}.subject-description,.subject-count{color:#eee6d5}
.subject-module.is-active{outline:3px solid #f4d49a;outline-offset:5px}
@media(max-width:1050px){.ceramic-portals{grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:16px}.ceramic-portal strong{font-size:23px}.ceramic-portal{padding:55px 17% 65px}}
@media(max-width:760px){
 .ceramic-portals{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:20px;max-width:430px;margin-left:auto;margin-right:auto}
 .ceramic-emblem{grid-column:1;grid-row:1}
 .portal-1,.portal-2,.portal-3,.portal-4{grid-column:1;grid-row:auto}
 .ceramic-portal,.ceramic-portal:hover{background-size:100% 108%;padding:60px 18% 68px;min-height:270px}
 .ceramic-portal strong{font-size:26px}.portal-subtitle{font-size:12px}.ceramic-portal small{font-size:11px}
 .subject-modules{grid-template-columns:minmax(0,1fr)}
 .subject-module,.subject-module:hover{padding:65px 17% 75px;min-height:270px;background-size:100% 108%}
 .subject-copy>strong{font-size:28px}.subject-description{display:block;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.subject-module,.ceramic-portal{transition:none;transform:none}}

/* A brief glaze reflection, triggered by interaction rather than looping. */
.ceramic-portal,.subject-module{overflow:hidden;isolation:isolate}
.ceramic-portal::after,.subject-module::after{content:'';position:absolute;inset:-20% -60%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff05 46%,#fff4 50%,#ffffff05 54%,transparent 60%);transform:translateX(-75%);opacity:0;z-index:2}
@keyframes cini-glaze{0%{transform:translateX(-75%);opacity:0}20%{opacity:.7}100%{transform:translateX(75%);opacity:0}}
@media(hover:hover){.ceramic-portal:hover::after,.subject-module:hover::after{animation:cini-glaze .85s ease-out}.ceramic-portal:hover,.subject-module:hover{box-shadow:0 9px 20px #0009}}
.ceramic-portal:focus-visible::after,.subject-module:focus-visible::after{animation:cini-glaze .85s ease-out}
@media(hover:none){.ceramic-portal:active::after,.subject-module:active::after{opacity:.4;transform:translateX(0)}.ceramic-portal:active,.subject-module:active{box-shadow:0 2px 6px #0009}}
/* A quiet library, with glazed ornaments confined to the book covers. */
.books-shelf{padding:32px 0;border-top:1px solid #627586;margin-top:48px}
.books-shelf>.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),340px));gap:28px}
.book-card{padding:28px 24px;border:1px solid #496174;border-radius:6px;background:#0b2439;gap:0}
.book-cover{position:relative;isolation:isolate;overflow:hidden;width:min(100%,240px);min-height:310px;padding:56px 25px 52px 30px;color:#fff0ce;background:linear-gradient(90deg,#0005,transparent 12%,#ffffff04 65%,#0003),#071d40;border:1px solid #af976d;border-left:9px solid #a88d5c;box-shadow:5px 5px 0 -1px #f0e6cd,8px 8px 0 -1px #aea28b,12px 15px 20px #0006}
.book-cover::before,.book-cover::after{content:'';position:absolute;left:0;right:0;height:36px;background:url('/assets/iznik-ceramic-tile-03.webp') center top / 240px auto repeat-x;pointer-events:none}
.book-cover::before{top:0}.book-cover::after{bottom:0;transform:rotate(180deg)}
.book-cover strong{font:400 28px/1.25 Georgia,serif;overflow-wrap:break-word;hyphens:auto}
.book-cover span{color:#e1cfab;font-size:10px;line-height:1.6}
.book-card h3{font:400 25px/1.3 Georgia,serif;margin:16px 0 8px;color:#fff1d4}
.book-card .muted{font-size:13px;line-height:1.7}
.book-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px;width:100%}
.book-actions .button{margin:0;min-height:44px;font-size:13px;flex:1 1 auto;text-align:center;justify-content:center}
@media(max-width:760px){.books-shelf{padding-top:24px}.book-card{padding:24px 20px}.book-actions{flex-direction:column}.book-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.ceramic-portal::after,.subject-module::after{display:none;animation:none!important}.ceramic-portal:hover,.subject-module:hover{transform:none}}

/* Keep the wall behind the navigation plaques, visually and in contrast. */
body{background-image:linear-gradient(#071c3059,#071c3059),linear-gradient(to right,#d8d5c177 1px,#09254e77 2px,transparent 3px),linear-gradient(to bottom,#d8d5c177 1px,#09254e77 2px,transparent 3px),url('/assets/iznik-cobalt-wall.png');background-size:auto,var(--wall-tile) var(--wall-tile),var(--wall-tile) var(--wall-tile),var(--wall-tile) var(--wall-tile)}
.ceramic-portal strong,.subject-copy>strong,.book-card h3{overflow-wrap:break-word;hyphens:auto}
.book-card{min-width:0}.book-actions .button{white-space:normal;overflow-wrap:break-word}
@media(max-width:360px){.ceramic-portal strong{font-size:23px}.subject-copy>strong{font-size:23px}.portal-subtitle,.ceramic-portal small{font-size:11px}.book-cover strong{font-size:25px}.book-card{padding:20px 16px}}

/* A quieter frame: the wall and the plaques carry the ceramic identity. */
#main::before,#main::after{display:none;content:none}
#main,main:has(.ceramic-home){padding-top:38px;padding-bottom:40px;border-color:#45607566}
header{max-width:none;background:linear-gradient(#061b30a6,#061b3073);border-bottom:1px solid #d6c49a55;backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px max(28px,calc((100vw - 1240px)/2));gap:20px}
header nav{background:#06182cdd;border:1px solid #b6c7d244;border-radius:8px;padding:5px 12px;gap:5px}
header nav a{color:#fff7e6;font-size:13px;font-weight:500;text-shadow:0 1px 2px #000;padding:10px 12px;border-radius:4px}
header nav a:hover,header nav a[aria-current=page]{color:#ffe0a2;background:#d5b8781c}
header nav a:focus-visible{outline:2px solid #ffe0a2;outline-offset:1px}
header .header-brand{background:#06182cdd;border:1px solid #b6c7d244;border-radius:6px;padding:8px 12px;color:#fff7e6}
header #login,header .outline{background:#06182cee;color:#fff7e6;border:1px solid #acbecd;min-height:44px}
.ceramic-portals{grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);gap:24px;align-items:stretch}
.ceramic-emblem{width:100%;max-width:190px;justify-self:center;align-self:center;background:none;border:0;border-radius:0;box-shadow:none;padding:24px 12px;margin:0}
.ceramic-emblem .ceramic-logo{width:166px;max-width:100%;margin:0 auto 18px}
.emblem-caption{display:block;color:#e3d1a9;font-size:8px;line-height:1.9;letter-spacing:1.4px}
#footer{border-top:1px solid #6b7e8c66}
@media(max-width:1100px){header{padding:14px 24px;flex-wrap:wrap}header .header-brand{margin-right:auto}header nav{order:3;flex-basis:100%;width:100%;justify-content:center;flex-wrap:wrap;white-space:normal;gap:2px;padding:5px}.ceramic-portals{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:18px}.ceramic-emblem{max-width:150px;padding:20px 8px}}
@media(max-width:760px){
 header{padding:12px 14px;gap:10px;min-height:0}header .header-brand{padding:5px 9px}header nav{gap:0;padding:4px;justify-content:center}header nav a{font-size:12px;padding:9px 10px;min-height:40px;display:flex;align-items:center}
 #main,main:has(.ceramic-home){padding-top:24px;padding-bottom:28px;margin-top:16px}
 .ceramic-portals{grid-template-columns:minmax(0,1fr);gap:18px}
 .ceramic-emblem{max-width:165px;width:165px;padding:8px 10px 14px;margin:0 auto 4px}
 .ceramic-emblem .ceramic-logo{width:140px;margin-bottom:10px}
 .emblem-caption{font-size:7px;letter-spacing:1.2px}
 .ceramic-home .hero-eyebrow{margin-bottom:12px}
}

/* Compact entrances and an accessible mobile menu. */
#menu-toggle{display:none}
.ceramic-portal .portal-heading,.ceramic-portal small{display:none}
.ceramic-portal,.ceramic-portal:hover{min-height:215px;padding:48px 18% 52px;gap:0}
.ceramic-portal strong{font-size:27px;line-height:1.2}
.portal-subtitle{font-size:12px;margin-top:10px}.portal-arrow{bottom:25%;right:18%}
.ceramic-emblem .ceramic-logo{width:150px}
.book-area{touch-action:pan-y pinch-zoom;min-width:0}.reader>section{min-width:0}
.book-area:focus-visible{outline:2px solid #e9c989;outline-offset:3px}
@media(max-width:760px){
 #menu-toggle{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;color:#fff7e6;background:#06182cee;border:1px solid #9badbc;font-size:12px;order:2}
 header #login,header .outline,header #logout{order:1}header .header-brand{margin-right:auto}
 header:has(#menu-toggle) nav{display:none}header:has(#menu-toggle) nav.is-open{display:flex;flex-direction:column;align-items:stretch;order:3;gap:0}
 header nav a{min-height:44px;font-size:14px;padding:10px 14px;border-bottom:1px solid #ffffff12}
 .ceramic-portal,.ceramic-portal:hover{min-height:200px;padding:46px 18% 50px}
 .ceramic-portal strong{font-size:25px}.portal-subtitle{font-size:12px}.ceramic-emblem{padding:4px 10px 8px}.ceramic-emblem .ceramic-logo{width:120px}
 .reader .toolbar{gap:8px}.reader .toolbar button{min-height:44px}.book-area{padding:8px;min-height:0}
}
@media(max-width:360px){header{gap:6px;padding:10px}.header-brand span{font-size:14px}header .header-brand{padding:5px}.ceramic-portal strong{font-size:22px}}

/* Cour intérieure : quatre panneaux de faïence, un sceau central. */
.ceramic-hero{padding:8px 0 28px}
.ceramic-portals{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(240px,auto));gap:8px;padding:8px;background:#c5b99e;border:1px solid #e6d8b5;box-shadow:0 12px 35px #0005;isolation:isolate}
.portal-1{grid-column:1;grid-row:1}.portal-2{grid-column:2;grid-row:1}.portal-3{grid-column:1;grid-row:2}.portal-4{grid-column:2;grid-row:2}
.ceramic-portal,.ceramic-portal:hover{min-height:240px;padding:38px 32px;border:0;border-radius:0;background:linear-gradient(90deg,#071c30f5 0%,#071c30e8 42%,#071c3033 100%),url('/assets/iznik-cobalt-wall.png') center/340px;box-shadow:inset 0 0 0 1px #eedcaa88;transform:none;text-align:left;justify-content:center;align-items:flex-start}
.ceramic-portal:nth-of-type(even),.ceramic-portal:nth-of-type(even):hover{background:linear-gradient(90deg,#071c3033 0%,#071c30e8 58%,#071c30f5 100%),url('/assets/iznik-cobalt-wall.png') center/340px;align-items:flex-end;text-align:right}
.ceramic-portal strong{font-size:clamp(26px,3vw,38px);max-width:75%;color:#fff4dc;line-height:1.1}
.ceramic-portal .portal-subtitle{max-width:70%;font-size:13px;color:#e1e5e9;margin-top:12px}
.ceramic-portal .portal-heading{display:flex;position:static;margin:0 0 18px;color:#edc881;gap:12px}.portal-heading .ui-icon{width:22px;height:22px}.portal-number{font:12px Georgia,serif}
.ceramic-portal .portal-arrow{position:static;display:flex;align-items:center;justify-content:center;margin-top:20px;width:40px;height:32px;border:1px solid #d4ba7d88;border-radius:20px;background:#071c30cc}
.ceramic-emblem{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:178px;height:178px;max-width:none;margin:0;padding:24px;border-radius:50%;border:6px solid #eee1c5;outline:1px solid #a78e59;background:radial-gradient(circle at 40% 30%,#214760,#071c30);box-shadow:0 0 0 4px #64767b,0 6px 22px #0008;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ceramic-emblem .ceramic-logo{width:115px;height:auto;margin:0}.ceramic-emblem .emblem-caption,.ceramic-emblem::before,.ceramic-emblem::after{display:none}
.ceramic-portal:focus-visible{outline:3px solid #ffdc8b;outline-offset:-5px}
@media(max-width:760px){
 .ceramic-portals{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:140px auto auto;gap:5px;padding:5px;margin-top:14px}
 .ceramic-emblem{position:relative;grid-column:1/-1;grid-row:1;left:auto;top:auto;transform:none;width:118px;height:118px;padding:16px;border-width:4px;justify-self:center;align-self:center;background:#0c2942}
 .ceramic-emblem .ceramic-logo{width:80px}
 .ceramic-portals{background:linear-gradient(#071c3066,#071c3066),url('/assets/iznik-cobalt-wall.png') center/280px}
 .portal-1{grid-column:1;grid-row:2}.portal-2{grid-column:2;grid-row:2}.portal-3{grid-column:1;grid-row:3}.portal-4{grid-column:2;grid-row:3}
 .ceramic-portal,.ceramic-portal:hover,.ceramic-portal:nth-of-type(even),.ceramic-portal:nth-of-type(even):hover{min-height:205px;padding:20px 12px;align-items:flex-start;text-align:left;background:linear-gradient(#071c30dc,#071c30ed),url('/assets/iznik-cobalt-wall.png') center/220px}
 .ceramic-portal strong{font-size:22px;max-width:100%;hyphens:none}.ceramic-portal .portal-subtitle{font-size:11px;max-width:100%;line-height:1.5;margin-top:10px}
 .ceramic-portal .portal-heading{margin-bottom:12px}.ceramic-portal .portal-arrow{margin-top:14px;height:28px;width:36px}
 .ceramic-home .tagline{font-size:32px;margin-top:26px}
}
@media(max-width:360px){.ceramic-portal strong{font-size:19px}.ceramic-portal,.ceramic-portal:hover{padding:18px 10px}}
@media(min-width:761px){.ceramic-emblem{grid-area:auto}}
/* Référence fournie : composition conservée, liens HTML accessibles superposés. */
body:has(.reference-home) #header{display:none}
#main:has(.reference-home){max-width:1440px;width:100%;margin:0 auto;padding:0;border:0}
.reference-home{padding:0!important}.reference-home .ceramic-hero{padding:0 0 28px}
.reference-mural{position:relative;width:100%;aspect-ratio:709/400;background-image:url('/assets/accueil-reference.jpg');background-size:100% 384%;background-position:center 50%;background-repeat:no-repeat}
.reference-nav{position:absolute;inset:0 0 auto;height:8%;background:none;border:0;padding:0;margin:0}
.reference-nav a,.reference-nav span{position:absolute;top:0;height:100%;display:block;padding:0;border:0;background:none}
.reference-zone{position:absolute;width:50%;height:46%;display:block;border-radius:0;background:transparent}
.reference-books{top:8%;left:0}.reference-courses{top:8%;right:0}.reference-resources{bottom:0;left:0}.reference-about{bottom:0;right:0}
.reference-zone:hover{background:#ffffff08}.reference-zone:focus-visible,.reference-nav a:focus-visible{outline:3px solid #ebc981;outline-offset:-4px;background:#ffffff12}
.reference-actions{display:flex;align-items:center;justify-content:center;gap:20px;padding:22px 18px;flex-wrap:wrap}.reference-actions .text-link{font-size:13px}
.reference-home .tagline{padding:0 16px}.reference-home .hero-intro{padding:0 20px}
#main:has(.reference-home)>.editorial-section,#main:has(.reference-home)>.closing-section{margin-left:24px;margin-right:24px}
@media(max-width:760px){#main:has(.reference-home){margin-top:0}.reference-actions{gap:12px;padding:18px 14px}.reference-home .hero-bottom .button{min-width:0}.reference-home .tagline{font-size:30px}}
/* Restauration du visuel : image horizontale sans marges de téléphone. */
.reference-mural{aspect-ratio:16/9;background-image:url('/assets/accueil-hd.png');background-size:100% 100%;background-position:center}
.reference-nav{height:8.5%}
.reference-nav a:nth-child(1){left:0!important;width:16%!important}
.reference-nav a:nth-child(2){left:16%!important;width:9%!important}
.reference-nav a:nth-child(3){left:25%!important;width:9%!important}
.reference-nav a:nth-child(4){left:34%!important;width:7%!important}
.reference-nav a:nth-child(5){left:41%!important;width:10%!important}
.reference-nav a:nth-child(6){left:51%!important;width:10%!important}
.reference-nav a:nth-child(7){left:61%!important;width:10%!important}
.reference-books,.reference-courses{top:8.5%;height:44.5%}
.reference-resources,.reference-about{height:47%}
/* Lumière sur l’émail : aucune couche ne capture les clics. */
.reference-mural{overflow:hidden;isolation:isolate;animation:porcelain-reveal .8s ease-out both}
.reference-mural::after{content:'';position:absolute;inset:-30%;z-index:3;pointer-events:none;background:linear-gradient(112deg,transparent 42%,#fff7dc08 46%,#fff9e62b 50%,#fff7dc08 54%,transparent 58%);transform:translateX(-110%);animation:porcelain-light 14s ease-in-out 1s infinite}
.reference-zone{transition:background-color .25s ease,box-shadow .25s ease}
@media(hover:hover){.reference-zone:hover{background:#fff5dc14;box-shadow:inset 0 0 35px #ffe6a318}}
.reference-zone:active{background:#fff5dc20;box-shadow:inset 0 0 25px #ffe6a322}
.decor-motion{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:#d5dfdf;cursor:pointer}.decor-motion input{width:17px;height:17px;accent-color:#b99a5c}
.reference-home:has(#decor-motion:not(:checked)) .reference-mural::after{animation:none;opacity:0}
@keyframes porcelain-light{0%,70%{transform:translateX(-110%);opacity:0}73%{opacity:1}94%{opacity:1}100%{transform:translateX(110%);opacity:0}}
@keyframes porcelain-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.reference-mural,.reference-mural::after{animation:none!important}.reference-mural::after{display:none}.reference-zone{transition:none}.decor-motion{display:none}}

/* Scoped resource tiles: ivory enamel with fine lateral çini edges. */
@font-face{font-family:'Ophys Cormorant';src:url('/assets/fonts/cormorant-garamond-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Ophys DM Sans';src:url('/assets/fonts/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Ophys DM Sans';src:url('/assets/fonts/dm-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
.subject-modules--ivory{grid-template-columns:1fr;gap:22px;max-width:1000px;margin:32px auto}
.subject-modules--ivory .subject-module{--edge:40px;position:relative;display:block;min-height:230px;padding:30px calc(var(--edge) + 32px);border:1px solid #b49a5b;border-radius:6px;background:radial-gradient(ellipse at 30% 0%,#fffaf1 0%,#f7f2e8 65%,#eee6d7 100%);color:#0b1f3a;text-align:left;box-shadow:inset 0 0 0 3px #efe4ce,0 8px 22px #0003;transition:transform .2s ease,box-shadow .2s ease;isolation:isolate}
.subject-modules--ivory .subject-module::before,.subject-modules--ivory .subject-module::after{content:"";display:block;position:absolute;inset:3px auto 3px 3px;width:var(--edge);height:auto;background:url('/assets/iznik-ceramic-tile-03.webp') left top/600% 108% no-repeat;border-right:1px solid #b49a5b;opacity:1;transform:none;animation:none;pointer-events:none;z-index:-1}
.subject-modules--ivory .subject-module::after{inset:3px 3px 3px auto;background-position:right top;border-right:0;border-left:1px solid #b49a5b}
.subject-modules--ivory .subject-copy{display:flex;flex-direction:column;gap:10px;color:#0b1f3a;font:400 16px/1.5 'Ophys DM Sans',Arial,sans-serif}
.subject-modules--ivory .subject-copy .eyebrow{color:#75602e;font:600 10px/1.5 'Ophys DM Sans',Arial,sans-serif;letter-spacing:.14em;text-shadow:none}
.subject-modules--ivory .subject-copy strong{color:#0b1f3a;font:600 42px/1.05 'Ophys Cormorant',Georgia,serif;text-shadow:none;letter-spacing:-.02em}
.subject-modules--ivory .subject-description{display:block;color:#33465b;font-size:16px;line-height:1.5;text-shadow:none;max-width:none}
.subject-modules--ivory .subject-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px}
.subject-modules--ivory .subject-count{font:400 14px/1.5 'Ophys DM Sans',Arial,sans-serif;color:#405064;text-shadow:none}
.subject-modules--ivory .subject-discover{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:44px;padding:9px 23px;background:#0b1f3a;border:1px solid #b49a5b;border-radius:999px;color:#fffaf1;font-size:14px;font-weight:600;white-space:nowrap}
.subject-modules--ivory .subject-module:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 3px #efe4ce,0 12px 26px #0004}
.subject-modules--ivory .subject-module:focus-visible{outline:3px solid #e7c879;outline-offset:5px}
.subject-modules--ivory .subject-module.is-active{outline:2px solid #e7c879;outline-offset:4px}
@media(max-width:600px){
.subject-modules--ivory{gap:18px;margin:24px 0}
.subject-modules--ivory .subject-module{--edge:18px;min-height:260px;padding:22px 33px}
.subject-modules--ivory .subject-copy{gap:9px}
.subject-modules--ivory .subject-copy .eyebrow{font-size:9px;letter-spacing:.1em}
.subject-modules--ivory .subject-copy strong{font-size:32px}
.subject-modules--ivory .subject-description{font-size:14px;line-height:1.5}
.subject-modules--ivory .subject-footer{flex-direction:column;align-items:flex-start;gap:12px;margin-top:3px}
.subject-modules--ivory .subject-count{font-size:13px}
.subject-modules--ivory .subject-discover{min-height:44px;padding:9px 20px}
}
@media(prefers-reduced-motion:reduce){.subject-modules--ivory .subject-module{transition:none}.subject-modules--ivory .subject-module:hover{transform:none}}
/* One real navigation bar on every route, including the homepage. */
body:has(.reference-home) #header,#header{display:flex;max-width:1440px;margin:0 auto;padding:16px 24px;gap:20px;background:rgba(7,28,48,.91);border:0;border-bottom:1px solid #b99a5c66;backdrop-filter:blur(8px);font-family:'Ophys DM Sans',Arial,sans-serif}
#header .header-brand{background:none;border:0;padding:0;color:#f7f2e8}
#header .header-brand span{font-family:'Ophys Cormorant',Georgia,serif;font-size:26px;letter-spacing:.04em}
#header nav{background:none;border:0;padding:0;gap:4px;flex:1;justify-content:center;box-shadow:none}
#header nav a{color:#f7f2e8;font-size:13px;font-weight:400;padding:12px 10px;min-height:44px;white-space:nowrap;border-radius:0}
#header nav a[aria-current=page]{color:#e7c879;border-bottom:2px solid #c7a766;background:none}
#header nav a:hover{color:#e7c879;background:#ffffff08}
#header #login,#header #logout,#header .outline{border:1px solid #b99a5c;background:#102c45;color:#fff7e6;min-height:44px}
.reference-mural{background-image:url('/assets/accueil-decor.png');aspect-ratio:16/9;background-size:100% 100%}
.reference-zone{top:auto;bottom:auto;height:47%;width:50%;display:flex;align-items:center;padding:0 0 0 7.5%;text-decoration:none;color:#0b1f3a;text-align:left}
.reference-books{left:0;top:0}.reference-courses{right:0;top:0;padding-left:18%;color:#fffaf1}
.reference-resources{left:0;bottom:0;color:#fffaf1}.reference-about{right:0;bottom:0;padding-left:18%}
.mural-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:300px;width:77%;font-family:'Ophys DM Sans',Arial,sans-serif}
.mural-number{font:600 16px 'Ophys Cormorant',Georgia,serif;letter-spacing:.1em}
.mural-copy strong{font:600 clamp(23px,2.8vw,40px)/1 'Ophys Cormorant',Georgia,serif;color:inherit;text-shadow:none}
.mural-description{font-size:clamp(12px,1.1vw,16px);line-height:1.5;color:inherit}
.mural-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:9px 18px;border-radius:999px;background:#0b1f3a;color:#fffaf1;border:1px solid #bc9b5a;font-size:13px;margin-top:3px}
.reference-courses .mural-copy,.reference-resources .mural-copy{background:#071c30d9;padding:16px;border-radius:6px;width:90%}
@media(max-width:1100px){#header{flex-wrap:wrap}#header nav{flex-basis:100%;order:3}.mural-copy{gap:7px}.mural-copy strong{font-size:27px}.mural-description{font-size:13px}.mural-cta{padding:7px 12px}}
@media(max-width:760px){
#header{padding:12px 14px;gap:10px}#header nav{align-items:stretch}#header nav a{font-size:14px}#header .header-brand span{font-size:23px}
.reference-mural{aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:14px;background:none;padding:16px}
.reference-zone{position:relative;inset:auto;width:100%;height:auto;min-height:245px;padding:28px 30px!important;border:1px solid #b99a5c88;border-radius:6px;overflow:hidden;background-image:linear-gradient(#f7f2e8ed,#f7f2e8ed),url('/assets/accueil-decor.png');background-size:auto,200% 200%;color:#0b1f3a}
.reference-courses,.reference-resources{background-image:linear-gradient(#071c30df,#071c30df),url('/assets/accueil-decor.png');color:#fffaf1}
.reference-books{background-position:left top}.reference-courses{background-position:right top}.reference-resources{background-position:left bottom}.reference-about{background-position:right bottom}
.mural-copy,.reference-courses .mural-copy,.reference-resources .mural-copy{width:100%;max-width:none;background:none;padding:0;gap:12px}
.mural-copy strong{font-size:32px}.mural-description{font-size:15px;max-width:30ch}.mural-cta{font-size:14px}
}

/* O’Phys — lisibilité des quatre accès, sans commande d'animation. */
.decor-motion{display:none!important}
@media(min-width:761px){
.reference-books .mural-copy,.reference-about .mural-copy{box-sizing:border-box;width:min(92%,340px);max-width:340px;padding:clamp(12px,1.5vw,22px);border:1px solid #b89c6470;border-radius:8px;background:rgba(9,30,49,.82);color:#fff9eb;box-shadow:0 8px 28px #07182735;backdrop-filter:blur(5px)}
.reference-books .mural-copy strong,.reference-about .mural-copy strong{color:#fff9eb}
}
@media(max-width:760px){
.reference-mural{gap:12px;padding:12px;background:#0b1f3a}
.reference-zone{min-height:205px;padding:22px!important;background-image:linear-gradient(110deg,rgba(247,242,232,.91),rgba(247,242,232,.77)),url('/assets/accueil-decor.png');background-size:auto,cover;background-position:center;color:#0b1f3a}
.reference-courses,.reference-resources{background-image:linear-gradient(110deg,rgba(7,28,48,.88),rgba(7,28,48,.73)),url('/assets/accueil-decor.png');color:#fffaf1}
.reference-zone .mural-copy{width:100%;max-width:340px;padding:0;background:transparent}
.reference-zone .mural-copy strong{font-size:clamp(27px,7vw,34px)}
.reference-zone .mural-description{font-size:14px;line-height:1.45}
}