* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
    height: 100dvh;
    /* Une seule marge extérieure ; les blocs ne cumulent plus leurs paddings. */
    padding: 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: #243247;
    background-color: #e8edf3;
    background-image: url('../images/background.webp');
    background-position: top right;
    background-repeat: no-repeat;
    /* Image carrée de 1254 px : taille d’origine, puis agrandissement au besoin. */
    background-size: max(1254px, 100vw) auto;
}
@media (orientation: portrait) {
    body { background-size: auto max(1254px, 100dvh); }
}
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible {
    outline: 3px solid #3987db;
    outline-offset: -3px;
}
#up { display: flex; flex: 0 0 auto; min-height: 42px; background: transparent; align-items: center; gap: 12px; }
/* Trois images à leur taille native ; seul le papier central se répète. */
#title { display: flex; align-items: stretch; min-width: 0; height: 80px; min-height: 80px; padding: 0; color: #12365a; flex: 1; }
#title::before, #title::after { content: ''; height: 80px; background-repeat: no-repeat; }
#title::before { flex: 0 0 65px; background-image: url('../images/title-left-final.png'); }
#title::after { flex: 0 0 62px; background-image: url('../images/title-right-final.png'); }
h1 {
    font-family: 'Baloo 2', Arial, sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
    overflow-wrap: break-word;
    color: #12365a;
    text-shadow: 0 1px #fff8de;
    background: url('../images/title-center-final.png') left top repeat-x;
    padding: 12px 6px 16px;
    flex: 1;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: .25em;
}
#menu { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; }
.title-part { display: inline-block; white-space: nowrap; }
@media (orientation: portrait) {
    #title h1 { text-align: center; }
}
#menu button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid black;
    border-radius: 9px;
    color: #142033;
    background: #edf2f8;
}
#menu button:hover { background: #cddff3; }
#menu svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#down { flex: 1; display: flex; gap: 10px; min-height: 0; min-width: 0; }
#main { flex: 1; display: flex; gap: 10px; padding: 0; min-width: 0; min-height: 0; }
#pub { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0; min-height: 0; background: transparent; color: #6a788b; }
.ad-test {
    width: 160px;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed #8198b3;
    background: #edf2f8;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}
.ad-secondary { display: none; }
.ad-size::after { content: '160 × 600 px'; }
.ad-test small { font-size: 11px; }
.ad-test.ad-configured { background: transparent; border: 0; }
.ad-configured > :not(iframe) { display: none; }
.ad-configured iframe { display: block; width: 100%; height: 100%; border: 0; }
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border-radius: 10px; background: white; }
.panel h2 { margin: 0; flex: 0 0 auto; font-size: 16px; }
.panel-title { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; text-align: left; font-weight: bold; color: inherit; background: #d9e4f0; }
.panel-title:hover { background: #cbdced; }
.panel-content { display: none; flex: 1; min-height: 0; padding: 10px; overflow: auto; }
#view { flex: 1; }
#view .panel-content, .panel.active .panel-content { display: block; }
#parameters { flex: 0 0 clamp(200px, 28vw, 300px); display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
#parameters .panel.active { flex: 1; }
.grid-placeholder { height: 100%; display: grid; place-items: center; }
.grid-placeholder img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
label { display: block; margin-bottom: 8px; }
select { width: 100%; padding: 10px; border: 1px solid #b4c4d5; border-radius: 6px; background: white; color: inherit; }
select { margin-bottom: 10px; }
p { line-height: 1.5; color: #6a788b; }
dialog { width: min(340px, 90vw); max-height: 90dvh; padding: 24px; border: 0; border-radius: 10px; color: #243247; }
dialog::backdrop { background: #14203399; }
dialog h2 { margin: 0 0 20px; font-size: 20px; }
#language-list-label { color: inherit; margin: 0 0 10px; }
#language-list { display: grid; gap: 4px; }
#language-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 6px; background: white; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#language-list button:hover { background: #edf3f9; }
#language-list button[aria-pressed="true"] { background: #dcebf9; border-color: #84aed4; }
#language-list button:focus-visible { outline: 2px solid #0869b2; outline-offset: 2px; }
#language-list img { object-fit: contain; flex: 0 0 32px; }
.language-auto { width: 32px; text-align: center; font-size: 24px; }
#about-dialog { position: relative; width: min(520px, 94vw); max-height: 90dvh; overflow: auto; padding: 26px 20px 16px; border: 1px solid #142033; border-radius: 16px; background: white; text-align: center; }
#about-dialog::backdrop { background: #14203366; backdrop-filter: blur(4px); }
#about-dialog h2 { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .25em; margin: 0 0 6px; font: 700 24px/1.2 'Baloo 2', Arial, sans-serif; }
#about-dialog .about-copyright { position: relative; z-index: 1; margin: 0; font-size: 12px; line-height: 1.5; }
.about-image { display: block; width: 100%; height: auto; margin: -25px auto 0; }
#contact-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin-top: -65px; text-align: left; }
#contact-form label { margin-bottom: 0; font-weight: bold; text-shadow: -1px -1px 0 white, 0 -1px 0 white, 1px -1px 0 white, -1px 0 0 white, 1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 1px 0 white; }
#contact-form input[type="email"] { width: 100%; padding: 10px; font: inherit; background: white; border: 1px solid #b4c4d5; border-radius: 6px; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contact-form textarea { width: 100%; padding: 10px; min-height: 90px; resize: vertical; font: inherit; border: 1px solid #b4c4d5; border-radius: 6px; }
#contact-form button { padding: 10px; background: #1766a5; color: white; border: 1px solid #125487; border-radius: 6px; font-weight: bold; }
#contact-form button:disabled { opacity: .65; }
#contact-status { margin: 0; font-size: 13px; }
#about-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 22px; }

/* Deux onglets reliés au panneau de la grille. */
#view { background: transparent; }
#view-content { background: white; border-radius: 0 0 10px 10px; }
.grid-mode-tabs { display: flex; padding: 0; gap: 4px; background: transparent; }
.grid-mode-tabs button { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #b4c7d9; border-bottom: 0; border-radius: 10px 10px 0 0; background: #cbdced; color: #344b62; font: inherit; font-weight: bold; overflow-wrap: anywhere; }
.grid-mode-tabs button:hover { background: #eaf1f8; }
.grid-mode-tabs button[aria-pressed="true"] { background: white; color: #142033; box-shadow: inset 0 3px #176da6; }
.grid-mode-tabs button:focus-visible { outline: 2px solid #176da6; outline-offset: -3px; }
@media print { .grid-mode-tabs { display: none; } }

/* Empiler en portrait ou lorsque les trois colonnes ne tiennent plus. */
@media (orientation: portrait), (max-width: 639px) {
    #view:not(.active) .grid-mode-tabs button { border-bottom: 1px solid #b4c7d9; border-radius: 10px; }
    #up { flex: 0 0 auto; flex-direction: column; }
    #title { justify-content: center; width: 100%; flex: 0 0 auto; }
    #menu { gap: 10px; }
    #menu button { width: 38px; height: 38px; flex-basis: 38px; }
    #down { flex-direction: column; }
    #main { flex-direction: column; gap: 10px; padding: 0; }
    #parameters { display: contents; }
    #main .panel { flex: 0 0 auto; }
    #main .panel.active { flex: 1; min-height: 0; }
    #main .panel .panel-content { display: none; }
    #main .panel.active .panel-content { display: block; }
    #pub { flex: 0 0 50px; }
    .ad-test { width: 320px; max-width: 100%; height: 50px; gap: 2px; }
    .ad-size::after { content: '320 × 50 px'; }
}

/* Formats de test plus courts si la colonne de 600 px ne tient pas. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 687px) {
    .ad-test { height: 300px; }
    .ad-size::after { content: '160 × 300 px'; }
}
/* En paysage bas, garder les colonnes mais réduire les barres. */
@media (orientation: landscape) and (max-height: 500px) {
    #up { flex-direction: row; align-items: center; }
    #menu { gap: 4px; }
    #menu button { width: 34px; height: 34px; flex-basis: 34px; }
    #menu svg { width: 22px; height: 22px; }
    #main { gap: 10px; }
    .panel-title { min-height: 32px; padding: 7px 12px; font-size: 14px; }
    .panel-content { padding: 8px; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 367px) {
    .ad-test { height: 100px; }
    .ad-size::after { content: '160 × 100 px'; }
}
/* Deux annonces courtes : 200 px + espace de 8 px + marges de 16 px.
   Avec l’en-tête de 52 px, il faut au moins 276 px de hauteur. */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 276px) and (max-height: 367px) {
    .ad-secondary { display: flex; }
}
@media (orientation: landscape) and (max-width: 639px) and (max-height: 500px) {
    #pub { flex-basis: 50px; }
}
@media (max-width: 335px) {
    .ad-test { width: 300px; }
    .ad-size::after { content: '300 × 50 px'; }
}

/* Dimensions des blocs de test ; sélection par espace disponible. */
.ad-test[data-format="970x250"] { width: 970px; height: 250px; }
.ad-test[data-format="970x90"] { width: 970px; height: 90px; }
.ad-test[data-format="728x90"] { width: 728px; height: 90px; }
.ad-test[data-format="468x60"] { width: 468px; height: 60px; }
.ad-test[data-format="336x280"] { width: 336px; height: 280px; }
.ad-test[data-format="300x1050"] { width: 300px; height: 1050px; }
.ad-test[data-format="300x600"] { width: 300px; height: 600px; }
.ad-test[data-format="300x250"] { width: 300px; height: 250px; }
.ad-test[data-format="300x100"] { width: 300px; height: 100px; }
.ad-test[data-format="300x50"] { width: 300px; height: 50px; }
.ad-test[data-format="320x100"] { width: 320px; height: 100px; }
.ad-test[data-format="320x50"] { width: 320px; height: 50px; }
.ad-test[data-format="250x250"] { width: 250px; height: 250px; }
.ad-test[data-format="200x200"] { width: 200px; height: 200px; }
.ad-test[data-format="160x600"] { width: 160px; height: 600px; }
.ad-test[data-format="120x600"] { width: 120px; height: 600px; }
.ad-test[data-format="120x240"] { width: 120px; height: 240px; }
.ad-test[data-format="125x125"] { width: 125px; height: 125px; }
.ad-test[data-format="180x150"] { width: 180px; height: 150px; }
.ad-test[data-format="160x300"] { width: 160px; height: 300px; }
.ad-test[data-format="160x100"] { width: 160px; height: 100px; }
#pub[data-wide="true"] { flex-basis: 300px; }
.ad-test[data-format] .ad-size::after { content: none; }
.ad-test[hidden] { display: none !important; }
.ad-secondary:not([hidden])[data-format] { display: flex; }

/* Bannières plus larges en bas lorsque la largeur et la hauteur le permettent. */
@media (orientation: portrait) and (min-width: 484px) and (min-height: 650px) {
    #pub { flex-basis: 60px; }
}
@media (orientation: portrait) and (min-width: 744px) and (min-height: 650px) {
    #pub { flex-basis: 90px; }
}
@media (max-width: 483px) and (min-height: 800px) {
    #pub { flex-basis: 100px; }
}

/* En paysage, les icônes s’alignent à droite, même en mode étroit. */
@media (orientation: landscape) {
    #up { flex-direction: row; align-items: center; }
    #title { justify-content: flex-start; flex: 1; }
    #menu { justify-content: flex-end; flex: 0 0 auto; }
}

/* Saisie et liste des mots : les contrôles partagent les styles existants. */
:is(#wordForm, #gridOptions) input:not([type="hidden"]):not([type="checkbox"]) { width: 100%; min-width: 0; padding: 8px; border: 1px solid #b4c4d5; border-radius: 6px; font: inherit; }
:is(#wordForm, #gridOptions) label { margin-bottom: 6px; }
#wordForm { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #b4c4d5; }
:is(#wordForm, #gridOptions) button, .word-actions button, .word-actions a { padding: 8px; border: 1px solid #b4c4d5; border-radius: 6px; background: #edf2f8; color: inherit; }
.word-form-actions { display: flex; align-items: stretch; gap: 8px; }
#wordForm .word-submit { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: #1766a5; border-color: #125487; color: #fff; font-weight: bold; }
#wordForm #cancel-edit { flex-shrink: 0; background: #ededed; border-color: #b8b8b8; color: #333; font-weight: bold; }
#wordForm #cancel-edit:hover { background: #dedede; }
#wordForm .word-submit:hover { background: #125487; }
#wordForm input[name="word"]:not([type="hidden"]):not([type="checkbox"]) { font-weight: bold; }
#wordForm .word-submit:disabled { opacity: .65; cursor: wait; }
.word-submit svg { flex-shrink: 0; }
.word-submit .save-icon { display: none; }
.word-submit:has([data-i18n="saveWord"]) .add-icon { display: none; }
.word-submit:has([data-i18n="saveWord"]) .save-icon { display: inline; }
#added-words { list-style: none; padding: 0; }
#added-words li { display: flex; align-items: center; gap: 8px; padding: 10px; margin-bottom: 8px; border-radius: 6px; background: #edf2f8; }
#added-words .automatic-start { position: relative; margin-top: 22px; }
#added-words .automatic-start::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; border-top: 1px solid #a8bed4; }
.word-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.word-info strong, .word-info span { display: block; }
.word-info img { display: block; max-width: 100%; max-height: 80px; margin-top: 4px; }
.word-actions { display: flex; gap: 4px; flex-shrink: 0; }
.word-actions svg, #pick-clue-image svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
[hidden] { display: none !important; }

.clue-row { display: flex; gap: 4px; margin-bottom: 8px; }
.clue-row input { flex: 1; }
#pick-clue-image { flex-shrink: 0; }
#image-choice { display: block; overflow-wrap: anywhere; margin-bottom: 8px; }

#gridOptions .extra-cells { width: 64px; padding: 4px; }
.grid-dimensions { border: 0; margin: 0 0 8px; padding: 0; }
.dimension-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#gridOptions small { display: block; margin-bottom: 8px; }
.photo-list { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.photo-list img { width: 60px; height: 45px; object-fit: cover; }
.photo-list button { padding: 2px !important; }
.photo-item { display: inline-flex; align-items: center; gap: 4px; }
#options-status:empty, #editor-status:empty { display: none; }
.photo-list button[aria-pressed="true"] { outline: 2px solid #142033; }
.move-photo .puzzle { touch-action: none; }
.decorative-photo { cursor: move; }
.photo-selection rect { fill: none; stroke: #087ac1; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.photo-resize { fill: white; stroke: #087ac1; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
@media print { .photo-selection { display: none; } }
@media print {
    @page { margin: 12mm; }
    html, body { width: auto; height: auto !important; overflow: visible !important; }
    body { display: block; padding: 0; background: white; color: black; }
    #up, #pub, #parameters, #view > h2, dialog { display: none !important; }
    #down, #main, #view, #view-content { display: block !important; padding: 0; height: auto !important; overflow: visible !important; }
    .grid-placeholder { display: none; }
}

/* Dessin calculé par PHP ; le navigateur affiche seulement le SVG. */
.grid-sheet { text-align: center; }
#view-content { position: relative; }
#photo-tools { position: absolute; z-index: 5; width: min(220px, calc(100% - 8px)); box-sizing: border-box; padding: 10px; border: 1px solid #a8bed4; border-radius: 8px; background: #fffffff5; box-shadow: 0 3px 12px #14203326; text-align: left; }
#photo-tools[hidden] { display: none; }
#photo-tools label { margin: 10px 0 0; font-size: 13px; }
#photo-tools input { display: block; width: 100%; }
#photo-recrop { padding: 6px 10px; border: 1px solid #a8bed4; border-radius: 6px; background: #edf3f9; color: inherit; }
@media print { #photo-tools { display: none; } }
.panel .grid-heading { margin: 0 0 12px; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }
.puzzle { display: block; width: 100%; margin: auto; }
.empty-cell { fill: #52616b; }
.letter-cell { fill: white; }
.definition-cell { fill: #e5e9ed; }
.cell-border { fill: none; stroke: #142033; stroke-width: 1; }
.solution-letter { visibility: hidden; font: bold 30px Arial, sans-serif; text-anchor: middle; fill: #142033; }
.show-solution .solution-letter { visibility: visible; }
.solution-slash { display: none; }
.show-solution .solution-slash { display: inline; }
.grid-coordinate { font: 12px Arial, sans-serif; text-anchor: middle; fill: #142033; }
.cell-clue { font: 8px Arial, sans-serif; text-anchor: middle; dominant-baseline: central; fill: #142033; }
.clue-arrow { fill: none; stroke: #142033; stroke-width: 1.5; }
.grid-clues { display: flex; gap: 20px; text-align: left; margin-top: 10px; }
.grid-clues section { flex: 1; min-width: 0; }
.grid-clues h3 { margin: 0 0 6px; font-size: 15px; }
.grid-clues ul { list-style: none; padding: 0; margin: 0; }
.clue-thumbnail { max-width: 100px; max-height: 70px; vertical-align: middle; }
#crop-dialog { width: min(940px, 94vw); padding: 16px; }
#crop-dialog h2, #crop-dialog p { margin: 0 0 10px; }
#crop-preview { display: block; max-width: 100%; max-height: 55dvh; margin: auto; touch-action: none; cursor: crosshair; }
.crop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
@media screen {
    #view-content { overflow: hidden; }
    .grid-sheet { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    .puzzle { flex: 1 1 0; height: 0; min-height: 0; }
    .grid-heading, .grid-notice { flex-shrink: 0; }
    .grid-clues { flex-shrink: 0; max-height: 40%; overflow: auto; }
}
@media print {
    .grid-sheet { display: block; height: auto; }
    .puzzle { height: auto; max-height: 220mm; print-color-adjust: exact; }
    .panel .grid-heading { font-size: 24pt; line-height: 1.15; margin-bottom: 5mm; break-after: avoid; }
    .grid-notice { display: none; }
    .grid-clues li { break-inside: avoid; }
}