/* ============================================================================ zzzz-entraide.css — ENTRAIDE (app) : calage final sur la maquette 11. Rôle : chargé EN DERNIER, prime sur zz-polish.css / zz-entraide-app.css / entraide-troc.css. Ne cible QUE des classes déjà présentes en prod. - 3 cartes d'action en DÉGRADÉ (répare le grille .ar-en-actions cassé par un commentaire malformé dans zz-polish.css, + applique les dégradés maquette). - Annonces en cartes HORIZONTALES + boutons conditionnels (Demande=ambre, Offre=vert). Panneau/112/filtres calés sur la charte sombre. Additif & réversible : supprimer ce fichier = retour à l'état précédent. NE TOUCHE NI au Gardien (.gw-*, .gardien*, #gwLauncher) NI à Étincelles. Rollback : supprimer le fichier + retirer son . ============================================================================ */ @media (max-width:768px), (pointer:coarse) and (max-width:1366px), (display-mode:standalone) and (max-width:1366px){ /* --------------------------------------------------------------------------- PANNEAU + EN-TÊTE — surface navy plate (halo bleu de la page neutralisé). --------------------------------------------------------------------------- */ html.apprefonte body.page-entraide .en-panel{ background:#0D2233 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:18px !important; box-shadow:none !important; } html.apprefonte body.page-entraide .en-head-title{ color:#F6F0DF !important; } html.apprefonte body.page-entraide .en-head-title small{ color:rgba(246,240,223,.62) !important; } /* --------------------------------------------------------------------------- BANDEAU 112 — rouge danger (urgence uniquement), aligné charte #DC352F. (audit 24/08) L'ÉCRITURE en #DC352F sur le fond sombre du bandeau donnait 3,36:1 mesuré, pour un texte de 12 px : le message le plus important de la page — « En cas d'urgence réelle, contactez le 112 » — était l'un des moins lisibles. Le FOND et le CADRE gardent exactement le rouge de la charte ; seule l'encre passe à un rouge clair, qui atteint 5,1:1. Trois feuilles posaient la même règle (entraide-troc.css, zz-polish.css et celle-ci) : c'est CELLE-CI qui gagnait, chargée en dernier et la plus spécifique. C'est donc ici qu'il fallait corriger. RETOUR ARRIÈRE : remettre color:#DC352F sur les deux règles. --------------------------------------------------------------------------- */ html.apprefonte body.page-entraide .en-security{ background:rgba(220,53,47,.10) !important; border:1px solid rgba(220,53,47,.50) !important; color:#FF8A80 !important; border-radius:14px !important; } html.apprefonte body.page-entraide .en-security strong{ color:#FF8A80 !important; } /* --------------------------------------------------------------------------- 3 CARTES D'ACTION (injectées en JS) — DÉGRADÉS fidèles maquette. .ar-en-actions : la grille 3 colonnes est reperdue en prod (commentaire malformé dans zz-polish.css avale le sélecteur) → on la ré-affirme ici. --------------------------------------------------------------------------- */ html.apprefonte body.page-entraide .ar-en-actions{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); /* (14/09) 2 cartes depuis le retrait de « Autour de moi » */ gap:10px; padding:4px 14px 12px; } html.apprefonte body.page-entraide .ar-en-act{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; min-height:152px; padding:16px 10px; border-radius:16px !important; color:#F6F0DF; font-family:'Inter',system-ui,sans-serif; } html.apprefonte body.page-entraide .ar-en-ic{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; } html.apprefonte body.page-entraide .ar-en-ic svg{ width:24px; height:24px; } html.apprefonte body.page-entraide .ar-en-t{ font:700 15px/1.2 'Inter',system-ui,sans-serif; color:#F6F0DF; } html.apprefonte body.page-entraide .ar-en-d{ font:400 12px/1.35 'Inter',system-ui,sans-serif; color:rgba(246,240,223,.60); } /* Autour de moi = dégradé cyan */ html.apprefonte body.page-entraide .ar-en-teal{ background:linear-gradient(158deg, #15464F 0%, #0C2836 82%) !important; border:1px solid rgba(53,215,209,.22) !important; } html.apprefonte body.page-entraide .ar-en-teal .ar-en-ic{ background:#1FAAB5 !important; color:#FFFFFF !important; } /* Demander de l'aide = dégradé bleu */ html.apprefonte body.page-entraide .ar-en-blue{ background:linear-gradient(158deg, #16385A 0%, #0C2537 82%) !important; border:1px solid rgba(61,140,255,.26) !important; } html.apprefonte body.page-entraide .ar-en-blue .ar-en-ic{ background:#2F7EF7 !important; color:#FFFFFF !important; } /* Proposer mon aide = dégradé vert */ html.apprefonte body.page-entraide .ar-en-green{ background:linear-gradient(158deg, #114440 0%, #0C2A2C 82%) !important; border:1px solid rgba(58,210,154,.24) !important; } html.apprefonte body.page-entraide .ar-en-green .ar-en-ic{ background:#2FA877 !important; color:#FFFFFF !important; } /* --------------------------------------------------------------------------- FILTRES Toutes / Demandes / Offres — actif = pilule CYAN PLEINE. --------------------------------------------------------------------------- */ html.apprefonte body.page-entraide .en-filters .en-chip{ min-height:44px; padding:9px 16px !important; background:transparent !important; color:rgba(246,240,223,.72) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:999px !important; font:600 14px/1 'Inter',system-ui,sans-serif !important; } html.apprefonte body.page-entraide .en-filters .en-chip.is-selected, html.apprefonte body.page-entraide .en-filters .en-chip[aria-pressed="true"]{ background:#35D7D1 !important; color:#071624 !important; border-color:#35D7D1 !important; font-weight:700 !important; } /* =========================================================================== LISTE — ANNONCES EN CARTES HORIZONTALES (maquette 11). Cartes .en-card.ar-enc rendues par entraide.js (branche renderCardApp). =========================================================================== */ html.apprefonte body.page-entraide #enList{ display:flex !important; flex-direction:column; gap:12px; } html.apprefonte body.page-entraide .en-card.ar-enc{ display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:14px; background:#0D2233 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:16px !important; box-shadow:none !important; padding:14px !important; } /* Tuile catégorie (emoji, faute de photo — cf. photos à fournir) + légende. */ html.apprefonte body.page-entraide .ar-enc-photo{ flex:0 0 92px; display:flex; flex-direction:column; align-items:center; gap:6px; } html.apprefonte body.page-entraide .ar-enc-emoji{ width:92px; height:92px; border-radius:14px; display:grid; place-items:center; font-size:42px; line-height:1; border:1px solid rgba(255,255,255,.08); background:linear-gradient(160deg, rgba(53,215,209,.14), rgba(53,215,209,.03)); } html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="need"] .ar-enc-emoji{ background:linear-gradient(160deg, rgba(255,182,90,.18), rgba(255,182,90,.04)); border-color:rgba(255,182,90,.28); } html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-emoji{ background:linear-gradient(160deg, rgba(46,158,116,.20), rgba(46,158,116,.05)); border-color:rgba(90,211,162,.30); } html.apprefonte body.page-entraide .ar-enc-approx{ font:400 11px/1.2 'Inter',system-ui,sans-serif; color:rgba(246,240,223,.55); text-align:center; } /* Contenu droit : badge, titre, lignes de méta. */ html.apprefonte body.page-entraide .ar-enc-body{ flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:8px; } html.apprefonte body.page-entraide .ar-enc-badge{ align-self:flex-start; font:700 12px/1 'Inter',system-ui,sans-serif; padding:5px 12px; border-radius:999px; color:#FFB870; background:rgba(255,184,90,.12); border:1px solid rgba(255,184,90,.30); } html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-badge{ color:#5AD3A2; background:rgba(46,158,116,.14); border-color:rgba(90,211,162,.32); } html.apprefonte body.page-entraide .ar-enc-title{ margin:0; font:700 17px/1.25 'Inter',system-ui,sans-serif; color:#F6F0DF; } html.apprefonte body.page-entraide .ar-enc-lines{ display:flex; flex-direction:column; gap:4px; } html.apprefonte body.page-entraide .ar-enc-line{ font:400 13.5px/1.3 'Inter',system-ui,sans-serif; color:rgba(246,240,223,.62); } /* Actions : CTA CONDITIONNEL (Demande=ambre « Je peux aider » / Offre=vert « Voir »), aligné à droite comme la maquette. */ html.apprefonte body.page-entraide .ar-enc-actions{ display:flex !important; align-items:center; justify-content:flex-end; gap:8px; margin-top:6px; } html.apprefonte body.page-entraide .en-card.ar-enc .ar-enc-cta{ flex:0 0 auto; min-height:46px; min-width:104px; padding:0 22px !important; border-radius:12px !important; border:0 !important; box-shadow:none !important; font:700 15px/1 'Inter',system-ui,sans-serif !important; background:#E4972C !important; color:#FFFFFF !important; display:inline-flex; align-items:center; justify-content:center; } html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-cta{ background:#2E9E74 !important; color:#FFFFFF !important; } html.apprefonte body.page-entraide .en-card.ar-enc .ar-enc-ghost{ flex:0 0 auto; min-height:46px; min-width:46px; padding:0 12px !important; border-radius:12px !important; font-size:15px !important; background:transparent !important; color:rgba(246,240,223,.62) !important; border:1px solid rgba(255,255,255,.12) !important; } /* Formulaire de réponse inline sous la carte : pleine largeur (comportement et logique inchangés — on ne fait que le laisser occuper toute la ligne). */ html.apprefonte body.page-entraide .en-card.ar-enc .en-inline-form{ flex:1 1 100%; margin-top:6px; } } /* fin @media */