/* =============================================
   1qr2.com — main stylesheet
   ============================================= */

:root {
    --teal: #2E8B7A;
    --teal-dark: #1F5F52;
    --orange: #F2994A;
    --orange-dark: #D97C2B;
    --navy: #274472;
    --cream: #FFF7EC;
    --sky: #EAF6FB;
    --text: #2B2B2B;
    --text-light: #6B6B6B;
    --border: #E4DED1;
    --error-bg: #FDEAEA;
    --error-text: #A02B2B;
    --success-bg: #EAF7EE;
    --success-text: #1F7A3C;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(31, 95, 82, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    color: var(--text);
    background: #FFFFFF;
    line-height: 1.55;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

a { color: var(--teal-dark); }

h1, h2, h3 { line-height: 1.2; margin-top: 0; }

/* ---------- Header ---------- */
.site-header {
    border-bottom: 1px solid var(--border);
    background: #FFFFFF;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--teal-dark);
    text-decoration: none;
}

.logo span { color: var(--orange); }

.main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lang-switcher select,
.currency-switcher select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 2px solid var(--border);
    border-radius: 999px;
    padding: 9px 30px 9px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    min-height: 44px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B6B6B'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%236B6B6B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.lang-switcher select:focus,
.currency-switcher select:focus {
    outline: none;
    border-color: var(--teal);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.05s ease-in-out, opacity 0.15s ease-in-out;
}

.btn--small {
    min-height: 34px;
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
    background: var(--orange);
    color: #FFFFFF;
}
.btn--primary:hover { background: var(--orange-dark); }

.btn--ghost {
    background: transparent;
    border-color: var(--teal);
    color: var(--teal-dark);
}
.btn--ghost:hover { background: var(--sky); }

.btn--danger {
    background: transparent;
    border-color: var(--error-text);
    color: var(--error-text);
}
.btn--danger:hover { background: var(--error-bg); }

.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- Alerts / banners ---------- */
.alert {
    margin: 16px 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.95rem;
}
.alert--error   { background: var(--error-bg);   color: var(--error-text); }
.alert--success { background: var(--success-bg); color: var(--success-text); }
.alert--warning { background: #FDF3E7; color: var(--orange-dark); }
.alert--warning form { margin-top: 10px; }

.verify-banner {
    margin: 16px 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: #FFF4E0;
    border: 1px solid #F0D9A8;
    color: #7A5A16;
    font-size: 0.92rem;
}
.verify-banner a { color: var(--teal-dark); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(180deg, var(--cream) 0%, #FFFFFF 100%);
    padding: 48px 0 24px;
}

.hero__text {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
}

.hero__text h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    color: var(--teal-dark);
}

.hero__text p {
    font-size: 1.1rem;
    color: var(--text-light);
}

.hero__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hero__banner {
    width: 100%;
    max-width: 1250px; /* ~150px wider than the .container-constrained width, image scales proportionally */
    margin: 0 auto;
    padding: 0 24px;
    display: block;
}

.hero__banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

/* ---------- Sections ---------- */
.section {
    padding: 56px 0;
}

.section--alt {
    background: var(--sky);
}

.section h2 {
    text-align: center;
    font-size: 1.8rem;
    color: var(--teal-dark);
    margin-bottom: 8px;
}

.section__lead {
    text-align: center;
    color: var(--text-light);
    max-width: 620px;
    margin: 0 auto 36px;
}

/* "Who it's for" grid */
.uses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
}

.use-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 12px;
    text-align: center;
    box-shadow: var(--shadow);
    /* .use-card is an <a> (each tile links to its discover/*.php page) —
       reset link styling and add a hover/focus lift so it still reads as
       clickable rather than as plain body text. */
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.use-card:hover,
.use-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 10px 24px rgba(31, 95, 82, 0.14);
}

.use-card__icon { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.use-card__label { font-weight: 600; }

/* ---------- Discover pages (discover/*.php — the homepage tiles' "en savoir
   plus" pages, rendered by render_discover_page() in includes/functions.php) ---------- */
.discover-breadcrumb {
    text-align: center;
    margin: 0 0 12px;
}

.discover-breadcrumb a {
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
}

.discover-breadcrumb a:hover { color: var(--teal-dark); }

.discover-hero__image {
    width: 176px;
    height: 176px;
    margin: 8px auto 0;
    display: block;
}

.discover-hero__image img {
    width: 100%;
    height: 100%;
    display: block;
}

.discover-body { margin-bottom: 8px; }

/* Homepage shop teaser ("order your printed 1qr2 tags") — icon stacked
   above a centered text block, same centered layout as the CTA section
   right below it (.hero__text / .hero__actions). */
.shop-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.shop-teaser__icon {
    font-size: 4rem;
    flex-shrink: 0;
}

.shop-teaser__text {
    max-width: 640px;
}

.shop-teaser__text h2 {
    text-align: center;
    margin-bottom: 8px;
}

.shop-teaser__text p {
    color: var(--text-light);
    margin-bottom: 0;
}

.shop-teaser .hero__actions {
    justify-content: center;
}

/* "How it works" steps */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.step {
    text-align: center;
    padding: 0 12px;
}

.step__number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal);
    color: #FFFFFF;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

/* ---------- Forms (login / register / etc.) ---------- */
.auth-wrap {
    max-width: 440px;
    margin: 48px auto;
    padding: 0 24px;
}

.auth-wrap--wide {
    max-width: 760px;
}

/* Response-page editor (auth/qr-response-editor.php) — needs extra room for
   the Quill toolbar/editor, so 300px wider than .auth-wrap--wide. */
.auth-wrap--response-editor {
    max-width: 1060px;
}

/* Step 2/3 of registration (address & contact details) — ~250px wider
   than the default .auth-wrap so the two-column fields have more room. */
.auth-wrap--address {
    max-width: 690px;
}

.auth-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}

.auth-card h1 {
    font-size: 1.5rem;
    color: var(--teal-dark);
    margin-bottom: 4px;
}

.auth-card__subtitle {
    color: var(--text-light);
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

/* Light gap between stacked action buttons/forms (e.g. reactivate-account.php's
   "Restaurer mon compte" / "Annuler et revenir à la connexion" pair). */
.auth-card form + form {
    margin-top: 12px;
}

/* Long-form legal text (terms.php / privacy.php), rendered via
   render_legal_text() in includes/functions.php. */
.legal-page h2 {
    font-size: 1.15rem;
    color: var(--teal-dark);
    margin-top: 28px;
    margin-bottom: 8px;
}

.legal-page p {
    margin: 0 0 12px;
}

.legal-page ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal-page li {
    margin-bottom: 6px;
}

.wizard-steps {
    color: var(--orange-dark);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}

.field {
    margin-bottom: 18px;
}

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

@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; }
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 1rem;
    font-family: inherit;
    background: #FFFFFF;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(46, 139, 122, 0.15);
}

.field small { color: var(--text-light); }

.field-hint-block {
    margin: -8px 0 18px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--teal);
    flex-shrink: 0;
}

.checkbox-field a { color: var(--teal-dark); font-weight: 600; }

.qr-response-page-note {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.qr-response-page-note a { font-weight: 600; }

.qr-response-page-note--downgraded {
    color: var(--orange-dark);
    font-weight: 600;
}

.auth-links {
    margin-top: 18px;
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Subscription cards ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 20px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.plan-card:hover {
    border-color: var(--teal);
}

.plan-card--selected {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(46, 139, 122, 0.15);
}

/* Direct child only (the Free tile's own radio) — a descendant selector
   here would also catch the .plan-billing-option radios nested inside
   Basique/Premium tiles and stack them all on top of each other. */
.plan-card > input[type="radio"] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 18px;
    height: 18px;
    accent-color: var(--teal);
}

.plan-card__badge {
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--orange);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.plan-card__name {
    font-weight: 700;
    color: var(--teal-dark);
    font-size: 1.05rem;
    padding-right: 24px;
}

.plan-card__price {
    font-size: 1.6rem;
    font-weight: 800;
}

.plan-card__price small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
}

.plan-card__desc {
    color: var(--text-light);
    font-size: 0.88rem;
}

.plan-card--billing {
    cursor: default;
}

.plan-card__badge--premium {
    background: var(--navy);
}

.plan-card__features {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-light);
    font-size: 0.88rem;
}

.plan-card__features li::before {
    content: "✓ ";
    color: var(--teal);
    font-weight: 700;
}

.plan-card__billing-label {
    margin: 4px 0 2px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plan-card__billing-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.plan-billing-option {
    position: relative;
    display: flex;
    align-items: center;
    /* No justify-content:space-between here on purpose — the price's own
       margin-left:auto (below) is what pushes it to the line's end. That
       lets radio+name pack together on one line while price wraps to its
       own line when the card is too narrow, instead of both being forced
       onto the same line and overflowing. */
    flex-wrap: wrap;
    row-gap: 2px;
    gap: 4px 8px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.plan-billing-option:hover {
    border-color: var(--teal);
}

.plan-billing-option.is-selected {
    border-color: var(--teal);
    background: rgba(46, 139, 122, 0.08);
}

.plan-billing-option input[type="radio"] {
    accent-color: var(--teal);
}

.plan-billing-option__name {
    /* Deliberately NOT flex:1 / min-width:0 — a flex-basis:0% item is
       treated as ~0-width during line-wrapping, which tricks the browser
       into never wrapping the price even when there's no real room,
       shrinking this box below its text and causing overlap instead. */
    font-weight: 600;
}

.plan-billing-option__price {
    font-weight: 700;
    white-space: nowrap;
    /* When there isn't enough room next to the name, this wraps down to
       its own row (see flex-wrap on .plan-billing-option) instead of
       overflowing past the card's edge. margin-left:auto keeps it
       right-aligned whichever row it ends up on. */
    margin-left: auto;
}

.plan-billing-option__price small {
    font-weight: 500;
    color: var(--text-light);
}

.plan-billing-option__badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--orange);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.plan-currency-note {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: -8px;
}

/* ---------- Required-field markers ---------- */
.required-asterisk {
    color: #C0392B;
    font-weight: 700;
}

.required-note {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 10px;
}


/* ---------- Ad placeholder slot ---------- */
.ad-slot {
    margin: 14px 0;
    padding: 14px 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
}

.ad-slot__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

/* ---------- QR-code mutation quota ---------- */
.qr-mutation-note {
    background: var(--sky);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.qr-mutation-note--free {
    background: var(--success-bg);
    color: var(--success-text);
}

.qr-mutation-note--bonus {
    background: #FFF3E0;
    color: var(--orange-dark);
}

.qr-mutation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.qr-mutation-buy-form {
    margin: 0;
}

/* ---------- Profile page ---------- */
.profile-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.profile-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.profile-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.profile-section__header h2 {
    font-size: 1.05rem;
    color: var(--teal-dark);
    margin: 0;
}

.profile-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.profile-list dt {
    font-size: 0.78rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.profile-list dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.profile-empty {
    font-weight: 400;
    color: var(--text-light);
    font-style: italic;
}

.tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.tag--verified { background: var(--success-bg); color: var(--success-text); }
.tag--pending  { background: #FFF4E0; color: #7A5A16; }

/* ---------- My QR codes ---------- */
.qr-empty {
    color: var(--text-light);
    margin-bottom: 24px;
}

.qr-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qr-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.qr-item__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.qr-item__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.qr-item__thumb img,
.qr-item__thumb canvas,
.qr-render img,
.qr-render canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-item__info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.qr-item__label {
    font-weight: 700;
}

.qr-item__meta {
    color: var(--text-light);
    font-size: 0.85rem;
}

.qr-item__delete,
.qr-item__actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

.qr-add {
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.qr-add h2 {
    font-size: 1.05rem;
    color: var(--teal-dark);
    margin-bottom: 14px;
}

.qr-add__hint {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .qr-item { flex-wrap: wrap; }
    .qr-item__delete,
    .qr-item__actions { width: 100%; }
    .qr-item__delete .btn,
    .qr-item__actions .btn,
    .qr-item__actions form { flex: 1; }
    .qr-item__actions form .btn { width: 100%; }
}

/* ---------- QR code management page (auth/qr-code-view.php) ---------- */
.qr-view__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 4px;
}

.qr-view__header h1 {
    margin: 0;
}

.qr-view__response-page-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Strong call-to-action variant, used only while no response page exists
   yet (see auth/qr-code-view.php) — meant to stand out and draw the eye
   toward the feature, unlike the plain .btn--ghost used once it's set up. */
.qr-view__response-page-btn--cta {
    background: var(--error-text);
    border-color: var(--error-text);
    color: #FFFFFF;
}
.qr-view__response-page-btn--cta:hover {
    background: #7E2222;
    border-color: #7E2222;
}

.qr-view {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 32px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .qr-view { grid-template-columns: 1fr; }
}

.qr-view__image {
    text-align: center;
}

.qr-render {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.qr-view__code {
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 14px 0 2px;
}

.qr-view__url {
    color: var(--text-light);
    font-size: 0.78rem;
    word-break: break-all;
    margin: 0 0 16px;
}

.qr-view__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qr-view__form h2 {
    font-size: 1.05rem;
    color: var(--teal-dark);
    margin: 0 0 14px;
}

/* ---------- Response-page editor (auth/qr-response-editor.php) ---------- */
#response-editor {
    margin-bottom: 16px;
}

#response-editor .ql-toolbar.ql-snow {
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    background: var(--sky);
}

#response-editor .ql-container.ql-snow {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-size: 1rem;
    font-family: inherit;
    min-height: 260px;
}

#response-editor .ql-editor {
    min-height: 260px;
}

#response-editor .ql-editor img {
    max-width: 100%;
    border-radius: 6px;
    cursor: pointer;
}

#response-editor .ql-editor img.qr-img-selected {
    outline: 2px solid var(--teal-dark);
    outline-offset: 1px;
}

/* Appended to <body> and positioned absolutely (document coordinates) in
   JS, glued to the selected image's bottom-right corner — dragging it
   changes the image's width attribute. */
.qr-img-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--teal-dark);
    border: 2px solid #FFFFFF;
    border-radius: 3px;
    cursor: nwse-resize;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.response-editor-locked {
    text-align: center;
    padding: 36px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--sky);
}

.response-editor-locked__icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.response-editor-locked h2 {
    color: var(--teal-dark);
    margin: 0 0 8px;
}

.response-editor-locked p {
    color: var(--text-light);
    margin: 0 0 20px;
}

.response-editor-locked__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.qr-view__form textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 1rem;
    font-family: inherit;
    background: #FFFFFF;
    resize: vertical;
}

.qr-view__form textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(46, 139, 122, 0.15);
}

.qr-view__form textarea:disabled {
    background: var(--sky);
    color: var(--text-light);
    resize: none;
}

.qr-visibility {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 20px;
}

.qr-visibility legend {
    font-weight: 700;
    color: var(--teal-dark);
    padding: 0 6px;
}

.qr-visibility__hint {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.qr-visibility__option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    margin-bottom: 10px;
    cursor: pointer;
}

.qr-visibility__option:last-child { margin-bottom: 0; }

.qr-visibility__option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--teal);
    flex-shrink: 0;
}

.qr-view__delete {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ---------- Public "item found" page (found.php) ---------- */
.found-card {
    text-align: center;
}

.found-icon {
    font-size: 2.6rem;
    margin-bottom: 10px;
}

.found-message {
    background: var(--sky);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    text-align: left;
}

.found-message p { margin: 0; }

.found-message__rich {
    overflow-wrap: anywhere;
    text-align: left;
}

.found-message__rich > *:first-child { margin-top: 0; }
.found-message__rich > *:last-child { margin-bottom: 0; }

.found-message__rich img {
    max-width: 100%;
    border-radius: 6px;
    margin: 6px 0;
}

.found-message__rich blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 3px solid var(--teal);
    color: var(--text-light);
}

.found-contact {
    text-align: left;
    display: grid;
    gap: 16px;
    margin: 0;
}

.found-contact dt {
    font-size: 0.78rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.found-contact dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.found-contact a { color: var(--teal-dark); }

.found-add-contact {
    margin: 20px 0 0;
}

.found-no-info {
    color: var(--text-light);
    font-style: italic;
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 40px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-nav a {
    margin-left: 16px;
    text-decoration: none;
    color: var(--text-light);
}
.footer-nav a:hover { color: var(--teal-dark); }

/* =============================================
   Shop (auth/shop*.php)
   ============================================= */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.shop-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.shop-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.shop-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--sky);
}

.shop-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
}

.shop-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.shop-card__name {
    font-weight: 700;
    color: var(--teal-dark);
}

.shop-card__price {
    font-weight: 800;
    font-size: 1.1rem;
}

/* Added in V01.04 for the public catalog (catalog.php), which shows each
   product's description alongside its name/price -- auth/shop.php's
   grid doesn't display it, so this rule didn't exist yet. */
.shop-card__description {
    color: var(--text-light);
    font-size: 0.92rem;
}

.shop-card .btn {
    margin-top: auto;
}

.shop-empty {
    color: var(--text-light);
    padding: 20px 0;
}

.shop-product {
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 32px;
}

.shop-product__image {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.shop-product__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--sky);
}

.shop-product__gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-product__thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shop-product__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.shop-product__thumb:hover {
    border-color: var(--teal);
}

.shop-product__price {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 4px 0 10px;
}

.shop-product__price small {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
    display: block;
}

.shop-product__description {
    color: var(--text-light);
    margin-bottom: 18px;
    white-space: pre-line;
}

.shop-unavailable {
    background: var(--sky);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    color: var(--text-light);
}

.shop-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.shop-cart-table th,
.shop-cart-table td {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.shop-cart-table th {
    color: var(--text-light);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.shop-cart-table img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.shop-cart-table input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font: inherit;
}

.admin-inline-sort-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-inline-sort-form input[type="number"] {
    width: 56px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font: inherit;
}

.shop-cart-personalization {
    display: block;
    color: var(--text-light);
    margin-top: 2px;
}

.char-counter {
    display: block;
    text-align: right;
    color: var(--text-light);
    margin-top: 2px;
}

.shop-cart-summary {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: baseline;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 18px;
}

.shop-cart-summary small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-light);
}

.shop-cart-summary--sub {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 6px;
}

.shop-tracking-option {
    background: var(--sky);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
}

.shop-address-summary {
    background: var(--sky);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.shop-address-summary a { font-weight: 600; }

.about-creator {
    background: var(--sky);
    border-radius: var(--radius);
    padding: 16px 18px;
    line-height: 1.5;
}

.shop-customs-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-text);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
}

.shop-customs-warning__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.shop-customs-warning p { margin: 0; }

.shop-customs-warning strong {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.shop-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.shop-orders-table th,
.shop-orders-table td {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
}

.shop-orders-table th {
    color: var(--text-light);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.shop-orders-table__details-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
}

.order-retry-form {
    margin-top: 8px;
}

/* =============================================
   Responsive — tablet and mobile
   ============================================= */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
    .plan-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .auth-wrap--wide { max-width: 640px; }
    .auth-wrap--response-editor { max-width: 640px; }
    .auth-wrap--address { max-width: 600px; }
    .shop-product { grid-template-columns: 1fr; }
    .shop-product__image { max-width: 320px; }
}

/* Small tablet / large mobile (≤ 768px) */
@media (max-width: 768px) {
    .section { padding: 40px 0; }
    .hero { padding: 32px 0 16px; }
    .section h2 { font-size: 1.5rem; }
    .plan-grid { grid-template-columns: 1fr; }
    .steps { gap: 28px; }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
    .site-header__inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .main-nav { justify-content: center; }
    .footer-nav a:first-child { margin-left: 0; }
    .site-footer__inner { text-align: center; justify-content: center; }
    .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }

    /* "Mes commandes": the 4-column table doesn't fit a portrait phone
       screen — stack each row into a labelled card instead of letting the
       table overflow / force horizontal scrolling. */
    .shop-orders-table,
    .shop-orders-table thead,
    .shop-orders-table tbody,
    .shop-orders-table th,
    .shop-orders-table td,
    .shop-orders-table tr {
        display: block;
        width: 100%;
    }

    .shop-orders-table thead {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
    }

    .shop-orders-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 14px;
        padding: 4px 12px;
    }

    .shop-orders-table td {
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
    }

    .shop-orders-table tr td:last-child {
        border-bottom: none;
    }

    .shop-orders-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--text-light);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
    }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .site-header__inner { padding: 14px 16px; }
    .logo { font-size: 1.3rem; }
    .auth-wrap,
    .auth-wrap--wide,
    .auth-wrap--response-editor,
    .auth-wrap--address { padding: 0 16px; margin: 24px auto; }
    .auth-card { padding: 22px 18px; }
    .btn { padding: 10px 16px; font-size: 0.9rem; }
    .plan-card { padding: 18px 16px; }
    .use-card { padding: 18px 10px; }
    .profile-list { grid-template-columns: 1fr; }
}

/* =============================================
   Visual personalization studio (auth/shop-design.php,
   assets/js/design-studio.js) — see
   sql/migration_20_product_design_studio.sql,
   sql/migration_21_product_design_refinements.sql
   ============================================= */

.design-studio {
    margin: 20px 0;
}

.design-studio__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.design-studio__tab {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
}

.design-studio__tab--active {
    background: var(--teal);
    border-color: var(--teal);
    color: #FFFFFF;
}

/* Canvas on top, toolbar + properties panel below — full width throughout,
   so the template photo gets as much room as possible (was a 2-column
   grid with the panel squeezed to the side). */
.design-studio__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.design-studio__canvas-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--sky);
    padding: 12px;
}

.design-studio__side {
    width: 100%;
}

.design-studio__canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: var(--shadow);
    touch-action: none;
    user-select: none;
}

.design-studio__element {
    cursor: move;
}

.design-studio__selection-box {
    fill: none;
    stroke: var(--orange);
    stroke-width: 0.6;
    stroke-dasharray: 2 1.5;
    pointer-events: none;
}

.design-studio__handle {
    fill: var(--orange);
    stroke: #FFFFFF;
    stroke-width: 1;
}

.design-studio__handle--resize {
    cursor: nwse-resize;
}

.design-studio__handle--rotate {
    cursor: grab;
}

.design-studio__handle-stem {
    stroke: var(--orange);
    stroke-width: 0.4;
}

.design-studio__panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    background: #FFFFFF;
}

.design-studio__toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.design-studio__properties {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.design-studio__properties textarea {
    width: 100%;
    resize: vertical;
}

.design-studio__properties select,
.design-studio__properties input[type="color"] {
    width: 100%;
}


/* ---------- Bannieres publicitaires (gerees dans /superadmin/ads.php) ----------
   Image responsive : largeur 100 % du conteneur, hauteur automatique,
   proportions conservees. */
.ad-banner-wrap {
    padding-top: 16px;
    padding-bottom: 16px;
}

.ad-banner__label {
    display: block;
    margin-bottom: 4px;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.ad-banner a {
    display: block;
}

.ad-banner .ad-banner__item[hidden] {
    display: none;
}

.ad-banner__item--upload img {
    display: block;
    width: 100%;
    height: auto;
}

/* Code fourni par un reseau (awin.com...) : on ne force pas la taille des images
   (un pixel de suivi 1x1 doit le rester), on evite juste le debordement. */
.ad-banner__item--code {
    text-align: center;
}

.ad-banner__item--code img {
    max-width: 100%;
    height: auto;
}