/* =====================================================================
   Word Search Nook — feuille de style principale
   =====================================================================
   Organisation :
     1. Variables et remise a zero
     2. Typographie et utilitaires
     3. Composants (boutons, champs, cartes)
     4. En-tete et pied de page
     5. Accueil
     6. Editeur
     7. Grille et jeu
     8. Comptes et espace personnel
     9. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------- */
:root {
    /* =================================================================
       SYSTEME DE DESIGN — « Atelier de mots meles »
       =================================================================
       Langage visuel : chaleureux, arrondi, educatif et digne de
       confiance. Deux couleurs porteuses (un vert sarcelle calme pour la
       confiance, un ambre chaud pour l'action), posees sur du blanc et
       des fonds teintes tres clairs. Pas de degrade, pas de verre depoli,
       pas d'ombre lourde : la chaleur vient des teintes douces, des
       grands rayons et de l'espace, pas des effets.
       ================================================================= */

    /* --- Couleurs porteuses --- */
    /* Sarcelle. --primary sert aux aplats decoratifs (contours, jauges,
       pastilles) ; des que du texte blanc doit s'y poser, on descend a
       --primary-ink (4.97:1) — #1d9c86 n'atteindrait que 3.41:1. */
    --primary:       #1d9c86;
    --primary-ink:   #157e6b;   /* fond porteur de texte blanc */
    --primary-deep:  #14705f;   /* texte sarcelle sur fond clair */
    --primary-soft:  #e8f8f5;   /* fond teinte de carte */
    --primary-line:  #bfe7df;

    /* Ambre. L'aplat --accent ne porte que du texte tres fonce ; le texte
       ambre sur fond clair utilise --accent-deep (5.13:1 sur blanc,
       4.62:1 sur --accent-soft). */
    --accent:        #f2a922;
    --accent-deep:   #9c6008;
    --accent-soft:   #fdf2da;
    --accent-line:   #f3dca8;

    /* --- Encre et surfaces --- */
    --ink:          #0c0c0d;   /* titres */
    --ink-soft:     #45474f;   /* texte courant */
    --ink-faint:    #6e7079;   /* meta, legendes — 4.93:1 sur blanc */
    --paper:        #ffffff;
    --paper-warm:   #fafafa;   /* fond de page */
    --paper-sunk:   #f2f2f4;
    --line:         #eaeaec;
    --line-strong:  #d9d9dd;

    --blue:         #2f5fd0;   /* focus clavier uniquement */
    --green:        #1d9c86;
    --red:          #dd3842;

    /* Themes de grille : valeurs par defaut, ecrasees par Themes::cssVars(). */
    --t-accent:      var(--primary);
    --t-accent-deep: var(--primary-deep);
    --t-bg:          var(--paper-warm);
    --t-cell:        var(--paper);
    --t-ink:         var(--ink);
    --t-found:       #cfeee7;
    --t-display:     'Fredoka', 'Trebuchet MS', sans-serif;

    /* --- Rayons : echelle fluide, comme la reference --- */
    --radius-xs:    clamp(4px,  .417vw, 10px);
    --radius-small: clamp(8px,  .625vw, 14px);
    --radius:       clamp(12px, .833vw, 20px);
    --radius-lg:    clamp(16px, 1.042vw, 28px);
    --radius-xl:    clamp(18px, 1.25vw,  36px);
    --radius-pill:  500px;

    /* --- Ombres : discretes, jamais dramatiques --- */
    --shadow:       0 2px 4px rgba(12, 12, 13, .03), 0 12px 28px -12px rgba(12, 12, 13, .10);
    --shadow-lift:  0 4px 8px rgba(12, 12, 13, .04), 0 24px 48px -16px rgba(12, 12, 13, .16);

    /* --- Rythme d'espacement --- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: clamp(3rem, 6vw, 6rem);   /* respiration entre sections */

    --wrap:         1200px;
    --gap:          clamp(1rem, 3vw, 2rem);

    /* --- Typographie --- */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
    --font-grid:    'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --font-label:   'Fredoka', system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Le defilement des ancres reste doux, sauf pour qui prefere l'eviter. */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* L'en-tete est colle en haut : sans cette marge, toute cible de
       defilement (ancre, scrollIntoView de l'assistant) viendrait se ranger
       PILE sous l'en-tete, donc masquee par lui. */
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    /* Corps fluide, comme la reference : lisible sur telephone, genereux
       sur grand ecran, sans palier brutal. */
    font-size: clamp(1rem, .55vw + .85rem, 1.15rem);
    line-height: 1.55;
    /* Evite que le pied de page remonte sur les pages courtes. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    padding-bottom: var(--space-8);
}

img, svg { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   2. Typographie et utilitaires
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 .5em;
}

/* Echelle fluide : un seul reglage par niveau, valable de 360px a 1600px. */
h1 { font-size: clamp(2.15rem, 3.4vw + 1rem, 4.1rem); }
h2 { font-size: clamp(1.7rem,  1.9vw + .9rem, 2.9rem); }
h3 { font-size: clamp(1.3rem,  .8vw + .95rem, 1.9rem); }
h4 { font-size: clamp(1.1rem,  .4vw + .95rem, 1.4rem); }

/* Second membre d'un titre, colore : la signature typographique de la
   reference, reprise ici avec nos deux couleurs porteuses. */
.title-accent { color: var(--primary); }
.title-accent--warm { color: var(--accent-deep); }

p { margin: 0 0 1em; }

a {
    color: var(--primary-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover { color: var(--primary); }

.wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
}

/* Sur-titre : pastille douce plutot que capitales espacees. Reprend la
   maniere de la reference d'annoncer une section avec chaleur. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .4em .95em;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-family: var(--font-label);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: var(--space-3);
}

.eyebrow--warm { background: var(--accent-soft); color: var(--accent-deep); }

.page-title { margin-bottom: .2em; }

.page-subtitle {
    color: var(--ink-faint);
    max-width: 46rem;
    margin-bottom: var(--space-6);
}

.section-title { margin: var(--space-8) 0 var(--space-5); }

.center { text-align: center; }

.hint {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: .4rem 0 0;
}

.hint--center { text-align: center; margin-top: 1rem; }

.notice {
    background: var(--accent-soft);
    border: 1px solid #f4cdbe;
    border-radius: var(--radius-small);
    padding: .85rem 1rem;
    font-size: .95rem;
    margin: 0 0 1rem;
}

.notice--warning {
    background: #fff8e6;
    border-color: #f0dda6;
}

.warning {
    background: #fff8e6;
    border: 1px solid #f0dda6;
    border-radius: var(--radius-small);
    padding: .75rem .9rem;
    font-size: .9rem;
    margin-top: 1rem;
}

/* Lu par les lecteurs d'ecran, invisible a l'ecran. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Premier lien de la page, revele au clavier. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 100;
    border-radius: 0 0 var(--radius-small) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* Contour de focus visible et coherent partout. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.prose { max-width: 46rem; }
.prose h2 { font-size: 1.35rem; margin-top: 2rem; }

/* ---------------------------------------------------------------------
   3. Composants
   --------------------------------------------------------------------- */

/* --- Boutons ---
   Pilules pleines et chaleureuses, dans l'esprit de la reference : le
   remplissage ambre porte l'action principale, le contour discret porte le
   reste. Le survol souleve legerement plutot que de clignoter. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease, color .15s ease, border-color .15s ease;
    /* Cible tactile confortable, meme pour les petits boutons. */
    min-height: 46px;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

/* Ambre + encre foncee : 8.9:1, bien au-dela du minimum AA, la ou du
   blanc sur ambre n'aurait atteint que 2:1. */
.button--primary {
    background: var(--accent);
    color: #1f1401;
    box-shadow: 0 6px 16px -6px rgba(242, 169, 34, .75);
}

.button--primary:hover {
    background: #e39b12;
    color: #1f1401;
    box-shadow: 0 10px 22px -8px rgba(242, 169, 34, .85);
}

.button--secondary {
    background: var(--paper);
    border-color: var(--line-strong);
    color: var(--ink);
}

.button--secondary:hover {
    border-color: var(--primary);
    color: var(--primary-deep);
    background: var(--primary-soft);
}

/* Variante pleine sarcelle : action structurante (jouer, ouvrir un lien). */
.button--teal {
    background: var(--primary-ink);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(29, 156, 134, .65);
}

.button--teal:hover { background: var(--primary-deep); color: #fff; }

.button--danger {
    background: transparent;
    border-color: transparent;
    color: var(--red);
}

.button--danger:hover { background: #fdecee; color: var(--red); transform: none; }
.button--danger:active { transform: none; }

.button--large {
    padding: 1rem 2.1rem;
    font-size: 1.08rem;
    min-height: 56px;
}

.button--small { padding: .55rem 1.15rem; font-size: .92rem; min-height: 42px; }

.button--tiny {
    padding: .4rem .9rem;
    font-size: .86rem;
    min-height: 38px;
    border-color: var(--line-strong);
}

.button--tiny:hover { border-color: var(--primary); color: var(--primary-deep); }

.button--block { width: 100%; }

/* Bouton qui ressemble a un lien (deconnexion, actions secondaires). */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-button:hover { color: var(--accent); }

.inline-form { display: inline; }

/* --- Champs --- */
.field { margin-bottom: 1.25rem; }

.field__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.field__count {
    color: var(--ink-faint);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.label {
    display: flex;
    align-items: baseline;
    gap: .5em;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: .45rem;
}

.input {
    width: 100%;
    padding: .8rem 1.05rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-small);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    /* 16px minimum : evite le zoom automatique sur iOS. */
}

.input::placeholder { color: var(--ink-faint); }

.input:hover { border-color: var(--primary-line); }

.input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.textarea {
    resize: vertical;
    min-height: 9rem;
    font-family: var(--font-body);
    line-height: 1.5;
}

.input--code {
    font-family: var(--font-grid);
    font-size: 1.2rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
}

/* Curseur de taille. accent-color seul laisse un rail noir sur Chromium :
   on dessine donc explicitement le rail et la poignee pour rester dans la
   palette. */
.range {
    width: 100%;
    height: 44px;
    accent-color: var(--primary);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--paper-sunk);
}

.range::-moz-range-track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--paper-sunk);
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--paper);
    box-shadow: 0 1px 4px rgba(12, 12, 13, .25);
}

.range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--paper);
    box-shadow: 0 1px 4px rgba(12, 12, 13, .25);
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .95rem;
    min-height: 44px;
}

.checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }

.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

/* --- Choix visuels (formes, themes) --- */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: .6rem;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .85rem .5rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-warm);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    height: 100%;
}

.choice__box:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    transform: translateY(-2px);
}

/* Choix retenu : fond teinte + contour plein, lisible sans dependre de la
   seule couleur (l'echelle et le contour changent aussi). */
.choice input:checked + .choice__box {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--primary-soft);
}

.choice input:focus-visible + .choice__box {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.choice__emoji { font-size: 1.5rem; line-height: 1; }
.choice__label { font-size: .78rem; color: var(--ink-soft); }

/* Pastille de couleur des themes. */
.choice__swatch {
    width: 100%;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--t-accent) 0 50%, var(--t-bg) 50% 100%);
    border: 1px solid rgba(0, 0, 0, .08);
}

/* --- Cartes radio (visibilite) --- */
.radio-card {
    display: block;
    margin-bottom: .5rem;
    cursor: pointer;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card__body {
    display: block;
    padding: .95rem 1.15rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-warm);
    transition: border-color .15s ease, background-color .15s ease;
}

.radio-card__body:hover { border-color: var(--primary-line); }

.radio-card input:checked + .radio-card__body {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--primary-soft);
}

.radio-card input:focus-visible + .radio-card__body {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.radio-card__label { display: block; font-weight: 600; font-size: .95rem; }
.radio-card__hint { display: block; color: var(--ink-soft); font-size: .85rem; }

/* --- Messages flash --- */
.flash-zone {
    width: min(100% - 2rem, var(--wrap));
    margin: 1rem auto 0;
}

.flash {
    padding: .8rem 1.1rem;
    border-radius: var(--radius-small);
    font-size: .95rem;
    margin: 0 0 .5rem;
    border: 1px solid transparent;
}

.flash--success { background: #e8f6ef; border-color: #b6e3cd; color: #1a5c40; }
.flash--error   { background: #fdecea; border-color: #f5c6c0; color: #8c2318; }

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: .25rem .8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-label);
    font-size: .82rem;
    font-weight: 500;
    background: var(--paper-sunk);
    color: var(--ink-soft);
}

.badge--public   { background: #e8f6ef; color: #1a5c40; }
.badge--unlisted { background: #eaf0fc; color: #23407f; }
.badge--private  { background: var(--paper-sunk); color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   4. En-tete et pied de page
   --------------------------------------------------------------------- */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand__mark { color: var(--primary); display: flex; }
.brand:hover { color: var(--ink); }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list a:not(.button) {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
}

.site-nav__list a:not(.button):hover { color: var(--ink); }

.site-nav__lang {
    display: flex;
    gap: .4rem;
    padding-left: .5rem;
    border-left: 1px solid var(--line);
}

.lang-link, .lang-current {
    font-family: var(--font-label);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.lang-current { color: var(--ink); }
.lang-link { color: var(--ink-faint); text-decoration: none; }
.lang-link:hover { color: var(--accent); }

/* Bouton hamburger : masque sur grand ecran. */
.nav-toggle { display: none; }

.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 2.5rem 0;
    margin-top: auto;
}

.site-footer__inner { text-align: center; }

.site-footer__tagline {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.site-footer__links a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.site-footer__links a:hover { color: var(--accent); }

.site-footer__free {
    color: var(--ink-faint);
    font-size: .85rem;
    max-width: 40rem;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   5. Accueil
   --------------------------------------------------------------------- */
.hero {
    padding: var(--space-7) 0 var(--space-6);
    position: relative;
}

/* Bandeau d'accueil : fond teinte tres doux, coins largement arrondis.
   C'est la seule zone coloree en plein de la page — tout le reste respire
   sur du blanc. */
.hero__inner {
    max-width: 68rem;
    margin-inline: auto;
    text-align: center;
    background: var(--primary-soft);
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
}

.hero__title { margin-bottom: .25em; }

/* Deuxieme moitie du titre en couleur : la signature typographique reprise
   de la reference, appliquee a notre propre accroche. */
.hero__title-accent {
    display: block;
    color: var(--primary);
}

.hero__subtitle {
    font-size: clamp(1.02rem, .6vw + .9rem, 1.2rem);
    color: var(--ink-soft);
    max-width: 40rem;
    margin: 0 auto var(--space-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.hero__actions .button--large { min-width: 12.5rem; }

/* Champ « j'ai recu un lien » : discret, pose sur le bandeau sans le
   concurrencer. Ce n'est pas l'action principale. */
.link-form {
    background: var(--paper);
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: left;
    max-width: 34rem;
    margin-inline: auto;
}

.link-form__label {
    display: block;
    font-family: var(--font-label);
    font-weight: 500;
    font-size: .95rem;
    color: var(--ink-soft);
    margin-bottom: .5rem;
}

.link-form__row { display: flex; gap: .5rem; }
.link-form__row .input { flex: 1; }

.steps { padding: var(--space-6) 0 0; }

.steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =====================================================================
   CARTES — le composant central du systeme.
   Fond teinte doux, grand rayon, generous padding, pas d'ombre au repos.
   Le survol souleve la carte et affirme le contour : chaleureux, jamais
   clinquant.
   ===================================================================== */
.step {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Alternance de teinte : evite le mur monochrome sans ajouter de couleur
   supplementaire au systeme. */
.steps__list > .step:nth-child(even) {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--paper);
    color: var(--accent-deep);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
}

.steps__list > .step:nth-child(even) .step__number { color: var(--primary-deep); }

.step__title { margin-bottom: .3em; }
.step__body { color: var(--ink-soft); margin: 0; }

.steps__list--compact { margin-bottom: var(--space-6); }

.promise {
    background: var(--primary-ink);
    color: #fff;
    padding: var(--space-8) 0;
    margin-top: var(--space-8);
}

.promise__inner { text-align: center; max-width: 46rem; }
.promise__title { color: #fff; }
/* Blanc pur plutot qu'un blanc teinte : sur ce fond, une nuance plus douce
   tomberait sous le seuil AA. */
.promise__body { color: #fff; margin: 0; }

/* --- Liste de grilles --- */
.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: var(--gap);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

/* Carte de grille : meme famille que .step (rayon, padding, teinte), mais
   blanche pour rester lisible en longue liste, et surmontee d'une vignette
   coloree qui joue le role de l'image dans la reference. */
.puzzle-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.puzzle-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow);
}

.puzzle-card__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: var(--space-4);
}

.puzzle-card__link:hover { color: var(--t-accent-deep); }

/* Vignette : carre teinte a la couleur du theme de la grille — l'equivalent
   de l'image de la reference, mais genere sans aucun fichier a fournir. */
.puzzle-card__shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--radius);
    background: var(--t-bg);
    color: var(--t-accent);
    font-size: 1.4rem;
}

/* Meta en pied de carte, separee par un trait pointille : le detail de
   mise en page que j'ai retenu des cartes de la reference. */
.puzzle-card__meta {
    color: var(--ink-faint);
    font-size: .9rem;
    /* margin-top auto : la ligne de meta se colle au bas de la carte, donc
       toutes les cartes d'une rangee alignent leur pied malgre des titres de
       longueurs differentes. */
    margin: auto 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--line-strong);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .45rem;
}

/* Le point separateur est purement decoratif : on le retire quand il finit
   une ligne apres un retour a la ligne. */
.puzzle-card__meta > [aria-hidden="true"] { color: var(--line-strong); }

.puzzle-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: var(--space-3) 0 0;
    font-size: .85rem;
}

.puzzle-card__date { color: var(--ink-faint); }

.puzzle-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: var(--space-3) 0 0;
}

.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--ink-faint);
    background: var(--paper-warm);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.empty-state--small { padding: 1.5rem 1rem; }

/* ---------------------------------------------------------------------
   Articles — meme famille de cartes que les grilles : rayon, respiration
   et ligne de meta identiques. Ce qui change, c'est l'illustration, qui
   remplace la vignette coloree.
   --------------------------------------------------------------------- */
.articles { padding-top: var(--space-6); }
.articles__header { margin-bottom: var(--space-6); }

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--gap);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow);
}

.article-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.article-card__media {
    display: block;
    aspect-ratio: 5 / 3;
    background: var(--primary-soft);
    overflow: hidden;
}

.article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sans illustration : une bande courte, pas le grand cadre reserve aux
   vraies images. Garder le 5/3 laisserait un vide de plusieurs centaines de
   pixels sur chaque carte, ce qui donne une page a moitie vide tant que les
   articles n'ont pas de visuel. */
.article-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    height: 4.5rem;
    font-size: 2rem;
}

.article-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: var(--space-4);
    flex: 1;
}

.article-card__topic {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-label);
    font-size: .85rem;
    color: var(--primary-deep);
}

.article-card__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--ink);
}

.article-card:hover .article-card__title { color: var(--primary-deep); }

.article-card__excerpt {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.5;
}

.article-card__meta {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px dashed var(--line-strong);
    color: var(--ink-faint);
    font-size: .88rem;
}

/* --- Guides regroupes par categorie --- */
.articles-block {
    margin-bottom: var(--space-8);
}

.articles-block__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.articles-block__title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: clamp(1.35rem, 1vw + 1.05rem, 1.8rem);
}

.articles-block__image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.articles-block__count {
    margin: 0;
    color: var(--ink-faint);
    font-size: .92rem;
}

.articles-block__more {
    margin: var(--space-4) 0 0;
}

/* --- Demande de compte, en fin de creation ---
   Le visiteur a fini sa grille : le ton est celui d'une derniere formalite,
   pas d'un obstacle. La note rassure explicitement sur le fait que rien
   n'est perdu. */
/* flex-basis: 100% : le bloc occupe sa propre ligne sous « Precedent »,
   au lieu de se serrer dans l'espace restant — ses boutons se briseraient
   alors sur trois lignes. */
.create-account {
    flex: 1 0 100%;
    padding: var(--space-4);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
}

.create-account__note {
    margin: 0 0 var(--space-3);
    color: var(--ink-soft);
    font-size: .95rem;
}

.create-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Invitation a creer une grille ---
   Volontairement visible sans etre criarde : c'est une proposition en fin
   de lecture, pas une banniere qui coupe l'article. */
.create-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-8) 0 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-xl);
}

.create-cta__body {
    flex: 1 1 22rem;
}

.create-cta__title {
    margin: 0 0 .3em;
    font-size: clamp(1.3rem, 1vw + 1.05rem, 1.7rem);
}

.create-cta__text {
    margin: 0;
    color: var(--ink-soft);
    max-width: 38rem;
}

.create-cta__action {
    margin: 0;
    flex: 0 0 auto;
}

/* --- Page d'un article --- */
.article { padding-top: var(--space-4); }

.article__header {
    max-width: 46rem;
    margin-bottom: var(--space-5);
}

.article__title { margin-bottom: .25em; }

.article__lead {
    font-size: clamp(1.05rem, .6vw + .95rem, 1.25rem);
    color: var(--ink-soft);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--ink-faint);
    font-size: .9rem;
    margin: 0;
}

.article__figure {
    margin: 0 0 var(--space-6);
}

/* max-width plutot que width: une image plus etroite que la colonne garde
   sa taille reelle au lieu d'etre etiree et floue. */
.article__figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

/* Colonne de lecture etroite : au-dela d'environ 70 caracteres par ligne,
   l'oeil perd le debut de la ligne suivante. */
.article__body {
    max-width: 42rem;
    font-size: clamp(1.02rem, .4vw + .95rem, 1.15rem);
    line-height: 1.7;
}

.article__body h2 { margin-top: 1.6em; }
.article__body h3 { margin-top: 1.4em; }
.article__body ul,
.article__body ol { padding-left: 1.4rem; margin: 0 0 1em; }
.article__body li { margin-bottom: .35em; }

.article__body blockquote {
    margin: 1.4em 0;
    padding: .6rem 0 .6rem 1.2rem;
    border-left: 3px solid var(--primary);
    color: var(--ink-soft);
    font-style: italic;
}

.article__related { margin-top: var(--space-8); }

.topic-page__articles { margin-top: var(--space-8); }

/* --- Formulaire de redaction --- */
.article-form { max-width: 52rem; }

.article-form__current img {
    display: block;
    max-width: 240px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: .4rem;
}

.article-form__actions {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

/* --- Illustrations de categorie ---
   Facultatives : quand le fichier n'est pas depose, Topics::image() renvoie
   null et le gabarit affiche l'emoji a la place. Ces regles ne s'appliquent
   donc que lorsqu'une image existe reellement. */
.topic-chip__image {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.topic-page__image {
    display: block;
    width: clamp(72px, 10vw, 120px);
    height: clamp(72px, 10vw, 120px);
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--space-4);
    border: 3px solid var(--primary-soft);
}

/* Paragraphe de presentation d'une categorie : c'est le seul vrai texte de
   la page, on lui donne la meme largeur de lecture qu'un article. */
.topic-page__intro {
    max-width: 42rem;
    margin-bottom: var(--space-6);
    color: var(--ink-soft);
}

/* --- Categories dans l'administration --- */
.admin-topic__name {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.admin-topic__image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.admin-topic__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-warm);
    flex: none;
}

/* ---------------------------------------------------------------------
   6. Editeur
   --------------------------------------------------------------------- */
.editor { padding-top: var(--space-6); }

.editor__layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* Le panneau de reglages : une carte claire, posee a cote de l'apercu.
   C'est la zone de travail — elle reste sobre pour que la grille reste le
   point de mire. */
.editor__form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.15rem, 2.5vw, 1.85rem);
}

.editor__preview {
    /* L'apercu reste visible pendant qu'on fait defiler le formulaire. */
    position: sticky;
    top: 92px;
}

.editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* --- L'apercu : la vedette de l'ecran de creation ---------------------
   Presente comme une feuille posee sur un support teinte a la couleur du
   theme choisi. Le cadre colore change avec le theme, ce qui rend le choix
   de palette immediatement lisible sans rien expliquer. */
.preview-card {
    position: relative;
    background: var(--t-bg);
    border-radius: var(--radius-xl);
    padding: clamp(.75rem, 1.6vw, 1.25rem);
    box-shadow: var(--shadow);
}

.preview-card__eyebrow {
    display: block;
    text-align: center;
    font-family: var(--font-label);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-accent-deep);
    opacity: .75;
    margin: .35rem 0 0;
}

.preview-card__title {
    font-family: var(--t-display);
    color: var(--t-accent-deep);
    text-align: center;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    margin: .15em 0 .6em;
    padding: 0 1rem;
}

/* La feuille blanche interieure : c'est elle qui porte la grille, comme la
   page qui sortira de l'imprimante. */
.preview-card__body {
    background: var(--t-cell);
    border-radius: var(--radius-lg);
    padding: clamp(.85rem, 2vw, 1.5rem);
}

.preview-card__words { margin-top: var(--space-4); }

.empty-preview {
    text-align: center;
    color: var(--ink-faint);
    padding: var(--space-7) var(--space-4);
    margin: 0;
}

/* ---------------------------------------------------------------------
   7. Grille et jeu
   --------------------------------------------------------------------- */
.grid-wrapper {
    /* La grille reste centree et ne deborde jamais de son conteneur. */
    display: flex;
    justify-content: center;
    width: 100%;
    /* Repere des autocollants : ils se positionnent en pourcentage de la
       grille, qui occupe ce conteneur (voir .puzzle-stickers). */
    position: relative;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: 0px;
    width: 100%;
    max-width: min(100%, 34rem);
    aspect-ratio: 1;
    position: relative;
    /* Empeche la selection de texte pendant qu'on trace un mot au doigt. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.puzzle-grid-frame,
.grid-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
}

.grid {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(var(--grid-size, 16), 1fr) !important;
  grid-template-rows: repeat(var(--grid-size, 16), 1fr) !important;
  box-sizing: border-box;
}

.grid .cell {
  width: 100% !important;
  height: 100% !important;
  font-size: clamp(9px, calc(100cqw / var(--grid-size, 16) * 0.72), 16px);
  line-height: 1;
}


.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-cell);
    color: var(--t-ink);
    border-radius: 3px;
    font-family: var(--font-grid);
    font-weight: 600;
    /* La taille de la lettre suit la taille de la case. */
    font-size: clamp(.55rem, calc(26rem / var(--grid-size)), 1.4rem);
    line-height: 1;
    aspect-ratio: 1;
    cursor: default;
    transition: background-color .12s ease, color .12s ease;
}

.cell--empty { background: transparent; }

/* Case appartenant a un mot deja trouve. */
.cell--found {
    background: var(--t-found);
    color: var(--t-accent-deep);
}

/* Case en cours de selection. */
.cell--selecting {
    background: var(--t-accent);
    color: #fff;
}

/* Solutions revelees (impression avec reponses, ou bouton « Afficher »). */
.cell--answer {
    background: var(--t-found);
    color: var(--t-accent-deep);
    font-weight: 700;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Mise en page du jeu --- */
.play { padding-top: 1.5rem; }

.play__header { text-align: center; margin-bottom: 1.5rem; }

.play__title {
    font-family: var(--t-display);
    color: var(--t-accent-deep);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: .2em;
}

.play__meta {
    color: var(--ink-faint);
    font-size: .9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: 0;
}

.play__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: var(--gap);
    align-items: start;
}

.play__side {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    position: sticky;
    top: 92px;
}

.play__progress { margin-bottom: 1rem; }

.play__progress-text {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: 0 0 .5rem;
    font-size: .95rem;
}

.play__progress-text strong {
    font-size: 1.4rem;
    font-family: var(--font-display);
    color: var(--t-accent-deep);
}

.progress-bar {
    height: 10px;
    background: var(--paper-sunk);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-bar__fill {
    display: block;
    height: 100%;
    background: var(--t-accent);
    border-radius: var(--radius-pill);
    transition: width .3s ease;
}

.play__timer {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border-block: 1px solid var(--line);
    margin-bottom: 1rem;
}

.play__timer-label { font-size: .85rem; color: var(--ink-soft); }

.play__timer-value {
    font-family: var(--font-grid);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.play__words-title { font-size: 1.1rem; margin-bottom: .6rem; }

/* Liste des mots. Dans le panneau de jeu elle se lit en colonnes etroites
   (une checklist qu'on parcourt du regard) ; sur la feuille imprimable,
   print.css lui donne sa propre grille. */
.word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .15rem .75rem;
}

/* Mot a trouver : une case a cocher, pas un bouton. Le rond vide devant
   chaque mot le dit clairement — sans lui, ces pastilles auraient l'air
   cliquables alors qu'elles ne le sont pas. */
.word {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .3rem .3rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .98rem;
    font-family: var(--font-label);
    color: var(--ink-soft);
    transition: opacity .2s ease, color .2s ease;
}

.word::before {
    content: '';
    flex: none;
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    transition: background-color .2s ease, border-color .2s ease;
}

/* La pastille se remplit d'une coche des que le mot est trouve : l'etat ne
   repose donc pas seulement sur la couleur. */
.word--found::before {
    background: var(--t-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
    border-color: var(--t-accent);
}

/* Mot trouve : barre et estompe, sans disparaitre. */
.word--found {
    opacity: .6;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.word__clue { font-style: italic; }

.word__answer {
    font-weight: 700;
    font-family: var(--font-grid);
    margin-left: .4rem;
}

.play__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.play__actions .button { flex: 1 1 auto; }

.congrats {
    text-align: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: var(--space-6);
}

.congrats__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--t-accent-deep);
    margin-bottom: .3em;
}

.congrats__time {
    font-family: var(--font-grid);
    font-size: 1.1rem;
    color: var(--ink-soft);
}

.congrats__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 1rem 0 0;
}

/* ---------------------------------------------------------------------
   8. Partage, comptes, espace personnel
   --------------------------------------------------------------------- */
.share { padding-top: 2rem; max-width: 42rem; }
.share__header { text-align: center; }

.share__puzzle-title {
    font-family: var(--t-display);
    font-size: 1.3rem;
    color: var(--t-accent-deep);
}

.share__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.share__link-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
.share__url { flex: 1; font-size: .9rem; }

.share__channels {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.share__channels .button { flex: 1 1 auto; }

.share__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.5rem;
}

.auth-page {
    padding-top: clamp(2rem, 6vw, 4rem);
    display: flex;
    justify-content: center;
}

.auth-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow);
    width: min(100%, 30rem);
}

.auth-card__intro { color: var(--ink-soft); font-size: .95rem; }
.auth-card__links { margin-top: 1rem; font-size: .9rem; }

.auth-card__switch {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .95rem;
    color: var(--ink-soft);
}

.account { padding-top: 2rem; }
.account__header { margin-bottom: 2rem; }
.account__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.account__section { margin-top: 3rem; }

.family-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
    margin-bottom: 2rem;
}

.family-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.family-card--wide { max-width: 34rem; margin: 0 auto 2rem; text-align: center; }
.family-card__title { font-size: 1.2rem; }
.family-card__subtitle { font-size: 1rem; margin-top: 1.5rem; }
.family-card__code-label { font-size: .9rem; color: var(--ink-soft); margin-bottom: .3rem; }

.family-code {
    font-family: var(--font-grid);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-radius: var(--radius-small);
    padding: .6rem 1rem;
    margin: 0 0 1rem;
}

.member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.member {
    background: var(--paper-sunk);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .9rem;
}

.family-card__leave { margin-top: 1.5rem; }

.history { list-style: none; margin: 0; padding: 0; }

.history__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
}

.history__link { font-weight: 600; text-decoration: none; color: var(--ink); }
.history__link:hover { color: var(--accent); }

.history__meta {
    display: flex;
    gap: 1rem;
    font-size: .85rem;
    color: var(--ink-faint);
}

.history__time { font-family: var(--font-grid); }

.browse { padding-top: 2rem; }
.browse__header { text-align: center; }

.browse__search {
    display: flex;
    gap: .5rem;
    max-width: 32rem;
    margin: 0 auto 2rem;
}

.browse__search .input { flex: 1; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.pagination__status { color: var(--ink-soft); font-size: .9rem; }

.faq { margin: 2rem 0; }

.faq__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    padding: .9rem 1.1rem;
    margin-bottom: .6rem;
}

.faq__question { font-weight: 600; cursor: pointer; }
.faq__answer { margin: .75rem 0 0; color: var(--ink-soft); font-size: .95rem; }

.error-page { text-align: center; padding-top: clamp(3rem, 8vw, 6rem); }

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

/* ---------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .editor__layout,
    .play__layout {
        grid-template-columns: 1fr;
    }

    /* Sur mobile, l'apercu et le panneau passent sous la grille. */
    .editor__preview,
    .play__side {
        position: static;
    }

    /* L'apercu vient avant le formulaire : on voit tout de suite le resultat. */
    .editor__preview { order: -1; }

    /* La reliure perforee prend trop de place sur petit ecran : le
       formulaire redevient un bloc simple, sans perdre sa lisibilite. */
    .editor__form {
        border-left: none;
        border-top: 3px solid var(--ink);
        padding: 1.25rem 0 0;
    }

    .editor__form::before { display: none; }
}

@media (max-width: 720px) {
    /* Navigation repliee derriere un bouton. */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--line);
        border-radius: var(--radius-small);
        background: var(--paper);
        cursor: pointer;
        position: relative;
    }

    .nav-toggle__bar,
    .nav-toggle__bar::before,
    .nav-toggle__bar::after {
        content: '';
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        position: absolute;
    }

    .nav-toggle__bar::before { transform: translateY(-6px); }
    .nav-toggle__bar::after  { transform: translateY(6px); }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 1rem;
    }

    .site-nav.is-open { display: block; }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }

    .site-nav__list li { width: 100%; }

    .site-nav__list a:not(.button) {
        display: block;
        padding: .7rem .5rem;
        border-radius: var(--radius-small);
    }

    .site-nav__list a:not(.button):hover { background: var(--paper-sunk); }

    .site-nav__lang {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: .75rem .5rem 0;
        margin-top: .5rem;
    }

    .field-row { grid-template-columns: 1fr; }

    .hero__actions .button { width: 100%; }

    .link-form__row { flex-direction: column; }

    .play__actions .button,
    .share__channels .button { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    .choice-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .share__link-row { flex-direction: column; }
}

/* ---------------------------------------------------------------------
   10. Description riche, themes et fil d'Ariane
   --------------------------------------------------------------------- */

/* --- Editeur de description --- */
.editor__section-title {
    font-size: 1.15rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.richtext-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .4rem;
    background: var(--paper-sunk);
    border: 1.5px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-small) var(--radius-small) 0 0;
}

.richtext-toolbar button {
    min-width: 38px;
    min-height: 38px;
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    cursor: pointer;
    line-height: 1;
}

.richtext-toolbar button:hover {
    border-color: var(--line);
    background: #fff;
}

.richtext-toolbar button:active { transform: translateY(1px); }

/* Le champ prolonge la barre d'outils : les deux forment un seul bloc. */
.textarea--rich {
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    font-family: var(--font-grid);
    font-size: .9rem;
    line-height: 1.6;
}

.textarea--meta {
    min-height: 4rem;
    resize: vertical;
}

/* Compteur en depassement : rouge, sans etre alarmant. */
.field__count.is-over { color: var(--red); font-weight: 600; }

/* Apercu du rendu, sous le champ. */
.richtext-preview {
    margin-top: .75rem;
    padding: 1rem;
    background: var(--paper-sunk);
    border-radius: var(--radius-small);
    font-size: .95rem;
}

.richtext-preview:empty { display: none; }

.richtext-preview h2 { font-size: 1.2rem; margin: .8em 0 .3em; }
.richtext-preview h3 { font-size: 1.05rem; margin: .8em 0 .3em; }
.richtext-preview > :first-child { margin-top: 0; }
.richtext-preview > :last-child { margin-bottom: 0; }

/* --- Description affichee sur la page de jeu --- */
.puzzle-description {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    line-height: 1.7;
}

.puzzle-description h2 {
    font-size: 1.35rem;
    margin: 1.6em 0 .4em;
}

.puzzle-description h3 {
    font-size: 1.12rem;
    margin: 1.4em 0 .4em;
}

.puzzle-description > :first-child { margin-top: 0; }

.puzzle-description ul,
.puzzle-description ol {
    padding-left: 1.4rem;
    margin: 0 0 1em;
}

.puzzle-description li { margin-bottom: .3em; }

.puzzle-description blockquote {
    margin: 1.2em 0;
    padding: .6rem 0 .6rem 1.1rem;
    border-left: 3px solid var(--t-accent, var(--accent));
    color: var(--ink-soft);
    font-style: italic;
}

.puzzle-description a { color: var(--t-accent-deep, var(--accent-deep)); }

/* --- Fil d'Ariane --- */
.breadcrumb { margin: 1rem 0 1.5rem; }

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--ink-faint);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '›';
    margin-right: .5rem;
    color: var(--ink-faint);
}

.breadcrumb__item a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb__item [aria-current] { color: var(--ink); }

/* --- Pages de theme --- */
.topic-page { padding-top: 1rem; }
.topic-page__header { margin-bottom: 2rem; }
.topic-page__emoji { margin-right: .3rem; }
.topic-page__others { margin-top: 3rem; }

.topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topic-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-label);
    font-size: .95rem;
    min-height: 44px;
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}

.topic-chip:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-deep);
    transform: translateY(-2px);
}

.topic-chip__count {
    color: var(--ink-faint);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* Lien de theme sous le titre d'une grille. */
.play__topic {
    color: var(--t-accent-deep);
    text-decoration: none;
}

.play__topic:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   11. Espace d'administration
   --------------------------------------------------------------------- */
.admin { padding-top: 2rem; }
.admin__header { margin-bottom: 1.5rem; }

.admin-nav { margin-bottom: 2rem; border-bottom: 1px solid var(--line); }

.admin-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-nav__link {
    display: block;
    padding: .7rem 1.1rem;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.admin-nav__link:hover { color: var(--ink); }

.admin-nav__link.is-active {
    color: var(--accent-deep);
    border-bottom-color: var(--accent);
}

/* Lien d'administration dans l'en-tete : discret mais reconnaissable. */
.site-nav__admin { color: var(--accent-deep) !important; font-weight: 600; }

/* --- Chiffres du tableau de bord --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.stat-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card__link:hover .stat-card__value { color: var(--accent); }

.stat-card__value {
    display: block;
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-card__label {
    display: block;
    margin-top: .3rem;
    color: var(--ink-soft);
    font-size: .9rem;
}

/* --- Filtres --- */
.admin__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.admin__filters .input { flex: 1 1 14rem; }
.admin__filters select { flex: 0 1 12rem; }

/* --- Tableaux --- */
/* Le tableau defile horizontalement sur petit ecran plutot que de
   deformer la page. */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.admin-table th,
.admin-table td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.admin-table th {
    background: var(--paper-sunk);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--paper-warm); }

.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-table__slug {
    display: block;
    color: var(--ink-faint);
    font-size: .8rem;
    font-family: var(--font-grid);
    margin-top: .15rem;
    /* Un slug long ne doit pas etirer la colonne. */
    word-break: break-all;
}

.admin-table__muted { color: var(--ink-faint); }

.admin-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    white-space: nowrap;
}

/* Bandeau signalant qu'on edite la grille de quelqu'un d'autre. */
.admin-notice {
    background: #eaf0fc;
    border: 1px solid #c3d3f2;
    border-radius: var(--radius-small);
    padding: .8rem 1rem;
    font-size: .95rem;
    margin-bottom: 1.5rem;
}

/* =======================================================================
   Habillage « page designee » : signature de l'auteur
   ======================================================================= */

.puzzle-signature {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--t-ink, var(--ink-soft));
    margin: .25rem 0 1rem;
}

.puzzle-signature__sep { margin: 0 .4em; opacity: .6; }

/* =======================================================================
   Autocollants : places librement autour de la grille (titre au-dessus,
   marges, coins) mais jamais sur les cases de lettres.

   x/y sont un pourcentage de la GRILLE, pas de la feuille : la feuille
   s'etire a l'impression pour remplir la page A4 alors que la grille garde
   ses proportions, donc seul un reperage sur la grille designe le meme
   endroit a l'ecran et sur le papier. Les valeurs sortent volontairement de
   0-100 % pour viser le titre (y negatif) ou le bas de page (y > 100), d'ou
   l'absence de tout overflow: hidden sur le chemin.

   Le rectangle des lettres reste interdit : le placement en est repousse
   pendant le glissement (public/assets/js/print-stickers.js).
   ======================================================================= */
.puzzle-grid-frame,
.play__decorated-zone {
    position: relative;
}

/* Epouse la boite de son parent positionne (.sheet sur la feuille
   imprimable, .play__decorated-zone / .fullbleed__sheet a l'ecran, tous
   trois position: relative). Voir Stickers::sanitizeList : x/y sont un
   pourcentage de CE parent. */
.puzzle-stickers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Ce qui deborde (titre au-dessus, marges au-dessous) reste visible. */
    overflow: visible;
    z-index: 2;
}

.puzzle-sticker {
    position: absolute;
    line-height: 1;
    transform: translate(-50%, -50%) rotate(var(--rotation, 0deg));
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}

/* Fond blanc flou derriere l'emoji : un autocollant pose sur une grille de
   lettres reste lisible quel que soit ce qu'il recouvre, comme un vrai
   autocollant colle sur une feuille plutot qu'un pixel qui se fond dedans. */
.puzzle-sticker::before {
    content: '';
    position: absolute;
    inset: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, 0) 82%);
    z-index: -1;
}

/* =======================================================================
   Editeur d'autocollants : palette + zone de glisser-deposer.
   ======================================================================= */
.sticker-palette {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: .5rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-small);
    margin-bottom: .6rem;
}

.sticker-palette__group-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-faint);
    margin: 0 0 .3rem;
}

.sticker-palette__row {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.sticker-palette__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.2rem;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    cursor: pointer;
    transition: border-color .12s ease, transform .12s ease;
}

.sticker-palette__item:hover { border-color: var(--accent); transform: scale(1.06); }

.sticker-palette__item:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.sticker-palette__item:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* Panneau de placement, dans la barre d'outils de la feuille imprimable. */
.sticker-panel {
    padding-bottom: 1rem;
}

.sticker-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .6rem;
}

.sticker-panel__foot .hint { margin: 0; }

/* En mode edition, l'autocollant pose sur la feuille devient saisissable :
   il garde exactement la meme position et la meme taille qu'a l'impression,
   on lui ajoute seulement de quoi l'attraper. Les poignees portent .no-print
   et disparaissent donc a l'impression. La couche, elle, reste transparente
   aux clics (pointer-events: none plus haut) : seuls les autocollants
   eux-memes redeviennent saisissables. */
.puzzle-sticker.is-editable {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.puzzle-sticker.is-editable:active { cursor: grabbing; }

.puzzle-sticker.is-dragging,
.puzzle-sticker.is-resizing {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: 6px;
}

.sticker-handle__remove {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transform: rotate(calc(-1 * var(--rotation, 0deg)));
}

.sticker-handle__resize {
    position: absolute;
    bottom: -.4rem;
    right: -.4rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--accent);
    cursor: nwse-resize;
    transform: rotate(calc(-1 * var(--rotation, 0deg)));
}

/* =======================================================================
   Page de jeu en mode plein cadre (fullBleed)
   ======================================================================= */
.fullbleed-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: var(--paper-warm);
}

.fullbleed {
    width: 100%;
    max-width: 64rem;
}

.fullbleed__sheet {
    position: relative;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    backdrop-filter: blur(3px);
}

.fullbleed__title {
    text-align: center;
    font-family: var(--t-display, var(--font-display));
    color: var(--t-accent-deep, var(--accent-deep));
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: .3em;
}

.fullbleed__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: var(--gap);
    align-items: start;
    margin-top: 1.5rem;
}

.fullbleed__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fullbleed__back {
    text-align: center;
    margin-top: 1.25rem;
}

.fullbleed__back a {
    color: var(--ink-faint);
    font-size: .85rem;
}

@media (max-width: 720px) {
    .fullbleed__layout { grid-template-columns: 1fr; }
}

/* =======================================================================
   Assistant de creation en 3 etapes (wizard)
   ======================================================================= */

/* Puces d'etape : trois pastilles douces au-dessus du formulaire. Elles
   indiquent la progression et permettent de revenir a une etape franchie.
   L'etape active se distingue par sa teinte ET son contour, jamais par la
   couleur seule. */
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.wizard-steps__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.1rem .5rem .5rem;
    background: var(--paper-warm);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-faint);
    font-family: var(--font-label);
    font-size: .95rem;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.wizard-steps__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--line-strong);
    color: var(--ink-faint);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: .85rem;
    flex: none;
}

.wizard-steps__label {
    /* Le libelle disparait sur mobile : le numero suffit a suivre la
       progression sans surcharger une barre etroite. */
    white-space: nowrap;
}

.wizard-steps__item.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.wizard-steps__item.is-active .wizard-steps__number {
    background: var(--primary-ink);
    border-color: var(--primary-ink);
    color: #fff;
}

/* Une etape deja validee reste cliquable pour y revenir : le curseur et la
   couleur signalent que ce n'est pas juste un indicateur passif. */
.wizard-steps__item.is-done {
    border-color: var(--primary-line);
    color: var(--ink-soft);
    background: var(--paper);
}

/* Le chiffre est remplace par une coche : le texte d'origine est masque
   (font-size: 0) plutot que retire du DOM, pour rester lisible par les
   lecteurs d'ecran ; ::before affiche la coche a une taille normale. */
.wizard-steps__item.is-done .wizard-steps__number {
    background: var(--primary-ink);
    border-color: var(--primary-ink);
    color: #fff;
    font-size: 0;
}

.wizard-steps__item.is-done .wizard-steps__number::before {
    content: '✓';
    font-size: .9rem;
}

/* Chaque etape du formulaire. Un <fieldset> porte par defaut une bordure et
   des marges laterales : sans cette remise a zero, le panneau afficherait
   deux cadres imbriques. */
.wizard-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.wizard-step__hint {
    color: var(--ink-soft);
    font-size: .92rem;
    margin: 0 0 1.25rem;
}

.wizard-step__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.wizard-step__regen {
    text-align: center;
    margin-top: 1rem;
}

/* Reglages avances (meta description, habillage) : replies par defaut pour
   ne pas allonger l'etape de publication, qu'on ouvre seulement si on veut
   affiner ces details. */
.field-advanced {
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-small);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.field-advanced__summary {
    cursor: pointer;
    list-style: none;
    padding: .8rem 1rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
    background: var(--paper-sunk);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.field-advanced__summary::-webkit-details-marker { display: none; }

.field-advanced__summary::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--ink-faint);
    transition: transform .15s ease;
}

.field-advanced[open] .field-advanced__summary::after {
    transform: rotate(45deg);
}

.field-advanced__body {
    padding: 1.1rem 1rem 0;
}

@media (max-width: 720px) {
    .wizard-steps__label { display: none; }
    .wizard-steps__item { padding: .5rem; }

    .wizard-step__actions {
        flex-wrap: wrap;
    }

    .wizard-step__actions .button { flex: 1 1 auto; }
}