/*
 * kado.css — ajouts au design system des maquettes (style.css reste INCHANGÉ).
 * Remplace aussi les attributs style="" des maquettes, interdits par la CSP.
 */

/* Fonds pleine page (decisions.md D16 · design.md §Illustrations).
   Image fixe plein écran (pseudo-élément, pas background-attachment:fixed,
   ignoré par iOS) + voile crème à gauche pour la lisibilité ; les
   personnages, placés à droite dans les images, restent visibles. */
html{background:#fff8ed}
body.bg{background:none}
body.bg::before,body.bg::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body.bg::before{background-image:var(--bg);background-size:cover;background-position:right center;background-repeat:no-repeat}
body.bg::after{background:linear-gradient(90deg,#fff8edf2 0%,#fff8ede6 38%,#fff8ed8c 62%,#fff8ed00 82%)}
.bg-01{--bg:url(../img/fonds/01-accueil-pere-noel.webp)}
.bg-02{--bg:url(../img/fonds/02-inscription-lutin-lanterne.webp)}
.bg-03{--bg:url(../img/fonds/03-connexion-village-hiver.webp)}
.bg-04{--bg:url(../img/fonds/04-mot-de-passe-renne.webp)}
.bg-05{--bg:url(../img/fonds/05-tableau-de-bord-sapins.webp)}
.bg-06{--bg:url(../img/fonds/06-creation-groupe-traineau.webp)}
.bg-07{--bg:url(../img/fonds/07-invitations-lutin-cadeaux.webp)}
.bg-08{--bg:url(../img/fonds/08-rejoindre-bonhomme-neige.webp)}
.bg-09{--bg:url(../img/fonds/09-groupe-pere-noel.webp)}
.bg-10{--bg:url(../img/fonds/10-participants-mere-noel.webp)}
.bg-11{--bg:url(../img/fonds/11-exclusions-renne-foret.webp)}
.bg-12{--bg:url(../img/fonds/12-cadeaux-sapin.webp)}
.bg-13{--bg:url(../img/fonds/13-ajout-cadeau-lutine.webp)}
.bg-14{--bg:url(../img/fonds/14-tirage-pere-noel-surprise.webp)}
.bg-15{--bg:url(../img/fonds/15-resultat-cadeau-secret.webp)}
.bg-16{--bg:url(../img/fonds/16-profil-chalet-mere-noel.webp)}
/* Fond 02 : personnage à gauche dans l'image source → miroir pour le placer à droite */
.bg-02::before{transform:scaleX(-1)}
/* Colonne laissée vide dans .hero / .auth / .split : l'illustration de fond s'y voit */
.bg-window{min-height:1px}
.footer{background:#fff8ede6}
/* Pied de page collé en bas même sur les pages courtes */
.shell{display:flex;flex-direction:column}
.shell > .page,.shell > .layout{flex:1 0 auto;width:100%}
.card{background:#fffdf8f7}

/* Utilitaires issus des style="" des maquettes */
.accent{color:var(--red)}
.form-actions.actions-start{justify-content:flex-start}
.form-actions.actions-start .btn{flex:0 1 auto}
.steps.steps-spaced{margin-top:35px}
.icon-lg{font-size:2rem}
.icon-xl{font-size:3rem}
.prose{max-width:760px;margin:auto}

/* Bascule de langue */
.lang-switch{margin:0;display:inline-flex}
.lang-switch button{font:800 .75rem 'DM Sans',sans-serif;letter-spacing:.06em;color:var(--pine);background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 11px;cursor:pointer;min-height:34px}
.lang-switch button:hover{border-color:var(--pine)}
.footer .lang-switch{margin-left:8px}

/* Déconnexion dans la barre latérale (bouton stylé comme un lien .side a) */
.side-logout{margin:0}
.side-logout button{width:100%;text-align:left;color:#f5f1df;background:none;border:0;padding:12px;border-radius:9px;font:700 .88rem 'DM Sans',sans-serif;cursor:pointer}
.side-logout button:hover{color:var(--red);background:#ffffff10}

/* Messages flash */
.flashes{max-width:1240px;margin:16px auto 0;padding:0 24px}
.flashes .notice{margin:8px 0}
.notice.flash-error{background:#ffe8e8;border-color:#f3c4c9;color:#7d1426}
.notice.flash-info{background:#fff8eb;border-color:var(--line)}

/* Accessibilité */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Formulaires */
.hint{font-size:.78rem;color:var(--muted);margin:6px 0 0}
.field-error{font-size:.8rem;color:#9e1830;font-weight:700;margin:6px 0 0}
[aria-invalid="true"]{border-color:#c43a4f}
.inline-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.inline-between .checkboxline{margin-top:14px}
.inline-between > a{margin-top:14px}
.password-field{position:relative}
.password-field input{padding-right:48px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:36px;border:0;background:none;cursor:pointer;font-size:1.05rem;opacity:.55;border-radius:6px}
.pw-toggle[aria-pressed="true"],.pw-toggle:hover{opacity:1}
.avatar-picker{border:0;padding:0;margin:0}
.avatar-picker legend{padding:0}
.avatar-options{display:flex;flex-wrap:wrap;gap:8px}
.avatar-option{position:relative;cursor:pointer}
.avatar-option input{position:absolute;opacity:0;width:1px;height:1px}
.avatar-option span[aria-hidden]{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e9f2e7;font-size:1.4rem;border:2px solid transparent}
.avatar-option input:checked + span{border-color:var(--pine);background:#fff}
.avatar-option input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

/* Divers */
.spaced-top{margin-top:22px}
.empty{text-align:center;padding:18px 0}
.empty p{max-width:420px;margin:8px auto 16px}

/* Menu du compte (en-tête connecté) — <details>, sans JS */
.user-menu{position:relative}
.user-menu summary{list-style:none;cursor:pointer;border-radius:50%}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu-panel{position:absolute;right:0;top:48px;min-width:210px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #513f2626;padding:10px;z-index:20;display:flex;flex-direction:column;gap:2px}
.user-menu-name{margin:4px 8px 8px;font-size:.85rem;line-height:1.35}
.user-menu-panel a,.user-menu-panel button{display:block;width:100%;text-align:left;padding:9px 8px;border-radius:8px;font:700 .85rem 'DM Sans',sans-serif;color:var(--pine);text-decoration:none;background:none;border:0;cursor:pointer}
.user-menu-panel a:hover,.user-menu-panel button:hover{background:#f3ece0;color:var(--red)}
.user-menu-panel form{margin:0}

/* Barre latérale d'un groupe (PNG n° 9) */
.side .side-back{font-size:.8rem;opacity:.85}
.side-title{color:#fff;font-family:Fraunces,Georgia,serif;font-size:1.05rem;padding:6px 12px 10px;border-bottom:1px solid #ffffff22;margin-bottom:4px;overflow-wrap:anywhere}
.side-disabled{color:#f5f1df80;padding:12px;font-size:.88rem;font-weight:700;cursor:not-allowed}
.side-disabled small{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;margin-left:4px}

/* Vue du groupe */
.edit-link{font-size:1.1rem;text-decoration:none;margin-left:6px;vertical-align:middle}
.timeline{list-style:none;display:flex;gap:6px;padding:0;margin:22px 0 8px;counter-reset:s}
.timeline li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted);position:relative;text-align:center}
.timeline li:not(:last-child)::after{content:'';position:absolute;top:15px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--line)}
.timeline-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);color:var(--muted)}
.timeline li.done .timeline-dot{background:var(--pine);border-color:var(--pine);color:#fff}
.timeline li.done:not(:last-child)::after{background:var(--pine)}
.timeline li.current{color:var(--ink)}
.timeline li.current .timeline-dot{border-color:var(--red);color:var(--red);background:#fff4f4}

/* Menu d'actions d'une ligne (participants) — <details>, sans JS */
.row-menu{position:relative}
.row-menu summary{list-style:none}
.row-menu summary::-webkit-details-marker{display:none}
.row-menu-panel{position:absolute;right:0;top:40px;min-width:250px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #513f2626;padding:8px;z-index:15}
.row-menu-panel form{margin:0}
.row-menu-panel button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;font:700 .83rem 'DM Sans',sans-serif;color:var(--pine);background:none;border:0;cursor:pointer}
.row-menu-panel button:hover{background:#f3ece0}
.row-menu-panel button.danger,.btn.danger{color:#9e1830}

/* Lien affiché une seule fois */
.shown-link p{margin:0 0 8px}
.shown-link .hint{margin-top:8px}

.feature-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.checklist{list-style:none;padding:0;margin:16px 0}
.checklist li{padding:10px 12px;border-radius:10px;margin-bottom:6px;font-weight:700;font-size:.9rem}
.checklist li.ok{background:#e7f4e9;color:#196b40}
.checklist li.ko{background:#fff0e7;color:#9c3a18}
.reveal-choice{border:0;padding:0;margin:8px 0 0}
.reveal-choice legend{padding:0}
.exclusion-pick select{flex:1;min-width:130px}
.exclusion-pick span{font-weight:700;font-size:.85rem;color:var(--muted)}
.exclusion-arrow{margin:0 6px;color:var(--red);font-weight:800}
.badge.list{background:#e8eef9;color:#244a8a}
.mode-picker{border:0;padding:0;margin:0 0 4px}
.mode-picker legend{padding:0}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-option{position:relative;cursor:pointer}
.mode-option input{position:absolute;opacity:0;width:1px;height:1px}
.mode-card{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px;border:2px solid var(--line);border-radius:12px;background:#fff}
.mode-card small{color:var(--muted);line-height:1.35}
.mode-icon{font-size:1.5rem}
.mode-option input:checked + .mode-card{border-color:var(--pine);background:#f1f8f2}
.mode-option input:focus-visible + .mode-card{outline:3px solid var(--gold);outline-offset:2px}
.mode-option input:disabled + .mode-card{opacity:.6;cursor:not-allowed}
.manager-form{padding:6px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.manager-form label{display:block;font-size:.78rem;font-weight:700;margin-bottom:6px}
.manager-form select{min-height:36px;padding:6px}
.stack{display:flex;flex-direction:column;gap:22px}
.reveal-card h3{margin-top:6px}
.recipient{display:flex;flex-direction:column;align-items:center;gap:10px;margin:10px 0 6px}
.recipient strong{font-family:Fraunces,Georgia,serif;font-size:1.8rem;color:var(--deep);text-align:center}
.avatar.big{width:76px;height:76px;font-size:2.4rem}
.form-actions.actions-center{justify-content:center}
.form-actions.actions-center .btn{flex:0 1 auto}
.list-picker{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:10px}
.list-picker a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:9px 13px;border-radius:99px;background:#fffdf8;border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:.82rem}
.list-picker a.active{background:var(--pine);color:#fff;border-color:var(--pine)}
.list-picker small{background:#0000000f;border-radius:99px;padding:1px 7px;font-size:.7rem}
.list-picker a.active small{background:#ffffff30}
.wish .info h3{overflow-wrap:anywhere}
.wish-desc{font-size:.85rem;margin:6px 0}
.wish-link{font-size:.82rem;font-weight:700;overflow-wrap:anywhere}
.wish-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wish-actions form{margin:0}
.danger-zone{border-color:#f3c4c9}
.sep{border:0;border-top:1px solid var(--line);margin:24px 0}
.spaced-top-sm{margin-top:10px}

@media(max-width:850px){
  /* La maquette masque les liens non-.btn du topbar : garder la bascule visible */
  .topbar nav .lang-switch{display:inline-flex}
  .topbar nav .user-menu-panel a{display:block}
  .side-logout button{white-space:nowrap;padding:10px}
  .flashes{padding:0 15px}
  /* Mobile : image recadrée sur le personnage, voile uniforme plus opaque */
  body.bg::before{background-position:78% top}
  .bg-02::before{background-position:12% top}
  body.bg::after{background:linear-gradient(180deg,#fff8edd9 0%,#fff8edeb 45%,#fff8edf2 100%)}
  .bg-window{display:none}
  .side-title{display:none}
  .side-disabled{white-space:nowrap;padding:10px}
  .timeline li{font-size:.68rem}
}
@media(max-width:540px){
  .mode-options{grid-template-columns:1fr}
  .feature:has(.feature-tags){flex-wrap:wrap;row-gap:8px}
  .feature:has(.feature-tags) .grow{flex:1 1 calc(100% - 52px);min-width:0}
  .feature-tags{width:100%;padding-left:50px;justify-content:flex-start}
}

/* Accueil — « Comment ça marche » : texte posé dans le dégagement crème (à gauche) de
   l'illustration. Image et texte partagent la même cellule de grille : si le texte
   dépasse, la carte grandit et l'image (cover, calée à droite) suit. alt="" : décorative. */
.step-card{display:grid;padding:0;overflow:hidden}
.step-art,.step-body{grid-area:1/1}
.step-art{display:block;width:100%;height:100%;min-height:100%;aspect-ratio:1735/906;object-fit:cover;object-position:right center}
.step-body{position:relative;align-self:start;width:56%;padding:20px 0 16px 22px}
.step-body h3{margin-bottom:6px}
.step-body p{margin:0;font-size:.9rem;line-height:1.45}
@media(max-width:540px){.step-body{padding:16px 0 14px 16px}}

/* Accessibilité (revue M6) : titre de page = h1 (un par page), au gabarit visuel du h2 des maquettes */
h1.page-title{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;margin:0 0 10px}
/* Texte secondaire : --muted des maquettes (#68786f) = 4,42:1 sur le crème → assombri pour atteindre 4,5:1 (WCAG AA) */
:root{--muted:#5a6a61}
.list-picker a.active small{color:#fff}
/* Lien d'évitement : visible seulement au focus clavier */
.skip-link{position:absolute;left:12px;top:-60px;z-index:50;background:var(--deep);color:#fff;padding:10px 16px;border-radius:9px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
main:focus{outline:none}
/* Crayon « Paramètres » : cible tactile de 44 px */
.edit-link{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin-left:0}
/* Logo (maquettes/logo1.png → img/logo.webp) à côté du nom dans la barre du haut */
.brand{display:inline-flex;align-items:center;gap:8px}
.brand-logo{width:32px;height:32px;flex-shrink:0}
.brand .brand-name{color:inherit}
@media(max-width:540px){.brand-logo{width:26px;height:26px}.brand{gap:6px}}
/* Pages légales */
.legal h2{font-size:1.2rem;margin:26px 0 8px}
.legal ul{padding-left:20px;line-height:1.6}
.legal li{margin:6px 0}
/* Bandeau témoins : fixé en bas, ne masque pas le contenu (padding du body) */
.cookie-notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:760px;margin:auto;display:flex;align-items:center;gap:14px;background:#fffdf8;border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 12px 35px #2d433530}
.cookie-notice p{margin:0;font-size:.88rem;line-height:1.45;flex:1}
.cookie-notice form{flex-shrink:0}
.cookie-notice .btn{min-height:44px}
body:has(.cookie-notice){padding-bottom:110px}
@media(max-width:540px){.cookie-notice{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:10px}.cookie-notice .btn{width:100%}body:has(.cookie-notice){padding-bottom:170px}}