/* 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; /* 🔴 COMPAGNON SOMBRE DE `--gold`, ET IL MANQUAIT. `--gold` (#F2A93B) est volontairement CLAIR — il ne sert qu'à des usages non textuels (barre de disponibilité, contour de focus, accents) et tombe à ~2:1 sur blanc. Un lien doré avait donc besoin de sa propre teinte : 5,47:1 sur le fond de la carte, au-dessus du seuil AA du texte normal. ⚠️ Un premier essai à #A3660B donnait 4,45 — sous le seuil d'un cheveu, et sur un libellé de 13,6px qui ne relève pas du « grand texte ». Ne pas l'éclaircir sans repasser par le calcul. */ --gold-dark:#8F5A08; /* 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; /* Vert du BANDEAU des modales en plein écran, et de lui seul. 🔴 NI `--primary` NI `--primary-dark` : le premier est exactement la couleur du bouton d'action qui se trouve au bas du MÊME écran — bandeau et bouton se confondaient. Le second n'est qu'à 1,40:1 du premier, et c'est déjà la couleur de SURVOL de ce bouton : deux sens pour une teinte. ⚠️ 1,78:1 d'écart avec `--primary`, blanc à 9,35:1 dessus. */ --forest-deep:#17503A; /* 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; /* Violet et son compagnon clair — la SEULE teinte nouvelle de la palette, ajoutée pour porter la rotation des pastilles de rubrique de quatre à six valeurs (voir .cat-tile--n). Les cinq autres existaient déjà. ⚠️ Construits sur le même modèle que --organizer / --organizer-soft : luminosité du fond alignée sur les autres `-soft`, et un compagnon foncé dont le contraste sur ce fond (4,97:1) reste dans la famille des paires existantes (3,68 à 4,59). Le seuil applicable est celui du NON-TEXTE (3:1) : ces pastilles portent une icône, pas une phrase. */ --violet:#7A55A0; --violet-soft:#F1ECF7; /* Compagnon foncé — le TEXTE de `.btn-violet` au repos, sur --violet-soft : 6,61:1. ⚠️ Il a d'abord servi au SURVOL d'un bouton en aplat ; le bouton est passé à la forme pâle (voir `.btn-violet`), le token est resté et a changé de rôle. Ne pas le relire comme une couleur de fond. */ --violet-dark:#654488; /* Fond des bandeaux d'information. ⚠️ Token DÉDIÉ et non `--gold-soft`, qui sert à neuf autres endroits — pastilles d'icône, tuiles de rubrique, étapes de l'accueil, dégradé du hero. Le repeindre pour éclaircir un bandeau aurait touché tout ça, loin de l'écran concerné. ⚠️ Plus pâle que --gold-soft : le texte y gagne (6,11 → 6,36:1), et l'identité du bandeau ne vient PAS de son fond mais de sa BORDURE — il n'est qu'à 1,09:1 de la page, et se lit parfaitement. */ --notice-soft:#FEF6E8; /* 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; } /* 🔴 LES 2,2rem ÉTAIENT SERVIS TELS QUELS SUR UN TÉLÉPHONE, exactement le défaut déjà corrigé sur le titre de l'accueil. Sur les ~312px utiles d'un écran de 360, 35px donnent une quinzaine de caractères par ligne : « Secret Santa en ligne, gratuit et vraiment secret » y occupait trois lignes, et le contenu partait sous la ligne de flottaison avant d'avoir commencé. ⚠️ Touche les titres qui n'ont PAS de règle propre — catalogue, guides, FAQ, Secret Santa, tableau de bord. `.hero h1`, `.list-hero h1`, `.panel-head h1` et `.modal-body h1` gardent les leurs, déjà dimensionnées pour leur contexte. ⚠️ `clamp()` PLUTÔT QU'UNE MEDIA QUERY, et pour la raison documentée sur `.hero h1` : la règle reste DANS le sélecteur de base. Une surcharge en `@media` aurait dû être placée après cette ligne pour l'emporter — les media queries n'ajoutent aucune spécificité — et c'est le piège déjà rencontré sur `.list-hero`. ⚠️ 1,5rem au plancher : à 24px on tient ~25 caractères par ligne sur 312px, soit deux lignes pour un titre long au lieu de trois. Le maximum ne bouge pas — la borne haute est atteinte vers 830px de large. */ h1{font-size:clamp(1.5rem, 0.95rem + 2.4vw, 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