@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,800;1,9..144,500&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* compteur-scrabble.fr — éditorial crème / vert Scrabble */
:root{
  --cream:#f4ecd3;       /* beige fond */
  --cream2:#ece1c2;
  --paper:#fbf6e7;       /* cartes */
  --tile:#ecd9a3;        /* tuile scrabble */
  --tile-edge:#cdb778;
  --ink:#21201a;
  --ink2:#46443a;
  --muted:#857f6a;
  --line:#ddd1ad;
  --line2:#cabf9a;
  --green:#1f6b4a;       /* plateau */
  --green-d:#144d34;
  --red:#c0392b;         /* mot compte triple */
  --pink:#e08aa0;        /* mot compte double */
  --blue:#5d96c4;        /* lettre compte double */
  --blue-d:#2f6090;      /* lettre compte triple */
  --maxw:1120px;
  --display:"Fraunces",Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.04}
h1{font-size:clamp(2.6rem,7vw,5.4rem); letter-spacing:-.015em; margin:.04em 0 .2em}
h1 em,h2 em{font-style:italic; font-weight:500}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem); margin:1.3em 0 .5em; letter-spacing:-.01em}
h3{font-size:1.2rem; font-family:var(--sans); font-weight:600}
a{color:var(--green-d); text-underline-offset:3px}
a:hover{color:var(--red)}
p{margin:.65em 0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--green-d); margin:0}
.lead{font-size:1.16rem; color:var(--ink2); max-width:600px}
.mono{font-family:var(--mono)}

/* header */
header.site{position:sticky; top:0; z-index:40; background:rgba(244,236,211,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line2)}
.nav{display:flex; align-items:center; gap:16px; padding:14px 26px; max-width:var(--maxw); margin:0 auto; flex-wrap:wrap}
.brand{font-family:var(--display); font-size:1.4rem; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand span{color:var(--green)}
.nav nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.nav nav a{font-family:var(--mono); color:var(--ink2); text-decoration:none; padding:7px 11px; border-radius:7px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em}
.nav nav a:hover{background:var(--cream2)}
.nav nav a[aria-current]{color:var(--green-d); font-weight:500}

/* hero */
.hero{padding:46px 0 14px}
.hero .eyebrow{margin-bottom:12px}
.tiles-title{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px}

/* tuiles Scrabble */
.tile{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:linear-gradient(160deg,#f3e3b4,var(--tile)); color:var(--ink);
  border:1px solid var(--tile-edge); border-radius:7px; box-shadow:0 2px 0 var(--tile-edge),0 4px 8px rgba(60,50,20,.12);
  font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; user-select:none}
.tile .v{position:absolute; right:4px; bottom:3px; font-family:var(--mono); font-size:.62rem; font-weight:500; opacity:.8}
.tile.lg{width:64px; height:64px; font-size:2.1rem; border-radius:9px}
.tile.sm{width:34px; height:34px; font-size:1.05rem; border-radius:5px}
.tiles-title .tile.lg{width:clamp(44px,8.5vw,72px); height:clamp(44px,8.5vw,72px); font-size:clamp(1.5rem,4.5vw,2.4rem)}

/* layout générateur */
.gen{display:grid; gap:26px; margin-top:24px}
@media(min-width:900px){.gen{grid-template-columns:1.05fr .95fr}}
.panel{background:var(--paper); border:1px solid var(--line2); border-radius:14px; padding:22px}
.panel.green{background:var(--green); color:#f3ead0; border-color:var(--green-d)}
.panel.green h2,.panel.green h3{color:#fff}

.label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:block; margin:0 0 6px}
input[type=text],input[type=number],select{width:100%; padding:11px 12px; border:1px solid var(--line2); border-radius:9px; background:#fff; color:var(--ink); font-family:inherit; font-size:1rem}
input:focus,select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(31,107,74,.16)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:1px solid var(--green); border-radius:10px;
  padding:12px 18px; font-size:1rem; font-weight:600; font-family:var(--sans); background:var(--green); color:#fff; transition:.13s}
.btn:hover{background:var(--green-d); border-color:var(--green-d)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line2)}
.btn.ghost:hover{background:var(--cream2); border-color:var(--ink); color:var(--ink)}
.btn.red{background:var(--red); border-color:var(--red)} .btn.red:hover{background:#a52f22}
.btn.block{width:100%}
.btn.sm{padding:9px 14px; font-size:.9rem}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* setup joueurs */
.players-setup .prow{display:flex; gap:10px; align-items:center; margin:8px 0}
.players-setup .prow .pi{flex:1}
.players-setup .num{font-family:var(--mono); color:var(--muted); width:24px; text-align:center}

/* clavier de tuiles */
.kbd{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0}
.kbd button{aspect-ratio:1/1; border:1px solid var(--tile-edge); border-radius:6px; background:linear-gradient(160deg,#f3e3b4,var(--tile)); color:var(--ink); cursor:pointer; position:relative; font-family:var(--display); font-weight:700; font-size:1.05rem}
.kbd button .v{position:absolute; right:3px; bottom:2px; font-family:var(--mono); font-size:.55rem; opacity:.75}
.kbd button:hover{filter:brightness(1.05); transform:translateY(-1px)}
.kbd button.blank{background:#efe9d6}

/* mot en cours */
.word{display:flex; flex-wrap:wrap; gap:6px; min-height:54px; padding:8px; border:1px dashed var(--line2); border-radius:10px; background:#fff; align-items:center}
.word:empty::before{content:"Cliquez des lettres pour composer le mot…"; color:var(--muted); font-size:.92rem; padding:6px}
.wtile{cursor:pointer; transition:.1s}
.wtile[data-mult="2"]{outline:3px solid var(--blue); outline-offset:1px}
.wtile[data-mult="3"]{outline:3px solid var(--blue-d); outline-offset:1px}
.wtile .rm{position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--red); color:#fff; font-size:.7rem; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer}

.bonus-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-top:8px}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:5px}
.score-now{font-family:var(--display); font-size:2.2rem; font-weight:800; color:var(--green-d)}

/* tableau scores */
table{width:100%; border-collapse:collapse; margin:10px 0; font-size:.98rem}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:center}
th{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:500}
td:first-child,th:first-child{text-align:left}
tfoot td{font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--ink); border-top:2px solid var(--green)}
td.lead-cell{color:var(--green-d); font-weight:700}
.turn{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--green); color:#fff; font-size:.8rem; font-weight:600; font-family:var(--mono)}
.winner{margin:14px 0; padding:14px; border-radius:10px; background:#eaf3ee; border:1px solid var(--green); color:var(--green-d); font-weight:600; text-align:center; display:none}
.winner.show{display:block}

/* listes / contenu */
ul.clean{list-style:none; padding:0; margin:.6em 0}
ul.clean li{padding:9px 0 9px 26px; border-bottom:1px solid var(--line); position:relative}
ul.clean li::before{content:"▪"; position:absolute; left:4px; top:9px; color:var(--green)}
article{font-size:1.05rem}
.faq dt{font-weight:600; color:var(--ink); margin-top:16px}
.faq dd{margin:.3em 0 0; color:var(--ink2)}

/* rangées numérotées façon "selected work" */
.rows{margin:14px 0; border-top:1px solid var(--line2)}
.rows a{display:flex; align-items:baseline; gap:16px; padding:18px 4px; border-bottom:1px solid var(--line2); text-decoration:none; color:var(--ink)}
.rows a:hover{color:var(--green-d)}
.rows .idx{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.rows .ttl{font-family:var(--display); font-size:clamp(1.4rem,3vw,2rem); font-weight:600; flex:1}
.rows .meta{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

/* table valeur des lettres */
.valgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:14px 0}
.valgrid .vrow{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.valgrid .vrow b{font-family:var(--mono); color:var(--green-d)}

.ad{display:flex; align-items:center; justify-content:center; margin:22px auto; max-width:728px;
  background:repeating-linear-gradient(45deg,#e9ddbb,#e9ddbb 11px,#efe6c8 11px,#efe6c8 22px);
  border:1px dashed var(--line2); border-radius:9px; color:#a99b73; font-size:.72rem; letter-spacing:.12em; font-family:var(--mono); text-transform:uppercase}
.ad-top{min-height:90px}.ad-mid{min-height:250px}.ad-foot{min-height:90px}

footer.site{margin-top:46px; border-top:1px solid var(--line2); background:var(--green-d); color:#d9e6dd}
footer.site .wrap{padding:30px 26px; font-size:.92rem}
footer.site a{color:#fff; text-decoration:none; margin-right:16px}
footer.site a:hover{color:var(--tile)}
footer.site .fcols{display:grid; gap:18px; grid-template-columns:1fr; margin-bottom:18px}
@media(min-width:700px){footer.site .fcols{grid-template-columns:2fr 1fr 1fr}}
footer.site h4{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:#a9c4b4; margin:0 0 8px}
footer.site .fcols a{display:block; margin:0 0 6px; color:#d9e6dd}

.cookie{position:fixed; bottom:16px; left:16px; right:16px; max-width:540px; margin:0 auto; z-index:60;
  background:var(--paper); border:1px solid var(--ink); border-radius:12px; padding:16px 18px; box-shadow:0 16px 44px rgba(33,32,26,.22); display:none}
.cookie.show{display:block}
.cookie p{margin:0 0 10px; font-size:.9rem; color:var(--ink2)}
.cookie .btn{width:auto; display:inline-flex}

/* breakout pleine largeur */
.bleed{width:100vw; margin-left:calc(50% - 50vw)}

/* bandeau héros illustré */
.hero-banner{position:relative; min-height:clamp(420px,66vh,640px); display:flex; align-items:flex-end; overflow:hidden; background:#16335c}
.hero-banner>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,20,40,.30) 0%,rgba(10,20,40,.58) 45%,rgba(7,14,30,.94) 100%); z-index:1}
.hero-banner .hb-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:64px 26px 52px; color:#fff}
.hero-banner .hb-inner::before{content:""; position:absolute; left:-40px; right:0; bottom:-10px; top:-30px; z-index:-1; pointer-events:none;
  background:radial-gradient(130% 95% at 24% 100%, rgba(5,10,22,.82) 0%, rgba(5,10,22,.5) 42%, transparent 72%)}
.hero-banner h1{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); max-width:16ch}
.hero-banner .lead{color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5); max-width:46ch}
.hero-banner .eyebrow{color:#ffd9a8; text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-banner .btn{box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hero-banner .btn{margin-top:18px; background:var(--tile); color:var(--ink); border-color:var(--tile)}
.hero-banner .btn:hover{background:#fff; border-color:#fff}

/* barre joueurs compacte */
.setup-bar{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end}
.setup-bar .grp{flex:0 0 auto}
.setup-bar #player-names{display:flex; flex-wrap:wrap; gap:8px}
.setup-bar #player-names .prow{margin:0}
.setup-bar #player-names .pi{width:120px}

/* bande illustrée (full-bleed) */
.feature{position:relative; overflow:hidden; background:#16335c; min-height:clamp(340px,52vh,520px); display:flex; align-items:center}
.feature>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.feature::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,40,74,.8) 0%,rgba(18,40,74,.42) 55%,rgba(18,40,74,.12) 100%); z-index:1}
.feature .cap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:46px 26px; color:#fff; width:100%}
.feature .cap h2{color:#fff; max-width:16ch}
.feature .cap p{color:#eadfb0; max-width:42ch}

/* galerie illustrations */
.gallery{display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin:14px 0}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0; overflow:hidden; border-radius:12px; background:#16335c; border:1px solid var(--line2)}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/4; transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{display:none}

/* illustration de hero cluster */
.hero-illus{border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(33,32,26,.18); margin:18px 0 0; max-width:420px}
.hero-illus img{width:100%; height:auto; display:block}

@media print{
  header.site,footer.site,.ad,.cookie,.btn-row,.kbd,.hero-banner,.feature,.gallery,.no-print{display:none!important}
  body{background:#fff; color:#000}
  .panel{box-shadow:none; border:1px solid #999; background:#fff}
}