/* picturebox.fr — thème « Boîte à cartes » : crème, corail, violet ; Baloo 2 + Nunito. Mobile d'abord. */
:root{
  --bg:#FFF8F1;--paper:#FFFFFF;--ink:#2A2140;--ink2:#5E5674;--line:#F0E4D8;
  /* --coral-d = couleur de TEXTE (liens, .eyebrow, .days strong, .chips a:hover) ET fond du CTA.
     2026-10-07 : #E23E60 → #C9254A. L'ancienne valeur échouait WCAG AA partout où elle servait de
     texte (3,92:1 sur le crème, 4,12:1 sur blanc — seuil 4,5). Mesuré après : 5,19:1 sur le crème,
     5,46:1 sur blanc. --coral-dd = survol du CTA (blanc dessus : 7,27:1).
     --coral (#FF5A7A) reste réservé au DÉCOR (ombres, bordure de variante active, .brand b) : en
     fond de bouton avec du blanc dessus il ne faisait que 3,00:1. */
  --coral:#FF5A7A;--coral-d:#C9254A;--coral-dd:#A81B3C;--sun:#FFB33D;--violet:#6B4EFF;--mint:#2BC48A;
  --r:18px;--sh:0 10px 30px -12px rgba(60,30,80,.25);
  --f-t:'Baloo 2',system-ui,sans-serif;--f:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f)}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-d)}
h1,h2,h3{font-family:var(--f-t);line-height:1.15;margin:.2em 0 .5em;color:var(--ink)}
h1{font-size:clamp(30px,6vw,48px);font-weight:800}
h2{font-size:clamp(22px,4vw,30px);font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
/* FOCUS CLAVIER (ajouté 2026-10-07) — il n'y en avait AUCUN : 0 occurrence de :focus-visible dans
   toute la feuille, et les champs annulaient même l'anneau par défaut (outline:none). Le site était
   inutilisable au clavier → WCAG 2.4.7 (Focus Visible) en échec. Le violet fait 4,80:1 sur le crème
   et 5,05:1 sur le blanc, bien au-delà des 3:1 demandés pour un indicateur non textuel. */
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:4px}
/* Cibles rondes/arrondies : l'anneau suit la forme. */
.btn:focus-visible,.chips a:focus-visible,.site-nav a:focus-visible{outline-offset:3px;border-radius:999px}
.variant:focus-visible,.thumb:focus-visible img,.occ-card:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.lead{font-size:1.1em;color:var(--ink2);max-width:62ch}
.small{font-size:.88em;color:var(--ink2)}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.78em;color:var(--coral-d);margin:0}
.more{font-weight:800;text-decoration:none}
.more:hover{text-decoration:underline}
.section{margin:40px 0}
.prose{max-width:72ch}
.prose h2{margin-top:1.4em}
.err{background:#FFE3E8;color:#8A1530;padding:10px 14px;border-radius:12px;font-weight:700}

/* En-tête */
.site-header{background:rgba(255,248,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.hdr{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:700 24px var(--f-t)}
.brand b{color:var(--coral)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.95em}
.site-nav a:hover{background:#FFE8DA}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:3px;background:var(--ink);margin:4px 0;border-radius:2px}
@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .nav-open .site-nav{display:block}
  .site-nav ul{flex-direction:column}
  .site-nav a{padding:12px 14px;font-size:1.05em}
}

/* Boutons & formulaire */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;font:800 1em var(--f);cursor:pointer;text-decoration:none}
/* CTA « Créer ma carte » : fond --coral-d (blanc dessus = 5,46:1 ; l'ancien --coral donnait 3,00:1,
   soit un échec AA sur le bouton principal de l'accueil et de tous les hubs). L'ombre garde --coral
   (pur décor, aucun texte dessus). */
.btn-main{background:var(--coral-d);color:#fff;box-shadow:0 8px 20px -8px var(--coral)}
.btn-main:hover{background:var(--coral-dd)}
.btn-soft{background:#FFE8DA;color:var(--ink)}
.btn-sm{padding:8px 14px;font-size:.88em}
.perso{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.perso input,.perso select{flex:1 1 200px;min-width:0;font:700 1.05em var(--f);padding:13px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
/* 2026-10-07 : `outline:none` retiré. Le changement de border-color seul ne suffisait pas (teinte
   proche, invisible pour beaucoup d'utilisateurs) et supprimait l'anneau natif. On garde la
   bordure colorée comme repère ET on laisse :focus-visible poser son anneau. */
.perso input:focus,.perso select:focus{border-color:var(--coral-d)}
.perso .btn{flex:1 0 auto}

/* Accueil */
.hero{background:radial-gradient(circle at 85% 20%,#FFE1EA 0,transparent 45%),radial-gradient(circle at 10% 90%,#FFF0C9 0,transparent 40%);padding:32px 0 8px}
.hero{overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.hero-in>*,.occ-head>*,.card-layout>*{min-width:0}
.hero-img img{width:100%}
.hero-img img{border-radius:24px;box-shadow:var(--sh);transform:rotate(2deg);max-width:440px;margin:0 auto}
@media (min-width:860px){.hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.hero{padding:56px 0 24px}}
.today{background:var(--paper);border-radius:24px;padding:24px;box-shadow:var(--sh)}

/* Vignettes */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.thumb{text-decoration:none;color:var(--ink);display:block}
.thumb img{border-radius:16px;box-shadow:0 6px 16px -10px rgba(0,0,0,.4);transition:transform .15s}
.thumb:hover img{transform:translateY(-3px) rotate(-1deg)}
.thumb-cap{display:block;font-weight:800;font-size:.9em;margin-top:6px;text-align:center}
.occ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.occ-card{background:var(--paper);border-radius:var(--r);padding:12px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);display:flex;flex-direction:column;gap:6px}
.occ-card img{border-radius:12px}
.occ-card strong{font:700 1.3em var(--f-t)}
.occ-card span{font-size:.9em;color:var(--ink2)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:.95em}
.chips a:hover{border-color:var(--coral);color:var(--coral-d)}
.days{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.days a{display:flex;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--paper);border-radius:14px;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.days strong{min-width:110px;color:var(--coral-d)}

/* Page carte */
.crumbs ol{list-style:none;padding:0;margin:16px 0 8px;display:flex;flex-wrap:wrap;gap:6px;font-size:.88em;color:var(--ink2)}
.crumbs li+li:before{content:"›";margin-right:6px}
.crumbs a{color:var(--ink2)}
.card-title{margin-top:4px}
.card-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:900px){.card-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.card-box{background:var(--paper);border-radius:24px;padding:14px;box-shadow:var(--sh)}
.card-img{border-radius:16px;width:100%}
.variants{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}
.variant{border:3px solid transparent;border-radius:14px;padding:0;background:none;cursor:pointer;overflow:hidden}
.variant img{width:64px;height:64px;border-radius:10px}
.variant[aria-pressed=true]{border-color:var(--coral)}
.share{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
@media (min-width:520px){.share{grid-template-columns:repeat(3,1fr)}}
.sh{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;border:0;font:800 .95em var(--f);text-decoration:none;cursor:pointer;color:#fff}
.sh[hidden]{display:none}
.sh-native{background:var(--violet);grid-column:1/-1}
.sh-wa{background:#25D366}.sh-fb{background:#1877F2}.sh-sms{background:#5E5674}
.sh-dl{background:var(--coral)}.sh-copy{background:#FFE8DA;color:var(--ink)}
.panel{background:var(--paper);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);margin-bottom:18px}
.panel h2{font-size:1.35em}
.msgs{list-style:none;padding:0;margin:0;display:grid;gap:12px}
@media (min-width:760px){.msgs{grid-template-columns:1fr 1fr}}
.msgs li{background:var(--paper);border-radius:var(--r);padding:16px 18px;border:1px dashed #F3C6B0}
.msgs p{margin:0 0 10px;font-weight:600}
.msgs.plain p{margin:0}
.partner{margin:32px 0;padding:18px;border-radius:var(--r);background:#F3F0FF}
.partner-h{font-weight:800;margin:0 0 10px}
.partner-h small{font-weight:600;color:var(--ink2)}
.partner-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.partner-card{background:#fff;border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.partner-card span{color:var(--ink2);font-size:.9em}
.promo-slot{text-align:center;margin:16px auto;max-width:100%;overflow:hidden}

/* Occasion */
.occ-head{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.occ-demo{border-radius:20px;box-shadow:var(--sh);max-width:380px;margin:0 auto;width:100%}
@media (min-width:860px){.occ-head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.when{font-size:1.05em}

/* Jour / calendrier / prénoms */
.daynav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0}
.daynav a{font-weight:800;text-decoration:none;padding:10px 14px;background:var(--paper);border-radius:12px;border:1px solid var(--line)}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:24px 0}
.month{background:var(--paper);border-radius:16px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.month strong{display:block;font:700 1.3em var(--f-t)}
.month span{color:var(--ink2);font-size:.9em}
.cal{width:100%;border-collapse:collapse;background:var(--paper);border-radius:16px;overflow:hidden;font-size:.95em}
.cal th,.cal td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cal thead th{background:#FFE8DA;font-weight:800}
.cal tbody th{white-space:nowrap}
.cal tr.is-today{background:#FFF4D6}
@media (max-width:640px){
  .cal thead{display:none}
  .cal tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .cal th,.cal td{display:block;border:0;padding:2px 12px}
}
.letters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 20px}
.letters a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--paper);border:1px solid var(--line);text-decoration:none;font-weight:800;color:var(--ink)}
.letters a[aria-current]{background:var(--coral);color:#fff;border-color:var(--coral)}
.names{list-style:none;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.names li{background:var(--paper);border-radius:12px;padding:10px 14px;border:1px solid var(--line)}
.names strong{display:block;font-size:1.05em}
.names-l{font-size:.9em}
.lost{text-align:center;padding:40px 16px}
.lost-num{font:800 96px/1 var(--f-t);color:var(--coral);margin:0}
.lost .perso{max-width:560px;margin:18px auto}

/* Pied */
.site-footer{background:var(--ink);color:#E9E3F5;margin-top:56px;padding:36px 0 16px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot{display:grid;gap:24px}
@media (min-width:760px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot .brand{color:#fff}
.foot-h{font-weight:800;text-transform:uppercase;font-size:.8em;letter-spacing:.08em;color:var(--sun)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.foot-legal{font-size:.82em;color:#B8AECB;margin-top:20px}

/* Appli sans store (carte notifications + page /notifications/, module commun pwa/pwa.css) — 2026-10-02 */
.pwa-card.pb-pwa,.pwa-help,.pwa-card-help{box-shadow:var(--sh);border:0}
.pwa-card .pwa-title,.pwa-help .pwa-title{font:700 1.2rem/1.3 var(--f-t)}
.pwa-card .btn.pwa-btn,.pwa-help .btn.pwa-btn,.pwa-welcome .btn.pwa-btn{background:var(--coral);color:#fff;box-shadow:0 8px 20px -8px var(--coral)}
.pwa-card .btn.pwa-btn:hover,.pwa-help .btn.pwa-btn:hover{background:var(--coral-d)}
.pwa-help .btn-ghost.pwa-btn{background:#FFE8DA;color:var(--ink);box-shadow:none}
.pwa-select{border-width:2px;font-weight:700}
.pwa-help details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0}
.pwa-help details summary,.prose details summary{cursor:pointer;font-weight:800}
.prose details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0}
/* Bloc « Mes prénoms » (/notifications/) */
.pb-mine{background:var(--paper);border-radius:24px;padding:20px;box-shadow:var(--sh);margin:22px 0}
.pb-mine[hidden]{display:none}
.pb-mine h2 small{font:600 .55em var(--f);color:var(--ink2)}
.pb-mine h3{font-size:1.15rem;margin:.6em 0 .3em}
.pb-mine-grid{display:grid;gap:8px 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pb-mine-col{min-width:0}
.pb-chips{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pb-chips li{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:4px 4px 4px 12px;border-radius:999px;background:#FFE8DA;font-size:.92em}
.pb-chips span{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-chip-x{border:0;background:none;width:30px;height:30px;border-radius:50%;font-size:1.2em;line-height:1;cursor:pointer;color:var(--ink2);flex:none}
.pb-chip-x:hover{background:#fff;color:var(--coral-d)}
.pb-mine-add{display:flex;flex-wrap:wrap;gap:8px}
.pb-mine-add input,.pb-mine-add select{min-width:0;font:700 1em var(--f);padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.pb-mine-add input{flex:1 1 140px}
.pb-mine-add select{flex:0 1 auto}
.pb-mine-add input:focus,.pb-mine-add select:focus{border-color:var(--coral-d)}   /* outline:none retiré 2026-10-07 */
.pb-mine-save{margin:14px 0 0}

/* ---------- Textes d'anniversaire (/texte-anniversaire/, 2026-10-07) ----------
   Gabarits NÉS conformes : contrastes AA (texte --ink 15,1:1 sur blanc, --ink2 6,9:1, confirmation
   --ink sur --mint 6,7:1), focus clavier hérité de la règle :focus-visible globale, et aucune
   animation en dehors d'une transition de couleur déjà neutralisée par prefers-reduced-motion. */
.tx-grid{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tx-grid a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.tx-grid a:hover{border-color:var(--coral)}
.tx-grid strong{display:block;font:700 1.15em var(--f-t)}
.tx-grid span{font-size:.9em;color:var(--ink2)}
.tx-toc{margin:18px 0 8px}
.tx-help{margin:26px 0 0}
.tx-help[hidden]{display:none}
.tx-block h2 small{font:600 .6em var(--f);color:var(--ink2)}
.tx-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
@media (min-width:760px){.tx-list{grid-template-columns:1fr 1fr}}
.tx-list li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tx-msg{margin:0;font-weight:600}
.tx-copy{flex:0 0 auto}
.tx-copy.is-done{background:var(--mint);color:var(--ink)}
.tx-carte{margin:18px 0}
.tx-carte-in{display:grid;gap:16px;align-items:start}
@media (min-width:640px){.tx-carte-in{grid-template-columns:150px minmax(0,1fr)}}
.tx-carte-img img{border-radius:14px;box-shadow:0 6px 16px -10px rgba(0,0,0,.4);width:100%;max-width:220px}
.tx-def{margin:0}
.tx-def dt{font-weight:800;margin-top:12px}
.tx-def dd{margin:2px 0 0;color:var(--ink2)}

/* ---------- Mouvement réduit (ajouté 2026-10-07) ----------
   0 occurrence de prefers-reduced-motion jusqu'ici (wishes en a 2 : cohérence réseau).
   Les animations du thème sont légères (levée des vignettes au survol, défilement fluide), mais
   « légère » n'est pas « sans effet » pour qui souffre de troubles vestibulaires. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .thumb:hover img{transform:none}
  .hero-img img{transform:none}
}