/* Surprizio — design tokens Palette: cream canvas, deep ink, mint green, coral ribbon accent, amber twine Type: Nunito Sans (display + body/UI) */ :root{ --canvas:#FDFCFC; --paper:#FFFFFF; --ink:#1E2B22; --ink-soft:#6B7568; --forest:#2F9E6E; --forest-dark:#237A56; --mint-soft:#ECF4EF; --berry:#EF5B50; --berry-dark:#D8483E; --berry-soft:#FDEAE7; --gold:#F2A93B; --gold-soft:#FDF1DC; /* Fond des boutons d'action principale : le vert profond de la charte, qui était DÉJÀ la couleur de base de .btn (jamais rendue, toutes les instances portant une variante). Le vert dit « valider / go », convient à Réserver, Ajouter, Confirmer, et laisse --gold entièrement aux statuts et au décor. Contraste du texte blanc : 5,26:1, au-dessus du seuil AA — --forest seul n'étant qu'à 3,37:1, ne pas l'utiliser comme fond de bouton. */ --primary:var(--forest-dark); --primary-dark:#1C6144; /* Couleur propre au badge « Organisateur » (tag-moderator). Il partageait --gold avec tag-prete, ce qui rendait les deux indiscernables sur une tuile « Prête » gérée par un organisateur — cas fréquent. */ --organizer:#3F6C82; /* Compagnon clair de --organizer, sur le modèle de --mint-soft / --berry-soft / --gold-soft : fond des pastilles décoratives dont l'icône est --organizer. Même teinte (H 0.55), luminosité alignée sur --mint-soft (L 0.94). */ --organizer-soft:#EBF1F4; /* Fonds du bloc d'information d'une tuile de liste, UN PAR STATUT. ⚠️ Dérivés à faible saturation des couleurs déjà en place — aucune teinte nouvelle : --gold pour « prête », --organizer pour « brouillon », un gris neutre pour « archivée ». Ils reprennent donc les mêmes repères que les bordures de section et les badges, ce qui fait qu'on lit le statut d'un coup d'œil sans avoir à croiser deux codes visuels différents. ⚠️ Volontairement PLUS PÂLES que les -soft ci-dessus : ceux-là servent de fond à des pastilles d'icône de 40px, celles-ci à un bloc de texte de la taille d'une carte. La même intensité y deviendrait envahissante. */ --bg-prete:#FBF3E2; --bg-brouillon:#EBF2F5; --bg-archivee:#F1F0ED; --beige: #F8F6F3; /* Variante plus soutenue de --beige, pour le survol des surfaces déjà beiges (boutons secondaires) : --canvas y serait plus CLAIR que le fond au repos, et le survol paraîtrait inversé. */ --beige-dark: #EFECE6; --line:#EFE1D2; --danger:#D8483E; --radius:18px; --radius-lg:28px; --shadow: 0 10px 28px rgba(30,43,34,0.07), 0 2px 6px rgba(30,43,34,0.05); --shadow-sm: 0 2px 8px rgba(30,43,34,0.06); } *{box-sizing:border-box;} /* 🔴 `[hidden]` DOIT ÊTRE REPOSÉ ICI, ET AVEC `!important`. Le `display:none` de l'attribut `hidden` vient de la feuille par DÉFAUT du navigateur : n'importe quelle règle auteur posant un `display` sur le même élément l'emporte, sans `!important` de son côté et sans le moindre avertissement. L'élément reste alors visible alors que le JS le croit masqué — panne parfaitement silencieuse, et le script n'a aucun moyen de s'en apercevoir. Le défaut s'est produit DEUX FOIS : sur le bouton « Partager » de la bannière (les deux états s'affichaient ensemble, « Copié ! » dès le chargement) et sur la modale d'idée cadeau, qui montrait un `` pour une idée sans image. Deux corrections ponctuelles existaient déjà ailleurs pour la même raison (`.cover-field [hidden]`, `.modal-overlay[hidden]`) — le motif est donc systémique, pas accidentel. ⚠️ Tout composant qui bascule un `hidden` en JS dépend de cette ligne. Ne pas la retirer en la prenant pour une redondance avec le navigateur. */ [hidden]{display:none !important;} html,body{margin:0;padding:0;} body{ background:var(--canvas); color:var(--ink); font-family:'Nunito Sans', system-ui, sans-serif; font-size:16px; line-height:1.5; min-height:100vh; display:flex; flex-direction:column; } h1,h2,h3,h4{ font-family:'Nunito Sans', system-ui, sans-serif; font-weight:800; color:var(--ink); line-height:1.15; margin:0 0 .4em; letter-spacing:-.01em; } h1{font-size:2.2rem;} h2{font-size:1.5rem;} h3{font-size:1.15rem;} p{margin:0 0 1em;} a{color:var(--berry);text-decoration:none;} a:hover{text-decoration:none;} .wrap{max-width:1120px;margin:0 auto;padding:0 24px;} /* ---- Icônes SVG inline (voir templates/_icons.html.twig) ---- */ .icon{display:inline-block;vertical-align:-0.15em;flex-shrink:0;} .text-forest{color:var(--forest);} .text-berry{color:var(--berry);} .text-danger{color:var(--danger);} .text-mint-soft{color:var(--mint-soft);} /* ---- Import de cadeaux (liste à cocher) ---- */ .import-gift-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 20px;} .import-gift-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;} .import-gift-row:hover{border-color:var(--forest);background:var(--mint-soft);} .import-gift-row input[type="checkbox"]{margin-top:3px;flex-shrink:0;width:auto;} .import-gift-info{display:flex;flex-direction:column;gap:2px;} /* ---- Topbar ---- */ .topbar{background:var(--paper);border-bottom:1px solid var(--line);} .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;} .brand{color:var(--ink);font-family:'Nunito Sans',sans-serif;font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:10px;} .brand:hover{text-decoration:none;opacity:.9;} .brand-badge{ display:inline-flex;align-items:center;justify-content:center; width:52px;height:52px;border-radius:14px; flex-shrink:0; } .brand-mark{width:40px;height:40px;object-fit:contain;display:block;} .nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} /* Groupe « Mes listes / Profil ». `display:contents` : le conteneur n'a aucune existence visuelle, ses liens restent des enfants directs de .nav. Il n'existe que pour pouvoir les faire basculer ENSEMBLE sur une seconde ligne en mobile (voir le @media 760px), sans les sortir du