/* ============================================================
   Ardoise - Interface (landing, comptes, éditeur)
   Pensée smartphone d'abord : cibles tactiles 48px, barre d'onglets
   en bas, feuilles modales qui montent du bas.
   ============================================================ */

:root {
    --ink:      #16122A;
    --muted:    #6E6A85;
    --line:     #E8E6F2;
    --bg:       #F5F5FB;
    --card:     #FFFFFF;
    --brand:    #6C5CE7;
    --brand-2:  #FF5C8A;
    --ok:       #10B981;
    --danger:   #EF4444;
    --radius:   20px;
    --shadow:   0 10px 30px rgba(30, 20, 80, .08);
    --shadow-lg:0 20px 60px rgba(30, 20, 80, .16);
    --tabbar-h: 68px;
    --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
            'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

/* L'attribut hidden doit gagner : sans ça, un `display:flex/grid/block` posé
   plus bas (boutons, images, barres d'action) le neutralise silencieusement. */
[hidden] { display: none !important; }

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; margin: 0; }

img { max-width: 100%; display: block; }

/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    text-align: center;
}
.btn:active { transform: scale(.97); }

.btn-primary {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: 0 8px 24px rgba(108, 92, 231, .35);
}
.btn-soft   { background: rgba(108, 92, 231, .10); color: var(--brand); }
.btn-ghost  { background: transparent; color: var(--muted); }
.btn-line   { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-danger { background: rgba(239, 68, 68, .10); color: var(--danger); }
.btn-block  { display: flex; width: 100%; }
.btn-sm     { min-height: 40px; font-size: 14px; padding: 0 16px; }
.btn:disabled { opacity: .55; pointer-events: none; }

/* ---------- Formulaires ---------- */

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 7px;
    letter-spacing: .01em;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
/* tel et url sont arrivés avec la fiche contact : sans eux, ces deux
   champs-là gardaient l'apparence brute du navigateur au milieu des autres. */
.field input[type=tel],
.field input[type=url],
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 16px;               /* < 16px ferait zoomer iOS au focus */
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, .12);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.honey { position: absolute; left: -9999px; opacity: 0; height: 0; }

.alert {
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 18px;
}
.alert-error { background: #FEF0F0; color: #B91C1C; }
.alert-ok    { background: #ECFDF5; color: #047857; }

/* ============================================================
   Landing
   ============================================================ */

.land {
    min-height: 100dvh;
    background:
        radial-gradient(1000px 500px at 8% -8%,  rgba(108, 92, 231, .35), transparent 60%),
        radial-gradient(800px 500px at 100% 0%,  rgba(255, 92, 138, .28), transparent 55%),
        radial-gradient(700px 500px at 50% 108%, rgba(62, 214, 255, .22), transparent 60%),
        #100C24;
    color: #fff;
    padding: 22px 20px 60px;
}
.land a { color: #fff; }

.land-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto 40px;
}
.land-nav-lien { font-weight: 700; font-size: 15px; opacity: .85; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
}
.brand svg { flex: none; }

.land-hero { max-width: 640px; margin: 0 auto; text-align: center; }
.land-hero h1 {
    font-size: clamp(38px, 11vw, 62px);
    font-weight: 800;
    letter-spacing: -.035em;
    margin-bottom: 18px;
}
.land-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #FFD166, #FF5C8A 45%, #3ED6FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.land-hero p {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    margin: 0 auto 28px;
    max-width: 460px;
}
.land-cta { display: grid; gap: 12px; max-width: 340px; margin: 0 auto 14px; }
/* Un seul bouton dans l'accroche depuis que « J'ai déjà un compte » a été
   retiré : la mise en colonne sur grand écran l'aurait étiré sur 460 px. */
.land-cta .btn-line { background: rgba(255, 255, 255, .10); color: #fff; box-shadow: none; }
/* Les métiers, en tête de l'accroche : un coiffeur ou un gîte doit pouvoir
   se reconnaître avant de faire défiler quoi que ce soit.

   Du texte, pas des pastilles. Encadrées, elles avaient l'air de boutons et
   ne menaient nulle part — la même règle que pour les survols : ce qui
   ressemble à un bouton doit en être un. Elles gardent leur présence par la
   taille et le blanc, et les points colorés donnent le rythme.

   Les séparateurs sont en ::after et non dans le texte : ils suivent donc
   toujours un mot, jamais le début d'une ligne après un retour, et aucun
   lecteur d'écran ne les énonce. */
.land-hero .land-metiers {
    max-width: 620px;
    margin: 0 auto 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
    color: rgba(255, 255, 255, .88);
}

.land-metiers span:not(:last-child)::after {
    content: '·';
    /* Le blanc avant le point vient de cette marge, celui d'après de l'espace
       du HTML : il faut donc les egaliser a la main, sinon le point se colle
       au mot suivant. */
    margin-left: .28em;
    color: rgba(255, 209, 102, .8);
    font-weight: 800;
}

/* Sous 434 pixels, la ligne entière (395 px) ne tient plus et se coupe
   d'elle-même — en laissant un point suspendu en fin de première ligne, qui
   se lit comme une phrase tronquée. On choisit donc la coupure : après
   « Salons », et on supprime son point puisqu'il n'y a plus rien après lui
   sur cette ligne. */
@media (max-width: 434px) {
    .land-metiers span:nth-child(4)::after  { content: none; }
    .land-metiers span:nth-child(5)::before { content: '\A'; white-space: pre; }
}

/* Préfixées par .land-hero : sans ça, « .land-hero p » l'emportait sur ces
   deux classes et leur imposait ses 18 pixels — la mention discrète sous le
   bouton s'affichait aussi gros que l'argumentaire. */
.land-hero .land-note {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .68);
    text-align: center;
    margin-bottom: 0;
}
.land-note { font-size: 13.5px; color: rgba(255, 255, 255, .55); text-align: center; }

.land-steps {
    display: grid;
    gap: 14px;
    max-width: 900px;
    margin: 56px auto 0;
}
.step {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    padding: 22px;
    backdrop-filter: blur(6px);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    font-weight: 800;
    margin-bottom: 12px;
}
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p  { margin: 0; color: rgba(255, 255, 255, .70); font-size: 15px; }

.land-foot {
    text-align: center;
    margin-top: 56px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

@media (min-width: 760px) {
    .land-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Sections de la page de présentation ---------- */

.land-section { max-width: 1000px; margin: 0 auto; padding: 54px 0 0; }
.land-section > h2 {
    font-size: clamp(26px, 7vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    margin-bottom: 10px;
}
.land-section > .lead {
    text-align: center;
    color: rgba(255, 255, 255, .70);
    max-width: 520px;
    margin: 0 auto 26px;
    font-size: 16.5px;
}

/* Une ardoise dans « Mon compte » : la liste, sans les actions — on les
   trouve dans l'ardoise elle-même. */
.compte-ardoise {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 15px;
}
.compte-ardoise span { font-size: 13px; color: var(--muted); margin-left: auto; }

/* ============================================================
   Tourniquet vidéo
   ============================================================
   Trois scènes filmées en portrait, superposées dans un cadre au
   format d'un téléphone : c'est ainsi qu'elles ont été tournées, et
   les recadrer en paysage couperait la moitié de la scène.

   Elles se croisent en fondu plutôt que de glisser : un glissement
   demanderait de gérer le geste de balayage pour rester cohérent,
   là où trois puces suffisent à choisir.
   ============================================================ */

.reel { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.reel-cadre {
    position: relative;
    /* Largeur donnée, pas héritée : le cadre vit dans une grille dont la
       colonne se dimensionne sur son contenu. Un « width: 100% » y tourne
       en rond et s'effondre. Le vw garde la marge sur les petits écrans. */
    width: min(290px, 74vw);
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    overflow: hidden;
    background: #0B0818;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .10),
        0 26px 60px rgba(0, 0, 0, .45);
}

.reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.reel-video.is-on { opacity: 1; }

/* La légende est posée sur l'image : un voile sombre en dégradé la rend
   lisible quelle que soit la scène en dessous. */
.reel-legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 42px 16px 16px;
    background: linear-gradient(to top, rgba(8, 6, 20, .88), transparent);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.reel-puces { display: flex; gap: 9px; }

/* Des puces, pas des points décoratifs : elles se cliquent pour revenir
   sur une scène manquée. Le libellé reste là pour les lecteurs d'écran. */
.reel-puce {
    width: 26px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
    transition: background .2s ease, width .3s ease;
}
.reel-puce.is-on { background: #fff; width: 40px; }
.reel-puce span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
    .reel-puce:hover { background: rgba(255, 255, 255, .55); }
    .reel-puce.is-on:hover { background: #fff; }
}

/* Un peu plus grand dès qu'il y a la place, sans jamais dépasser la
   taille d'un vrai téléphone : au-delà, l'illusion tombe. */
@media (min-width: 720px) {
    .reel-cadre { width: 320px; }
}

/* Aperçu sous l'accroche : la scène filmée et l'affiche à imprimer.
   Le téléphone dessiné en CSS qui vivait ici a été retiré avec les vidéos :
   deux téléphones côte à côte se seraient volé l'attention, et celui-ci
   affirmait ce que les autres montrent. */
.showcase {
    display: grid;
    gap: 30px;
    justify-items: center;
    align-items: center;
    margin-top: 32px;
}

/* QR code décoratif à côté du téléphone */
.showcase-qr {
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    text-align: center;
    color: #16122A;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    max-width: 220px;
}
.showcase-qr img { width: 150px; margin: 0 auto 10px; }
.showcase-qr b { display: block; font-size: 14px; }
.showcase-qr span { font-size: 12px; color: #6E6A85; }

@media (min-width: 780px) {
    .showcase { grid-auto-flow: column; justify-content: center; gap: 54px; }
}

/* Pour qui */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto;
}
.badges span {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14.5px;
    font-weight: 600;
}

/* Fonctionnalités */
.features { display: grid; gap: 13px; }
.feature {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    padding: 20px;
}
.feature .ico { font-size: 26px; margin-bottom: 8px; }
.feature h3 { font-size: 17px; margin-bottom: 5px; }
.feature p  { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .68); }

@media (min-width: 720px) {
    .features { grid-template-columns: repeat(3, 1fr); }
}

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; opacity: .6; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; color: rgba(255, 255, 255, .72); font-size: 15px; }

/* Appel à l'action final */
.cta-final {
    max-width: 720px;
    margin: 60px auto 0;
    text-align: center;
    background: linear-gradient(120deg, rgba(108, 92, 231, .35), rgba(255, 92, 138, .30));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    padding: 38px 24px;
}
.cta-final h2 { font-size: clamp(24px, 6.5vw, 32px); font-weight: 800; margin-bottom: 10px; }
.cta-final p  { color: rgba(255, 255, 255, .75); margin: 0 auto 22px; max-width: 400px; }

.land-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 10px;
    font-size: 13.5px;
}
.land-links a { opacity: .6; }

/* ============================================================
   Écrans compte (login / signup)
   ============================================================ */

/* Ces écrans se posaient sur le fond clair de l'appli, sans navigation : on
   arrivait depuis la vitrine et on changeait de monde sans prévenir, sans rien
   pour revenir. Ils reprennent donc son décor et sa barre du haut — où la
   marque ramène à l'accueil — et la carte blanche ressort dessus. */
.land-auth {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
    /* Le bandeau Delisou vient juste après, en pied : on lui rend sa
       hauteur, sinon la page dépasse d'une quarantaine de pixels et se
       met à défiler pour rien. */
    min-height: calc(100dvh - 48px);
}
.land-auth .land-nav { width: 100%; margin-bottom: 18px; }

.auth-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0 0 24px;
    max-width: 460px;
    margin: 0 auto;
}
.auth-card {
    background: var(--card);
    border-radius: 26px;
    padding: 26px 22px;
    box-shadow: var(--shadow);
}
/* La carte est un îlot clair posé sur le décor sombre : elle doit reprendre
   les couleurs de l'appli. Sans ça, le blanc de .land se transmettrait au
   titre et à tous les liens — invisibles sur fond blanc. */
.land-auth .auth-card   { color: var(--ink); }
.land-auth .auth-card a:not(.btn) { color: var(--brand); }   /* .btn garde la sienne */

.auth-card h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.auth-alt { text-align: center; margin-top: 20px; font-size: 15px; color: var(--muted); }
.auth-alt a { font-weight: 700; }

/* ============================================================
   Éditeur
   ============================================================ */

.app-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(245, 245, 251, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.app-top .brand { color: var(--ink); font-size: 17px; }
.app-top .icon-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 12px;
    background: rgba(22, 18, 42, .06);
    color: var(--ink);
    cursor: pointer;
}

.app-main {
    max-width: 620px;
    margin: 0 auto;
    padding: 18px 16px calc(var(--tabbar-h) + 96px);
}

.panel { display: none; }
.panel.is-active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 26px 0 12px;
}
.section-title:first-child { margin-top: 4px; }

.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}

/* Aperçu miniature de l'en-tête de la page publique */
.mini-preview {
    border-radius: var(--radius);
    padding: 26px 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.mini-preview .mp-logo {
    width: 62px; height: 62px;
    border-radius: 20px;
    object-fit: cover;
    margin: 0 auto 12px;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.mini-preview h2 { font-size: 24px; font-weight: 800; }
.mini-preview p  { margin: 6px 0 0; opacity: .82; font-size: 14.5px; }

/* Liste des blocs */
.items { display: grid; gap: 12px; }

.item-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--card);
    border-radius: 18px;
    padding: 11px;
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: pointer;               /* toute la ligne ouvre l'édition */
    transition: box-shadow .22s ease, transform .14s ease;
}

/* Le voile de couleur au survol. Un dégradé ne se transitionne pas d'un
   navigateur à l'autre : on fait donc varier l'opacité d'un calque posé
   par-dessus, ce qui s'anime partout de la même façon. */
.item-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(108, 92, 231, .14),
        rgba(255, 92, 138, .13) 55%,
        rgba(62, 214, 255, .11));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* Les enfants repassent au-dessus du voile, sinon il les recouvrirait. */
.item-row > * { position: relative; z-index: 1; }

/* Réservé aux vrais pointeurs : au doigt, le survol resterait collé
   sur le dernier bloc touché. */
@media (hover: hover) and (pointer: fine) {
    .item-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(108, 92, 231, .22);
    }
    .item-row:hover::before  { opacity: 1; }
    .item-row:hover .item-thumb { transform: scale(1.04); }
}
.item-row:active { transform: translateY(0) scale(.995); }
.item-thumb {
    width: 66px; height: 66px;
    flex: none;
    border-radius: 14px;
    object-fit: cover;
    background: linear-gradient(120deg, #EDEBFA, #F7E9F0);
    transition: transform .25s ease;
}
.item-thumb.is-text {
    display: grid;
    place-items: center;
    color: var(--brand);
    font-size: 22px;
}
.item-main { flex: 1; min-width: 0; }
.item-main strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-main span {
    display: block;
    font-size: 13.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-price { font-weight: 800; color: var(--brand); font-size: 14px; }
.item-actions { display: grid; grid-template-columns: 34px; gap: 4px; }
.item-actions button {
    width: 34px; height: 30px;
    border: 0;
    border-radius: 9px;
    background: rgba(22, 18, 42, .05);
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.item-actions button:hover:not(:disabled) { background: rgba(108, 92, 231, .14); color: var(--brand); }
.item-actions button:disabled { opacity: .3; cursor: default; }

.empty {
    text-align: center;
    padding: 40px 22px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.empty .emoji { font-size: 42px; margin-bottom: 10px; }
.empty h3 { font-size: 19px; margin-bottom: 6px; }
.empty p  { color: var(--muted); margin: 0 0 18px; font-size: 15px; }

/* Boutons d'ajout flottants */
.add-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    display: flex;
    gap: 10px;
    width: min(560px, calc(100% - 32px));
}
.add-bar .btn { flex: 1; box-shadow: var(--shadow-lg); }
.add-bar .btn-line { background: #fff; }

/* Thèmes */
.themes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.theme-dot {
    aspect-ratio: 1;
    border-radius: 16px;
    border: 3px solid transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
    overflow: hidden;
}
.theme-dot span {
    position: absolute;
    right: 7px; bottom: 7px;
    width: 16px; height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.theme-dot.is-active { border-color: var(--ink); }

.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.color-row:first-of-type { border-top: 0; }
.color-row label { font-weight: 600; font-size: 15px; }
.color-row input[type=color] {
    width: 54px; height: 40px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: none;
    padding: 3px;
    cursor: pointer;
}

/* Logo */
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-prev {
    width: 68px; height: 68px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(108, 92, 231, .10);
    display: grid;
    place-items: center;
    font-size: 24px;
    flex: none;
}

/* Interrupteur */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.switch-row .lab strong { display: block; font-size: 15.5px; }
.switch-row .lab span   { font-size: 13px; color: var(--muted); }
.switch {
    position: relative;
    width: 56px; height: 32px;
    flex: none;
}
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #D8D6E6;
    transition: background .2s ease;
    pointer-events: none;
}
.switch i::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .2s ease;
}
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(24px); }

/* Barre d'enregistrement */
.save-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    width: min(560px, calc(100% - 32px));
}
.save-bar .btn { box-shadow: var(--shadow-lg); }

/* Onglet QR */
.qr-card {
    background: var(--card);
    border-radius: 26px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}
.qr-card img {
    width: min(260px, 68vw);
    margin: 0 auto 16px;
    border-radius: 16px;
}
.qr-actions { display: grid; gap: 10px; }

.stat-row { display: flex; gap: 12px; }
.stat {
    flex: 1;
    background: var(--card);
    border-radius: 18px;
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- Barre d'onglets ---------- */

.tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}
.tabbar button {
    flex: 1;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    padding: 0;
}
.tabbar button.is-active { color: var(--brand); }
.tabbar svg { width: 23px; height: 23px; }

/* ---------- Feuille modale ---------- */

.sheet-back {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(16, 12, 36, .5);
    backdrop-filter: blur(3px);
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.sheet-back.is-open { display: flex; }

.sheet {
    background: var(--card);
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 26px 26px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: up .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes up { from { transform: translateY(30px); opacity: .6; } }

.sheet-grip {
    width: 42px; height: 5px;
    border-radius: 999px;
    background: var(--line);
    margin: 4px auto 14px;
}
.sheet h2 { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.sheet-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 16px;
    background: #EFEDF8;
}
.sheet-actions { display: grid; gap: 10px; margin-top: 6px; }

@media (min-width: 620px) {
    .sheet-back { align-items: center; }
    .sheet { border-radius: 26px; max-height: 88dvh; }
}

/* ---------- Toast & chargement ---------- */

.toast {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    z-index: 90;
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    max-width: calc(100% - 32px);
    text-align: center;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-err { background: var(--danger); }

.busy {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    background: rgba(245, 245, 251, .72);
    backdrop-filter: blur(2px);
}
.busy.is-on { display: grid; }
.busy .ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(108, 92, 231, .2);
    border-top-color: var(--brand);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Bandeau Delisou
   Tout en bas de chaque écran d'Ardoise : fond blanc obligatoire, le
   logo est noir et doit rester lisible sur le fond sombre de la vitrine
   comme sur le gris clair de l'éditeur.

   Il occupait le haut, avant la marque du produit. Une réclame n'a pas
   à être la première chose qu'on lit sur une page qui vend autre chose ;
   en pied de page elle reste vue, et le filet orange la sépare alors du
   contenu par le haut.
   ============================================================ */

.delisou-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 3px solid #F7941D;
    text-align: center;
}
/* Dans l'éditeur, une barre d'onglets est fixée au bas de la fenêtre : le
   bandeau, placé en fin de document, passerait dessous et ne se verrait
   jamais. On lui réserve la hauteur de cette barre. */
.tabbar ~ .delisou-bar {
    margin-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.delisou-bar-say {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}
.delisou-bar a { display: inline-flex; align-items: center; }
.delisou-logo  { width: auto; flex: none; }

/* ============================================================
   Mes ardoises — l'écran d'accueil
   ============================================================
   Une liste de cartes, une par ardoise. Chacune montre d'abord ce
   qui la distingue des autres : son QR code, qui est un dessin
   unique, avant même son nom. On reconnaît son affiche avant de
   lire son titre.
   ============================================================ */

.liste-main { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

.liste-tete { margin-bottom: 18px; }
.liste-tete h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.liste-tete p  { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.liste-neuves  { color: var(--brand); }

.cartes { display: grid; gap: 12px; }

.carte { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); }

.carte-lien {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    color: inherit;
    position: relative;
}

/* La vignette prend la couleur de fond choisie pour l'ardoise : deux
   formulaires côte à côte ne se confondent alors plus. */
.carte-vignette {
    flex: none;
    width: 62px; height: 62px;
    border-radius: 16px;
    background: var(--bg, #6C5CE7);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.carte-vignette img {
    width: 54px; height: 54px;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
}

.carte-corps { display: grid; gap: 2px; min-width: 0; }
.carte-type {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--muted);
    text-transform: uppercase;
}
.carte-nom {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    /* Un nom trop long ne doit pas pousser la pastille hors de la carte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carte-infos { font-size: 13px; color: var(--muted); }

.carte-pastille {
    flex: none;
    margin-left: auto;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.carte-etat {
    flex: none;
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    background: rgba(110, 106, 133, .12);
    padding: 5px 10px;
    border-radius: 999px;
}

/* Le bouton d'ajout ressemble à une carte, mais en pointillé : il occupe
   la place d'une ardoise sans prétendre en être une. */
.carte-ajout {
    width: 100%;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border: 2px dashed var(--line);
    border-radius: 20px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.carte-ajout-plus {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: rgba(108, 92, 231, .12);
    color: var(--brand);
    font-size: 24px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.carte-ajout b    { display: block; font-size: 15.5px; }
.carte-ajout span span { font-size: 13px; color: var(--muted); }

.liste-plein {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(110, 106, 133, .08);
    font-size: 14px;
    color: var(--muted);
}

/* Le choix du type, dans la modale de création. */
.choix-types { display: grid; gap: 10px; margin-top: 4px; }
.type-carte {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    padding: 14px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: #fff;
    text-align: left;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}
.type-icone { font-size: 26px; line-height: 1.1; flex: none; }
.type-carte b { display: block; font-size: 16px; margin-bottom: 2px; }
.type-carte span span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ============================================================
   L'éditeur : en-tête, messages, panneaux communs
   ============================================================ */

.app-titre { display: grid; gap: 1px; min-width: 0; flex: 1; }
.app-titre-type {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.app-titre b {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-top-act { display: flex; gap: 8px; align-items: center; flex: none; }

/* Le mot qui suit un enregistrement. Il vient du serveur après une
   redirection, donc il ne peut pas disparaître tout seul comme un toast :
   il reste, et la prochaine navigation l'emporte. */
.app-flash {
    margin: 10px 16px 0;
    padding: 11px 14px;
    border-radius: 14px;
    background: #ECFDF5;
    color: #047857;
    font-size: 14.5px;
    font-weight: 700;
}
.app-flash.is-err { background: #FEF2F2; color: #B91C1C; }

.panel-intro {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
}

.compteur {
    float: right;
    font-weight: 700;
    color: var(--muted);
    font-size: 12.5px;
}

/* Deux champs sur une ligne quand ils vont ensemble (prénom/nom). */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.duo-cp { grid-template-columns: 100px 1fr; }

.select-ard {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 14px;
    font: inherit;
    font-size: 16px;
    background: #fff;
    color: var(--ink);
}

/* Le bloc de suppression, séparé du reste par un filet : on ne tombe pas
   dessus par hasard en enregistrant son nom. */
.zone-danger {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.zone-danger p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* ============================================================
   Le constructeur de questions
   ============================================================ */

.questions { display: grid; gap: 8px; }

.q-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.q-row.is-edit { outline: 2px solid var(--brand); }

.q-icone { font-size: 19px; flex: none; }
.q-corps { display: grid; gap: 1px; min-width: 0; flex: 1; }
.q-corps b {
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.q-corps span { font-size: 12.5px; color: var(--muted); }
.q-requis { color: var(--danger); }

.q-act { display: flex; align-items: center; gap: 2px; flex: none; }
.q-mini { display: flex; gap: 2px; margin: 0; }

.q-fleche, .q-suppr, .q-modif {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.q-fleche:disabled { opacity: .25; cursor: default; }
.q-suppr { color: var(--danger); }

/* ============================================================
   Les réponses reçues
   ============================================================ */

.barre-lues {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    background: rgba(108, 92, 231, .10);
    font-size: 14px;
}

.rep {
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px 16px;
    margin-bottom: 10px;
}
/* Une réponse non lue est bordée à gauche : la marque tient sur un coup
   d'œil en faisant défiler, là où une pastille se cherche. */
.rep.is-neuve { border-left: 4px solid var(--brand); }

.rep-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.rep-date { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rep-point {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    margin-left: 6px;
    vertical-align: middle;
}

.rep-corps { margin: 0; display: grid; gap: 9px; }
.rep-corps dt {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}
.rep-corps dd {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.45;
}
.rep-vide { color: var(--muted); }

.rep-note { color: #F7941D; letter-spacing: 1px; }
.rep-note span { color: var(--line); }

.rep-jauge {
    display: inline-block;
    width: 90px; height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}
.rep-jauge i { display: block; height: 100%; background: var(--brand); }

/* La pastille de l'onglet Réponses. */
.tabbar button { position: relative; }
.tab-pastille {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
}

/* ============================================================
   Survol et focus
   ============================================================
   Une règle simple : seul ce qui se clique réagit. Un encadré qui
   s'anime sans être cliquable est un mensonge — l'utilisateur essaie,
   il ne se passe rien. Les cartes « étapes », les badges de métiers et
   les statistiques n'ont donc volontairement aucun effet.

   Tout est enfermé dans (hover: hover) : au doigt, l'état de survol
   resterait collé sur le dernier élément touché après le tap.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    /* --- Boutons --- */
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(108, 92, 231, .45);
        filter: brightness(1.06);
    }
    .btn-line:hover {
        box-shadow: inset 0 0 0 2px rgba(108, 92, 231, .45);
        background: rgba(108, 92, 231, .05);
        color: var(--brand);
    }
    .btn-soft:hover   { background: rgba(108, 92, 231, .18); }
    .btn-ghost:hover  { background: rgba(22, 18, 42, .05); color: var(--ink); }
    .btn-danger:hover { background: rgba(239, 68, 68, .18); }

    .land-cta .btn-line:hover { background: rgba(255, 255, 255, .20); color: #fff; }

    /* --- En-tête de l'éditeur --- */
    .icon-btn:hover { background: rgba(108, 92, 231, .14); color: var(--brand); }
    .brand:hover    { opacity: .82; }

    /* --- Barre d'onglets : l'icône bondit, le libellé prend la couleur --- */
    .tabbar button        { transition: color .18s ease; }
    .tabbar svg           { transition: transform .2s ease; }
    .tabbar button:hover  { color: var(--brand); }
    .tabbar button:hover svg { transform: translateY(-2px) scale(1.08); }

    /* --- Onglet Style --- */
    .theme-dot        { transition: transform .18s ease, box-shadow .18s ease; }
    .theme-dot:hover  { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow); }
    .color-row        { transition: background .18s ease; }
    .color-row:hover  { background: rgba(108, 92, 231, .04); }
    .switch:hover i   { box-shadow: 0 0 0 5px rgba(108, 92, 231, .10); }

    /* --- Page de présentation --- */
    .faq summary          { transition: color .18s ease, background .18s ease; }
    .faq summary:hover    { background: rgba(255, 255, 255, .05); }
    .land-links a         { transition: opacity .18s ease; }
    .land-links a:hover   { opacity: 1; text-decoration: underline; }
    .land-nav a:hover     { opacity: 1; }

    /* --- Bandeau Delisou --- */
    .delisou-bar a               { transition: transform .2s ease, opacity .2s ease; }
    .delisou-bar a:hover         { transform: scale(1.04); opacity: .9; }
}

/* Le clavier a droit au même repère que la souris — et il doit rester
   visible même sur les fonds sombres de la page de présentation. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.theme-dot:focus-visible,
.item-row:focus-visible {
    outline: 3px solid rgba(108, 92, 231, .55);
    outline-offset: 3px;
    border-radius: 12px;
}
.land a:focus-visible,
.land button:focus-visible,
.land summary:focus-visible { outline-color: rgba(255, 255, 255, .8); }

/* Retour tactile : le doigt n'a pas de survol, mais il a l'enfoncement. */
.icon-btn:active,
.tabbar button:active,
.theme-dot:active { transform: scale(.94); }

/* Certains règlent leur système sur « animations réduites » — pour cause de
   vertiges, de migraines, ou simplement pour alléger une vieille machine.
   Ce qui les gêne, c'est le MOUVEMENT, pas la couleur.

   On supprime donc les déplacements et les agrandissements, et on garde les
   fondus de couleur : le survol continue de dire « ceci se clique », sans
   rien faire bouger à l'écran. Couper les deux reviendrait à priver ces
   personnes de l'information en même temps que de l'animation. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    /* Aucun déplacement, où qu'il vienne. */
    *:hover, *:active, *:focus-visible {
        transform: none !important;
    }
}

/* ============================================================
   Onglet Statistiques
   ============================================================
   Des barres en CSS pur : pas de bibliothèque de graphiques pour
   afficher trente valeurs. Les hauteurs sont calculées en PHP et
   posées en pourcentage, la barre la plus haute vaut 100 %.
   ============================================================ */

.peaks { display: flex; gap: 12px; margin: 14px 0; }
.peak {
    flex: 1;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    border-radius: 18px;
    padding: 15px 16px;
    box-shadow: 0 10px 26px rgba(108, 92, 231, .28);
}
.peak span { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
.peak b    { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-transform: capitalize; }

.chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 132px;
    margin-top: 4px;
}
.chart .bar-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
}
.chart .bar {
    background: linear-gradient(180deg, var(--brand), #9C8BFF);
    border-radius: 5px 5px 3px 3px;
    transition: filter .18s ease;
}
.chart em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    margin-top: 5px;
    height: 13px;
    white-space: nowrap;
}

/* La barre record se distingue : c'est l'information qu'on vient chercher. */
.chart .bar-wrap.is-top .bar { background: linear-gradient(180deg, var(--brand-2), #FF8FB0); }
.chart .bar-wrap.is-top em   { color: var(--brand-2); }

/* Les jours ont besoin d'air ; les heures sont serrées mais lisibles. */
.chart-days  { gap: 2px; }
.chart-week  { gap: 8px; height: 148px; }
.chart-hours { gap: 2px; height: 148px; }

.chart-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 8px;
}
.chart-note {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 4px 2px 0;
}

@media (hover: hover) and (pointer: fine) {
    .chart .bar-wrap:hover .bar { filter: brightness(1.15); }
}

/* ============================================================
   Case à cocher des conditions, et page légale
   ============================================================ */

.check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 4px 0 20px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
    cursor: pointer;
}
.check input {
    flex: none;
    width: 22px; height: 22px;     /* cible tactile : plus petit se rate au doigt */
    margin: 1px 0 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.check a { font-weight: 700; text-decoration: underline; }

/* ---------- Page des conditions ---------- */

.legal {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}
.legal .brand { color: var(--ink); margin-bottom: 26px; }
.legal h1 { font-size: clamp(26px, 6vw, 32px); font-weight: 800; margin-bottom: 6px; }
.legal h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 32px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.legal p  { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.legal-date { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
.legal-lead { font-size: 17px; color: var(--ink); }
.legal-list { margin: 0 0 12px; padding-left: 22px; }
.legal-list li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.55; }
.legal-back { margin-top: 34px; font-weight: 700; }

/* ---------- Mon compte ---------- */

.infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.infos dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.infos dd { margin: 0; font-size: 15px; }

/* La zone de suppression se distingue du reste : on ne doit pas y arriver
   par distraction en faisant défiler la page. */
.danger-zone { border: 2px solid rgba(239, 68, 68, .25); }
.danger-list { margin: 0 0 12px; padding-left: 20px; }
.danger-list li { font-size: 14.5px; line-height: 1.5; margin-bottom: 5px; color: var(--muted); }
.danger-list b { color: var(--ink); }
.danger-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--danger);
    padding: 10px 0;
    list-style: none;
}
.danger-details summary::-webkit-details-marker { display: none; }
.danger-details summary::before { content: '⚠️ '; }

/* Confirmation de suppression de compte, sur la vitrine */
.land-adieu {
    max-width: 560px;
    margin: 0 auto 26px;
    padding: 15px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}
.land-adieu b { color: #fff; display: block; margin-bottom: 3px; }

/* ---------- Afficher le mot de passe ---------- */

.mdp-wrap { position: relative; display: block; }

/* Deux icônes se disputent le bord droit d'un champ de mot de passe : la
   nôtre, et celle du gestionnaire de mots de passe (navigateur ou extension),
   qui se place toujours tout à droite et qu'on ne peut ni déplacer ni
   détecter. On lui laisse donc sa place, et l'œil se range juste à côté. */
.mdp-wrap input { padding-right: 88px !important; }

.voir-mdp {
    position: absolute;
    top: 50%;
    right: 42px;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, background .15s ease;
}
.voir-mdp svg { width: 22px; height: 22px; }
.voir-mdp.is-on { color: var(--brand); background: rgba(108, 92, 231, .12); }

/* Un trait de séparation : sans lui, les deux icônes voisines se lisent
   comme un seul groupe de boutons. */
.voir-mdp::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 9px; bottom: 9px;
    width: 1px;
    background: var(--line);
}

@media (hover: hover) and (pointer: fine) {
    .voir-mdp:hover { background: rgba(108, 92, 231, .10); color: var(--brand); }
}

/* ============================================================
   Bandeau Delisou, tout en bas de la vitrine
   ============================================================
   Dernier bloc de la page, après les liens du pied. Celui du haut
   annonce « c'est offert par Delisou » ; celui-ci dit ce que Delisou
   vend, une fois que le visiteur a tout lu.

   Il reprend la forme de .cta-final — même largeur, même arrondi,
   même verre dépoli — mais en orange Delisou au lieu du violet
   Ardoise : c'est la même page, ce n'est pas la même maison.
   ============================================================ */

.delisou-banner {
    max-width: 720px;
    margin: 56px auto 0;
    padding: 34px 26px 32px;
    text-align: center;
    border-radius: 28px;
    /* Deux teintes à 20 % d'opacité sur un fond presque noir donnaient un
       marron terne — la couleur qu'on obtient toujours en diluant de l'orange
       et du magenta sur du sombre. Ici les couleurs de Delisou sont posées
       franchement, chacune dans son coin, sur une base violet-nuit : le bloc
       redevient une enseigne au lieu d'un encadré. La base reste sombre pour
       que le texte blanc et le bouton orange tiennent. */
    background:
        radial-gradient(115% 90% at 10% -5%,  rgba(236, 0, 140, .58), transparent 58%),
        radial-gradient(85% 70% at 99% -2%,   rgba(247, 148, 29, .62), transparent 52%),
        radial-gradient(120% 110% at 50% 118%, rgba(37, 223, 240, .32), transparent 62%),
        linear-gradient(150deg, #3B1155, #1C1042 55%, #10233F);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 26px 70px rgba(236, 0, 140, .20);
}

/* Le logo est noir sur blanc : il lui faut son propre fond, quelle que
   soit la couleur derrière. La pastille blanche fait aussi office de
   respiration entre le pied de page et ce dernier bloc. */
.delisou-banner-logo {
    display: inline-block;
    background: #fff;
    padding: 12px 20px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    margin-bottom: 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.delisou-banner-logo .delisou-logo { width: auto; max-width: 100%; }

.delisou-banner h2 {
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: #fff;
}
.delisou-banner p {
    margin: 0 auto 8px;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
    text-wrap: pretty;
}
.delisou-banner p b { color: #fff; font-weight: 700; }

/* La phrase qui fait le lien entre l'appli et l'agence : plus discrète,
   c'est une remarque, pas un argument de vente. */
.delisou-banner-clin {
    font-size: 14.5px !important;
    font-style: italic;
    color: rgba(255, 255, 255, .55) !important;
    margin-bottom: 22px !important;
}

.delisou-banner-btn {
    background: #F7941D;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(247, 148, 29, .40);
}

@media (hover: hover) and (pointer: fine) {
    .delisou-banner-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(247, 148, 29, .55);
        filter: brightness(1.06);
    }
    .delisou-banner-logo:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
    }
}

/* La toute dernière ligne : la signature de l'atelier. Discrète — elle
   n'est pas là pour vendre, le bandeau juste au-dessus s'en charge. */
.land-copy {
    text-align: center;
    margin: 26px auto 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .40);
}
.land-copy a {
    color: rgba(255, 255, 255, .70);
    font-weight: 700;
    text-decoration: none;
}
.land-copy span { display: block; opacity: .75; }

@media (hover: hover) and (pointer: fine) {
    .land-copy a:hover { color: #F7941D; }
}