/* Coucou dans la famille — direction artistique inspirée du livret :
   noir d'encre, beige papier, rouge Coucou, plume. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Barlow+Condensed:wght@500;600;700;800&display=swap');
:root{
 --forest:#100e0f;--forest2:#1d1718;--pine:#3b2222;
 --cream:#100e0f;--paper:#211a1a;--ink:#f1e5d1;
 --muted:#b8a897;--line:#5b4540;--gold:#edddc5;
 --blush:#3c2221;--brick:#a63c36;--white:#f4e9d6;
}
body{background:#100e0f;color:#f2e6d4}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 40% 60% at 110% -10%,rgba(112,36,32,.24),transparent 70%),
 linear-gradient(115deg,transparent 70%,rgba(105,42,36,.055) 80%,transparent 95%);}
.site-header,.desktop-nav-holder,.footer{background:#0c0b0d;color:#efdfc7}
.site-header{border-bottom:1px solid #382627}
.header-inside{max-width:1180px}
.brand{font-family:"Barlow Condensed",sans-serif;letter-spacing:1.7px;font-size:23px}
.brand small{color:#c3a18c;letter-spacing:3px}
.brand-mark{border-color:#853831;color:#c2433c;font-size:21px}
.version{color:#e4c9aa;border-color:#5d3630}
.header-dev{border:1px solid #7c3a33;border-radius:7px;background:#2f191a;color:#f5dfc0;padding:8px 11px;font:800 12px "Barlow Condensed",sans-serif;letter-spacing:1.5px}
.header-dev:hover{background:#72312c}
.header-dev span{font-size:16px}
.nav{border-top:0;border-bottom:1px solid #392b2c}
.nav-tab{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.1px;font-size:15px;color:#bbab9a}
.nav-tab span{color:#bf5b4b}
.nav-tab:is(:hover,.is-active){border-bottom-color:#c6433b;color:#f9eede;background:#25191a}
.grain{opacity:.17}
.view{max-width:1180px}
.eyebrow{color:#d36b5d;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:2.5px}
.page-heading em{color:#cc5849!important}
.page-heading h1,.page-heading h2{color:#f4e5d1}
.page-heading>p:last-child{color:#bdac9e}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif}
.hero{min-height:520px;background:#0c0a0b;padding:60px 7%;border:1px solid #68403a;box-shadow:0 12px 65px rgba(0,0,0,.5),inset 0 0 130px rgba(109,21,18,.15)}
.hero:before{content:"";position:absolute;inset:0;background:
 linear-gradient(95deg,rgba(9,8,9,.94),rgba(13,10,11,.93) 45%,rgba(69,22,23,.16) 98%),
 url("/images/site/home.webp") center/cover no-repeat;opacity:.96;pointer-events:none}
.hero:after{content:"";position:absolute;inset:16px;border:1px solid rgba(241,216,184,.22);border-radius:10px;pointer-events:none}
.hero-copy{max-width:720px}
.hero h1{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;letter-spacing:-3.5px;text-shadow:0 5px 0 #000,0 10px 24px #000;font-size:clamp(51px,7.3vw,88px);color:#f2dfc3}
.hero h1 em{font-family:"Playfair Display",serif;font-style:normal;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.32em;margin:13px 0 13px 22px;color:#f0d9be}
.hero h1 strong{font-weight:400;letter-spacing:-3.5px}
.hero-copy>p:not(.eyebrow){color:#d6c1ac;font-size:16px;max-width:455px}
.hero .eyebrow{color:#d97567}
.hero-glow{opacity:.25}
.hero .moon,.hero .branch,.hero .floating-bird{display:none}
.hero-poster{position:absolute;right:5%;top:11%;bottom:11%;z-index:1;width:32%;border-radius:7px;overflow:hidden;transform:rotate(4deg);filter:drop-shadow(0 14px 18px #000);background:#1a1113;border:3px solid #ae9883}
.hero-poster img{width:100%;height:100%;object-fit:cover;display:block}
.hero-poster:has(img[hidden]){display:none}
.hero-ornament{border-color:#6e3a35;opacity:.22;box-shadow:0 0 0 35px #9b2b2915,0 0 0 75px #9b2b2910;right:1%}
.hero-ornament .nest{font-size:125px;color:#d95b51}
.bird-shape{color:#d9c3a2}
.primary-button{background:#a94039;color:#f6e9d6;box-shadow:0 4px 0 #58211f;border-radius:5px;text-transform:uppercase;letter-spacing:.55px;font:800 14px "Barlow Condensed",sans-serif}
.primary-button:hover{background:#c34c43;color:#fff0dc}
.search-section{border-bottom:1px solid #4c3330}
.search-section h2{color:#f0e0c9}
.search-box{background:#231b1b;border:1px solid #60423d;box-shadow:none;color:#e7d2b8}
.search-box input{color:#f9ecd9}
.search-box input::placeholder{color:#958276}
.search-box span{color:#d18068}
.search-box kbd{background:#3e2926;color:#e1b7a0}
.search-box:focus-within{border-color:#c85649;box-shadow:0 0 0 2px #72393466}
.quick-links{margin-top:26px}
.feature-card,.role-card,.faq-item,.panel,.scenario,.rule-side{background:#211a1b;border-color:#5a3c38;color:#f0dfc8;box-shadow:0 12px 18px #05050627}
.feature-card:hover,.role-card:hover{border-color:#be6252}
.feature-card small,.feature-card p,.role-card p,.scenario p{color:#bea99a!important}
.feature-card .arrow{color:#d57763}
.feature-icon.green,.feature-icon.purple,.feature-icon.gold,.feature-icon.coral{background:#472527;color:#dfb79c}
.feature-icon.green{background:#4a332c}
.feature-icon.coral{background:#752d2a;color:#f6e4cf}
.story{background:radial-gradient(circle at 55% -30%,#63302d,#281b1b 55%,#140e10);border:1px solid #69413a}
.story h2{color:#f2e1ca}
.story>p:not(.eyebrow){color:#cbb6a1}
.story-bird{color:#a6534840}
.subtle-button,.text-button{color:#edac9a;border-color:#d16f5b}
.chip{background:#281e1f;border:1px solid #65413b;color:#dbc2ab}
.chip.is-active{background:#a13c37;border-color:#b74b43;color:#f5e7d3}
.result-count{color:#ac9787}
.camp-label{color:#d3bd9e}
.coucous .camp-label{color:#ef7669}
.solitaire .camp-label{color:#cfa895}
.special .camp-label{color:#e0baa3}
.role-avatar{background:#392826;border-color:#6d4640;overflow:hidden;color:#f1dfc6}
.role-card.coucous .role-avatar{background:#69302c;border-color:#b74d43}
.role-card.solitaire .role-avatar{background:#4b3435;border-color:#765753}
.role-card.special .role-avatar{background:#44332f;border-color:#74524b}
.role-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.role-card h3{color:#f5e4cc}
.faq-item summary{color:#f1deca}
.faq-item summary:after{background:#62332e;color:#fae7c9}
.faq-answer{color:#d0bba9}
.source{color:#d48f7e}
.panel-head h2{color:#f1dfc8}
.panel-flag{color:#e5af97;border-color:#6e4842}
.panel-subtitle,.helper,.note{color:#c7b4a4}
.selector-group{color:#d48a76}
.selector-row:hover{background:#50302b}
.selector-row input,.timeline-step input{accent-color:#c04e43}
.night-control{background:#3a2927}
.night-control button{background:#211818;color:#f0d0b7;border-color:#75443c}
.night-control small{color:#dbc0a7}
.warning-toggle{color:#e5c0aa}
.notice{background:#3b271f;color:#e9c4a2;border-color:#cc765b}
.timeline-step{background:#261d1d;border-color:#573b36}
.timeline-step.is-done{background:#322728;opacity:.68}
.timeline-step strong{color:#de917c}
.timeline-step span{color:#f0dcc7}
.secondary-button{background:#2e2020;border:1px solid #724b43;color:#f5d0b4}
.secondary-button:hover{background:#4b2826}
.note{background:#2f2222}
.repart-cell,.repart-cell:nth-child(2),.repart-cell:nth-child(3),.repart-cell:nth-child(4){background:#342522;border:1px solid #6c453e;color:#f0decb}
.repart-cell:nth-child(2){background:#552724}
.repart-cell span{color:#e2c7b0}
.scenario .mini,.scenario-number{color:#d88e79}
.scenario select,.count-control select{background:#352627;color:#f1deca;border-color:#6d453e}
.scenario-composition>div{background:#332523}
.scenario-composition>div:last-child{background:#512b29}
.scenario-composition ul{color:#e0c5b0}
.footer{border-top:1px solid #5d3530}
.footer button{color:#e3a08b}
.role-dialog{background:#201719;border:1px solid #8b4841;color:#f2dfc8}
.role-dialog::backdrop{background:#090707dd}
.dialog-close{background:#642d2a;color:#f6dfc9}
.dialog-role p{color:#d6bdab}
.dialog-summary{color:#f5dcc4!important}
.tag{background:#49302c;color:#edcab4}
.search-result,.empty-state{background:#231b1b;border:1px solid #65413a;color:#f0dfc9}
.search-result small{color:#c3a99a}
.search-result:hover{border-color:#d47063}
.rule-main{background:#241719;border:1px solid #60352f;color:#f2e0ce}
.rule-main>p:not(.eyebrow){color:#d3b8a4}
.rule-side p,.rule-step p,.rules-overview p{color:#d3beaa}
/* Le gestionnaire du Conteur reste sobre et lisible en cours de partie. */
.dev-intro{display:flex;gap:17px;border:1px solid #9a4038;border-left:4px solid #b7493f;background:#291918;padding:21px;border-radius:12px;margin:0 0 23px}
.dev-intro-symbol{font-size:30px}
.dev-intro strong{font-size:16px;color:#f2e0cb}
.dev-intro p{margin:6px 0 0;color:#c7ae9e;font-size:13px;line-height:1.7}
.dev-layout{display:grid;grid-template-columns:330px 1fr;gap:19px;align-items:start}
.dev-slots{max-height:600px;overflow-y:auto}
.dev-slot-group{color:#d5786a;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;font-size:12px;margin:14px 0 8px}
.dev-slot{display:flex;align-items:center;gap:10px;width:100%;background:transparent;color:#dfcbb4;border:1px solid transparent;border-radius:8px;text-align:left;padding:8px;margin:3px 0;font-weight:700;font-size:13px}
.dev-slot span:nth-child(2){flex:1}
.dev-slot:hover,.dev-slot.is-selected{background:#3e2524;border-color:#8e453d}
.dev-slot-thumbnail{width:40px;height:43px;flex:none;display:grid;place-items:center;background:#55302b;border:1px solid #805047;border-radius:5px;overflow:hidden}
.dev-slot-thumbnail:after{content:"🪶";font-size:19px;position:absolute;z-index:0;opacity:.35}
.dev-slot-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.dev-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.dev-image-cell>span{display:block;font-size:11px;color:#d58b75;letter-spacing:1.1px;font-weight:800;margin-bottom:8px}
.dev-image-frame{min-height:160px;aspect-ratio:1;max-height:310px;border:1px dashed #906352;border-radius:9px;background:repeating-conic-gradient(#23191a 0 25%,#302324 0 50%) 0 0/18px 18px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#bca394;padding:12px;font-size:12px}
.dev-image-frame img:not([hidden]){width:100%;height:100%;object-fit:contain}
.dev-image-frame img[hidden],.dev-image-frame [hidden]{display:none}
.dev-file-label{display:block;text-align:center;cursor:pointer;border:1px solid #b35349;background:#6b2d28;border-radius:7px;font:800 17px "Barlow Condensed",sans-serif;letter-spacing:.5px;padding:16px;color:#f7e5ce}
.dev-file-label:hover{background:#8a3730}
.dev-file-input{display:block;max-width:100%;margin:9px auto 0;color:#cdb5a4;font-size:12px}
.dev-path{font-size:12px;color:#b99e8c;margin:13px 0 14px}
.dev-path code,.dev-publish code{background:#392522;color:#f1d1b9;padding:2px 4px;border-radius:3px;overflow-wrap:anywhere}
.dev-publish{background:#171213;border:1px solid #66443c;border-radius:10px;padding:21px;margin-top:26px}
.dev-publish h3{color:#f1dfc8}
.dev-publish p{font-size:13px;color:#c8af9c;line-height:1.6}
.dev-publish label{display:block;color:#e6cbb4;font-size:13px;font-weight:800;margin:15px 0 6px}
.dev-publish input{display:block;width:100%;padding:12px 13px;border-radius:7px;background:#2f2322;color:#f7e9d3;border:1px solid #866155}
.dev-publish a{color:#f7b29d}
.dev-publish .primary-button{margin-top:13px}
.dev-status{padding:12px;border-radius:6px;border-left:3px solid #a07965;margin:16px 0 0;background:#302421;color:#ebc9ab!important}
.dev-status.success{border-color:#7f9a74;background:#263327;color:#d6eac9!important}
.dev-status.error{border-color:#e66b5c;background:#472421;color:#ffcebc!important}
@media(max-width:900px){.dev-layout{grid-template-columns:280px 1fr}.hero-poster{width:30%;opacity:.7}}
@media(max-width:650px){
  .header-dev{font-size:11px;padding:6px 8px}
  .header-dev span{font-size:13px}
  .brand{font-size:17px}
  .brand-mark{font-size:17px}
  .hero{min-height:440px;padding:42px 27px;background:#0b0909}
  .hero h1{font-size:clamp(40px,10vw,67px);letter-spacing:-1.9px}
  .hero h1 strong{letter-spacing:-1.9px}
  .hero h1 em{font-size:.31em;margin:10px 0 10px 10px}
  .hero-copy>p:not(.eyebrow){max-width:290px;color:#ead3bb}
  .hero-poster{width:42%;height:55%;right:-11%;top:24%;opacity:.20;filter:none;transform:rotate(7deg)}
  .hero:after{inset:9px}
  .hero-ornament{opacity:.13;right:-140px}
  .nav-tab:is(:hover,.is-active){border-left:3px solid #c6433b}
  .dev-layout{grid-template-columns:1fr}
  .dev-slots{max-height:220px}
  .dev-editor{min-width:0}
  .dev-image-frame{min-height:120px}
  .dev-intro{padding:16px}
  .role-dialog{max-height:80vh}
}

.brand-upload{width:42px;height:42px;object-fit:contain}
.feather-upload{position:absolute;inset:18%;width:64%;height:64%;object-fit:contain;transform:rotate(18deg);opacity:.9}
.hero-poster img[hidden]{display:none}
.dialog-icon{position:relative;display:inline-grid;place-items:center;width:110px;height:110px;background:#372424;border:2px solid #b06354;border-radius:12px;overflow:hidden;margin-bottom:15px}
.dialog-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.role-avatar img[hidden],.dialog-icon img[hidden]{display:none}
.dev-slot-thumbnail{position:relative}
#devCurrentImage:not([src]),#devPreviewImage:not([src]){display:none}
@media(max-width:650px){.brand-upload{width:32px;height:32px}}

/* Étape 1 : fiches approfondies, livret noir / beige / rouge */
.role-card__moment{display:block;color:#dc9b86;font-weight:700;font-size:11px;line-height:1.5;margin-top:12px}
.role-dialog{width:min(780px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;overflow:auto;border-radius:14px}
.dialog-close{position:sticky;z-index:5;top:10px;left:calc(100% - 50px);margin-bottom:-34px;width:39px;height:39px;border:1px solid #a45c4c;background:#472723;color:#f3dfc6}
.complete-role{background:#211819;color:#f0e0ca}
.complete-role__header{padding:38px 33px 25px;background:linear-gradient(120deg,#101011,#382020 75%,#602925);border-bottom:1px solid #724038}
.complete-role__eyebrow{font:800 12px "Barlow Condensed",sans-serif;color:#db8d78;letter-spacing:2px}
.complete-role__heading{display:flex;gap:20px;align-items:center;margin-top:15px}
.complete-role__portrait{width:140px;height:155px;flex:0 0 140px;border:2px solid #a95446;background:#3b2423;position:relative;overflow:hidden;display:grid;place-items:center;font-size:52px;border-radius:8px}
.complete-role__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.complete-role__camp{color:#e7ad93;font:800 12px "Barlow Condensed",sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.complete-role.coucous .complete-role__camp{color:#fb786b}
.complete-role__heading h2{font-size:clamp(24px,4vw,42px);color:#f8e8d3;margin:7px 0 11px}
.complete-role__heading small{color:#d2b9a2}
.complete-role__body{padding:27px 33px 31px}
.complete-role__summary{border-left:4px solid #b8483c;background:#3c2221;padding:17px;border-radius:0 8px 8px 0}
.complete-role__summary h3,.complete-role__explain h3,.complete-role__rule h3{font:800 13px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.8px;color:#e5a18e}
.complete-role__summary p{color:#f6e5cf;font-size:18px;font-weight:700;line-height:1.6;margin:8px 0 0}
.complete-role__explain{padding:25px 0}
.complete-role__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0 0}
.role-fact{background:#2e2120;border:1px solid #684138;padding:15px;border-radius:9px}
.role-fact dt{font:800 12px "Barlow Condensed",sans-serif;color:#e49882;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:8px}
.role-fact dd{font-size:13px;line-height:1.75;margin:0;color:#ead8c1}
.complete-role__rule{border-top:1px solid #68443c;padding-top:21px}
.complete-role__rule p{color:#ecd8c1;font-size:14px;line-height:1.9}
.complete-role__rule small{color:#d99581;font-weight:700}
.complete-role__tags{margin-top:24px}
.complete-role__back{width:100%;margin-top:25px}
@media(max-width:650px){.role-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 14px);border-radius:12px}.complete-role__header{padding:32px 16px 20px}.complete-role__heading{gap:12px}.complete-role__portrait{width:104px;height:133px;flex-basis:104px;font-size:42px}.complete-role__heading h2{font-size:clamp(22px,6vw,31px)}.complete-role__body{padding:19px 16px 25px}.complete-role__facts{grid-template-columns:1fr;gap:9px}.role-fact{padding:13px}}
@media(max-width:360px){.complete-role__portrait{width:90px;height:115px;flex-basis:90px}}

/* Mode développeur épuré : 1 case = 1 image, ajouter → valider. */
.dev-steps{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.dev-steps span{display:inline-flex;align-items:center;gap:7px;color:#f3dfc7;background:#362322;border:1px solid #74473f;padding:10px 13px;border-radius:8px;font-size:12px;font-weight:700}
.dev-steps strong{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;background:#a9453b;color:#fff3e7}
.dev-notice{border-left:3px solid #be7861;background:#302020;color:#eed6bb;padding:12px 16px;border-radius:6px;font-size:13px;margin:15px 0 25px;line-height:1.6}
.dev-notice.success{border-color:#90aa72;background:#263126;color:#ddefd4}
.dev-notice.error{border-color:#df6a5c;background:#542623;color:#ffe5d2}
.dev-notice.warning{border-color:#d4a451;background:#3a2b1c;color:#f5debc}
.dev-group{margin:22px 0 36px}
.dev-group h2{font-size:25px;color:#eedac3;margin:0 0 13px}
.dev-group-rows{display:grid;gap:9px}
.dev-simple-row{display:grid;grid-template-columns:82px minmax(135px,1fr) auto auto;align-items:center;gap:16px;padding:12px 15px;background:#261b1d;border:1px solid #65423b;border-radius:12px;min-width:0}
.dev-simple-row.has-candidate{border-color:#c48770;background:#342021}
.dev-small-picture{width:80px;height:80px;border:1px solid #815046;border-radius:8px;overflow:hidden;background:#3b2524;display:grid;place-items:center;position:relative}
.dev-small-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dev-fallback{font-size:26px;opacity:.65}
.dev-simple-name{min-width:0;display:grid;gap:4px}
.dev-simple-name strong{color:#f8e8d4;font-size:15px}
.dev-simple-name small{color:#c9a899;font-size:12px}
.dev-add-image,.dev-validate{border:1px solid #a45a4c;color:#f4dfc8;border-radius:7px;padding:11px 13px;font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;text-align:center}
.dev-add-image{background:#402624}
.dev-add-image:hover{background:#6b332d}
.dev-validate{background:#ad463d;color:#fff1df}
.dev-validate:hover{background:#c8574c}
.dev-add-image input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.dev-code-dialog{background:#261a1b;color:#f7e5cf;border:1px solid #9d5c4d;border-radius:15px;width:min(430px,calc(100vw - 26px));padding:25px}
.dev-code-dialog::backdrop{background:#070607b8}
.dev-code-dialog form{display:grid;gap:12px}
.dev-code-dialog h2{font-size:27px}
.dev-code-dialog p{font-size:13px;color:#d4b5a4}
.dev-code-dialog label{font-size:13px;font-weight:700}
.dev-code-dialog input{background:#3b2827;border:1px solid #a16b59;border-radius:7px;padding:12px;color:#f5e3d0;width:100%}
@media(max-width:680px){
 .dev-simple-row{grid-template-columns:62px minmax(0,1fr) auto;gap:9px;padding:10px}
 .dev-small-picture{width:62px;height:68px}
 .dev-simple-name strong{font-size:13px}
 .dev-simple-name small{font-size:11px;line-height:1.25}
 .dev-add-image{font-size:11px;padding:9px 8px;white-space:normal;max-width:100px}
 .dev-validate{grid-column:2/4;justify-self:stretch}
 .dev-steps span{font-size:11px;padding:7px 8px}
}