/* ============================================================
RIWA — direction "produit moderne" (aout 2026, 3e passe).
HISTORIQUE DES DEUX PASSES PRECEDENTES, pour ne pas y revenir :
1. Peau "emeraude arrondie" d'origine -> jugee "generee par IA".
Coupables : rayons de 28px partout, ombres portees douces sous
chaque bloc, tout en cartes blanches flottantes, degrades
emeraude/dore, grotesque geometrique par defaut.
2. Reaction "guide editorial" (serif Fraunces + fond parchemin
beige + filets fins) -> jugee VIEILLE. Le probleme : le serif
et le beige signent un registre patrimonial, pas un service
qu'on consulte tous les jours.
CE QUE FAIT CETTE 3e PASSE : viser franchement le moderne, quitte
a sacrifier la chaleur (arbitrage demande explicitement).
- COULEUR ASSUMEE. Chaque categorie a sa teinte vive (voir
COULEURS_PAR_SLUG cote serveur) injectee en variable --cat sur
les cartes, pastilles, fiches et en-tetes de categorie. C'est le
codage couleur qui rend le site vivant, et il est FONCTIONNEL :
on reconnait une categorie a sa couleur.
- CONTRASTE FORT. Hero et pied de page en panneau sombre presque
noir, arrondi ; le reste en blanc franc. Fini le camaieu beige.
- SURFACES PLEINES plutot que filets. Les blocs sont des aplats
gris tres clairs, sans bordure ni ombre : c'est le vocabulaire
des interfaces contemporaines (regroupements iOS/macOS).
- RAYONS GENEREUX (14-28px) et boutons en pilule.
POURQUOI CA NE RETOMBE PAS DANS LE RENDU "IA" : ce qui trahissait
la generation automatique n'etait pas l'arrondi en soi, c'etait sa
combinaison avec les ombres portees floues, le degrade vert/dore
omnipresent et l'absence de hierarchie. Ici : aucune ombre diffuse
(une seule ombre, tres serree, au survol), aucun degrade decoratif,
une echelle typographique tres contrastee, et une couleur qui
porte du sens plutot que de la decoration.
============================================================ */
:root {
/* --- Neutres. Gris franchement froids : c'est ce qui lit "moderne"
la ou le beige lisait "ancien". --- */
--noir: #0B0B10;
--noir-2: #16161D;
--ink: #0E0E14;
--ink-soft: #56566B;
/* Fonce par rapport a la 1re version de cette passe (#8E8EA3, ~3.2:1 sur blanc,
illisible sur les libelles/aide-champ en 11-13px) : vise ~5:1 pour rester lisible
tout en gardant un role "secondaire" clair face a --ink / --ink-soft. */
--ink-faint: #6E6E85;
--cream: #FFFFFF; /* fond de page */
--paper: #F4F5F9; /* aplat des blocs/cartes */
--paper-2: #EBECF2; /* aplat au survol */
--line: #E6E7EE;
--line-fort: #D5D7E1;
/* --- Couleur de marque + accents vifs. --cat est surchargee en
ligne par le serveur avec la couleur de la categorie courante. --- */
--vert: #00A06A;
--vert-fonce: #007A50;
--vert-clair: #E1F7EE;
--violet: #6C5CE7;
--corail: #FF6B35;
--rouge: #E5484D;
--cyan: #00B8D9;
--ambre: #F5A524;
--bleu: #3E63DD;
--cat: var(--vert);
--cat-voile: color-mix(in srgb, var(--cat) 10%, #fff);
/* Anciennes variables conservees : de nombreuses regles historiques
les utilisent encore (offres payantes, avertissements, admin). */
--emerald-950: #06120C;
--emerald-900: #0B2C1E;
--emerald-800: #0E4630;
--emerald-700: #007A50;
--emerald-600: #00A06A;
--emerald-500: #21C58A;
--emerald-100: #D6F3E6;
--emerald-50: #EFFBF6;
--terre-700: #C4441B;
--terre-600: #FF6B35;
--terre-500: #FF8A5E;
--terre-100: #FFE9DF;
--gold-700: #9A6B00;
--gold-600: #F5A524;
--gold-500: #FFC96B;
--gold-100: #FFF3DC;
--gold-ink: #8A5E00;
--amber-bg: #FFF7E6;
--amber-border: #FFE0A3;
--amber-ink: #8A5E00;
--amber-strong: #C77700;
--danger: #E5484D;
--danger-bg: #FFECEE;
--danger-fonce: #C7373B;
--radius-xl: 28px;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 10px;
--radius-pill: 999px;
/* Une seule ombre dans toute l'interface, tres serree, et uniquement
au survol : rien a voir avec les halos flous de la 1re version. */
--shadow-sm: none;
--shadow-md: none;
--shadow-hover: 0 6px 20px rgba(11, 11, 16, .10);
--shadow-lg: 0 40px 90px rgba(0, 0, 0, .5);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-titre: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { background: var(--cream); color-scheme: light; }
body { font-family: var(--font); font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--cream); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 700; letter-spacing: -.03em; }
/* Etat de focus visible (audit accessibilite, aout 2026) : le contour par defaut du
navigateur reste correct sur fond blanc uni, mais rend mal (contraste faible/invisible)
sur les pastilles/boutons colores (.filtre-chip, .nav-btn, cartes...) -- on definit donc un
contour explicite et coherent pour TOUT element interactif au clavier, sans jamais
supprimer le focus par defaut (:focus-visible seul, pas :focus, pour ne pas l'afficher
inutilement au clic souris). Les regles plus specifiques deja definies ailleurs
(ex. .hero .search input:focus) restent prioritaires la ou elles existent. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 4px;
}
/* Intitules en petites capitales : la seule "decoration" typographique du site. */
.type-small, .cat-block h3, .carte-offre h3, .feed-item-type, .timeline-date,
.timeline-type-badge, .annonce-type-badge {
font-family: var(--font); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
/* ---------- NAVIGATION : barre blanche, bouton d'action en pilule verte ---------- */
nav { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1200; }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
nav .logo { font-family: var(--font-titre); font-size: 26px; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -.05em; flex-shrink: 0; }
nav .logo span { color: var(--vert); }
nav .nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
nav .nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; margin-left: 8px; }
nav .nav-links a:hover { color: var(--ink); }
.nav-btn-texte-courte { display: none; }
.nav-burger { display: none; background: none; border: none; color: var(--ink); line-height: 1; cursor: pointer; padding: 4px 6px; }
.nav-burger svg { width: 26px; height: 26px; display: block; }
.nav-burger .ico-fermer { display: none; }
.nav-burger.nav-burger-ouvert .ico-burger { display: none; }
.nav-burger.nav-burger-ouvert .ico-fermer { display: block; }
.confirmation-banniere { margin: 24px auto 0; max-width: 1400px; }
@media (max-width: 480px) {
nav { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.nav-inner { padding: 14px 18px; gap: 8px; flex-wrap: nowrap; }
nav .logo { font-size: 23px; }
.nav-burger { display: block; position: relative; z-index: 1400; }
nav .nav-links {
/* Pas de width:100% ici (retire aout 2026, audit) : "inset: 0" fixe deja les bords
gauche et droit. Le width:100% se calculait sur la largeur DEFILABLE du document,
pas sur celle de l'ecran -- des qu'un autre element debordait ne serait-ce que de
quelques pixels, le menu s'elargissait d'autant et entretenait le debordement. */
display: flex; position: fixed; inset: 0; flex-direction: column; align-items: stretch; justify-content: flex-start;
background: #fff; padding: 84px 22px 28px; gap: 6px; height: 100dvh; margin-top: 0; box-shadow: none;
opacity: 0; visibility: hidden; overflow-y: auto; pointer-events: none;
transition: opacity .2s ease, visibility 0s linear .2s;
}
nav .nav-links.nav-links-ouvert { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
/* Selecteurs plus specifiques que .nav-btn / .nav-btn-secondary (definis plus bas avec
!important) : le menu mobile reste une liste d'aplats simples, quel que soit l'ordre
des regles dans le fichier. */
nav .nav-links a,
nav .nav-links a.nav-btn,
nav .nav-links a.nav-btn-secondary {
margin-left: 0 !important; font-family: var(--font-titre); font-size: 19px !important; font-weight: 600 !important; text-align: left; white-space: normal;
padding: 18px 20px !important; background: var(--paper) !important; border: none !important; border-radius: var(--radius-md) !important; color: var(--ink) !important;
}
nav .nav-links a.nav-btn { background: var(--vert) !important; color: #fff !important; }
.nav-btn-texte-longue { display: inline; }
.nav-btn-texte-courte { display: none; }
body.menu-mobile-ouvert { overflow: hidden; }
}
/* ---------- HERO : panneau sombre arrondi, gros titre tres serre ----------
C'est le geste le plus fort de cette version : un bloc presque noir pose
dans la page blanche. Aucun degrade -- un aplat franc. */
/* Bandeau d'accueil — septembre 2026.
Le noir pur sur 104px + 108px de marge interne occupait presque tout le premier ecran
et tapait dur a l'oeil. Deux corrections : un vert profond de marque a la place du noir
(meme lisibilite, beaucoup moins frontal, et ca rattache le bandeau a l'identite du
site au lieu de flotter dans un noir neutre), et une hauteur reduite d'environ 40 % --
le titre et la recherche restent au-dessus de la ligne de flottaison, mais la grille
des categories apparait desormais sans avoir a faire defiler. */
.hero { background: linear-gradient(165deg, #0E4630 0%, #0B2C1E 62%, #082217 100%); border-radius: var(--radius-xl); padding: 62px 40px 66px; text-align: center; color: #fff; max-width: 1400px; margin: 20px auto 0; }
.hero h1 { font-family: var(--font-titre); font-size: 60px; font-weight: 800; letter-spacing: -.05em; margin: 0 auto 18px; line-height: 1; max-width: 18ch; color: #fff; }
.hero h1 span { color: var(--emerald-500, #21C58A); }
.hero p { color: rgba(255,255,255,.72); font-size: 18px; margin: 0 auto; max-width: 52ch; line-height: 1.5; }
.hero .search, .search-page { max-width: 560px; margin: 24px auto 0; position: relative; }
.hero .search input { width: 100%; padding: 17px 22px 17px 48px; border-radius: var(--radius-pill); border: none; font-size: 15.5px; background: #fff; color: var(--ink); box-shadow: none; font-family: inherit; }
.search-page input { width: 100%; padding: 14px 18px; border-radius: var(--radius-md); border: none; background: var(--paper); font-size: 15px; color: var(--ink); margin: 12px 0; font-family: inherit; }
.hero .search input:focus, .search-page input:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.hero .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ink-faint); }
.resultats-count { color: var(--ink-faint); font-size: 14px; margin-bottom: 12px; }
/* En-tete de page categorie : aplat teinte de la couleur de la categorie. */
.type-hero { border-radius: var(--radius-lg); padding: 40px 36px 36px; margin-bottom: 30px; color: var(--ink); position: relative; background: var(--cat-voile); border: none; }
.type-hero h1 { color: var(--ink); margin-bottom: 10px; font-size: 46px; letter-spacing: -.045em; line-height: 1; }
.type-hero .type-intro-seo { color: var(--ink-soft); margin-bottom: 0; }
.type-hero .btn-retour-rond { background: #fff; color: var(--ink); border: none; }
.type-hero .btn-retour-rond:hover { background: var(--ink); color: #fff; }
.section { max-width: 1400px; margin: 64px auto; padding: 0 24px; }
.section h1 { font-size: 46px; font-weight: 800; letter-spacing: -.045em; margin-bottom: 18px; line-height: 1.02; }
.section h2 { font-size: 30px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 18px; line-height: 1.1; }
.section h3 { font-family: var(--font); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); margin: 26px 0 10px; }
/* flex-wrap (aout 2026, audit) : sans lui, un titre long + un bouton en white-space:nowrap
(ex. "Communauté" + "Voir l'actualité") depassaient la largeur de l'ecran sur mobile et
creaient un defilement horizontal parasite sur tout le site. Le bouton passe desormais a
la ligne au lieu de pousser hors cadre. min-width:0 autorise le titre a se reduire. */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.section-header > :first-child { min-width: 0; }
.section-title { font-family: var(--font-titre); font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
/* Mentions legales / confidentialite */
.page-legale { max-width: 760px; background: var(--paper); border: none; box-shadow: none; border-radius: var(--radius-lg); padding: 52px 54px 56px; }
.page-legale h1 { font-size: 40px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.045em; }
.page-legale-date { font-size: 13px; color: var(--ink-faint); margin: 0 0 34px; }
.page-legale h3 { font-family: var(--font-titre); font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: -.03em; color: var(--ink); margin: 36px 0 12px; padding-top: 0; border-top: none; }
.page-legale h3:first-of-type { margin-top: 0; }
.page-legale p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; }
.page-legale p:last-child { margin-bottom: 0; }
.page-legale strong { color: var(--ink); font-weight: 600; }
.page-legale a { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 2px; }
.page-legale a:hover { color: var(--ink); }
@media (max-width: 600px) { .page-legale { padding: 30px 22px 34px; } }
.fil-ariane { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 16px; }
.fil-ariane a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.fil-ariane a:hover { color: var(--ink); }
/* ---------- ANNUAIRE : blocs categorie en aplat, pastilles colorees ---------- */
#annuaire .search-page { margin: 16px 0 0; }
.cat-blocks-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 30px 0 36px; }
.cat-block { background: var(--paper); border: none; box-shadow: none; border-radius: var(--radius-lg); padding: 26px 24px; margin-bottom: 0; }
.cat-block h3 { margin: 0 0 16px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.soustype-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
/* Chaque pastille porte la couleur de sa categorie (variable --cat posee par le serveur). */
.soustype-pill { display: inline-block; padding: 9px 16px; background: #fff; border: none; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); transition: background .14s, color .14s; }
.soustype-pill:hover { background: var(--cat); color: #fff; transform: none; }
/* ---------- CARTES : aplats pleins, sans bordure ni ombre ---------- */
.une-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.une-card { display: block; background: var(--paper); border-radius: var(--radius-lg); border: none; box-shadow: none; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.une-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.une-card-contenu { padding: 24px 24px 26px; position: relative; }
/* Dore, et non plus la couleur de la categorie : les Decouvertes sont une mise en avant
exceptionnelle, elles doivent se distinguer des cartes ordinaires de l'annuaire. Texte
sombre sur fond dore -- du blanc sur ce jaune ne passe pas le contraste minimum. */
.une-card .type-small { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #3D2A00; background: var(--gold-600, #F5A524); padding: 5px 11px; border-radius: var(--radius-pill); margin-bottom: 14px; }
.une-card .nom { font-family: var(--font-titre); font-size: 24px; font-weight: 700; letter-spacing: -.038em; margin-bottom: 8px; line-height: 1.1; }
.une-card .desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.une-card-avec-photo img { display: block; width: 100%; height: 200px; object-fit: cover; }
/* Emplacement "A la une" non vendu : visible mais neutre, pour montrer la place libre. */
.une-card-vide { background: none; border: 2px dashed var(--line-fort); display: flex; align-items: center; justify-content: center; min-height: 190px; }
.une-card-vide:hover { transform: none; box-shadow: none; border-color: var(--vert); }
.lieux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 20px; }
.lieu-card { display: block; background: var(--paper); border-radius: var(--radius-md); padding: 20px 22px; border: none; box-shadow: none; text-decoration: none; color: var(--ink); transition: background .14s, transform .16s ease; }
.lieu-card:hover { background: var(--paper-2); transform: translateY(-2px); box-shadow: none; }
.lieu-card .nom { font-family: var(--font-titre); font-size: 18px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.03em; }
.lieu-card .adresse { font-size: 14px; color: var(--ink-soft); margin-bottom: 3px; }
.lieu-card .ville { font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.lieu-card-enseigne { background: var(--vert-clair); }
.lieu-card-enseigne .badge-enseigne { display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--vert); border: none; border-radius: var(--radius-pill); padding: 4px 10px; margin-bottom: 8px; }
.badge-annonce { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: var(--ink); border: none; border-radius: var(--radius-pill); padding: 5px 11px; }
.badge-fiche-pro-lock { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ink-faint); background: var(--paper); border: none; border-radius: var(--radius-pill); padding: 5px 11px; vertical-align: middle; margin-left: 6px; }
.bloc-fiche-pro-verrouille { background: var(--paper); border: none; border-radius: var(--radius-md); padding: 6px 18px 18px; margin-top: 16px; }
.bloc-fiche-pro-verrouille .aide-champ { margin-top: 6px; }
.bloc-fiche-pro-verrouille a { color: var(--vert-fonce); font-weight: 600; }
.fiche-enseigne .nb-adresses-enseigne { color: var(--ink-soft); font-size: 14.5px; margin: 8px 0 20px; }
.filtre-ville-enseigne-bloc { margin-bottom: 20px; }
.filtre-ville-enseigne-bloc label { font-size: 13.5px; color: var(--ink-soft); margin-right: 8px; }
.filtre-ville-enseigne-bloc select { padding: 10px 14px; border-radius: var(--radius-sm); border: none; background: var(--paper); font-family: inherit; }
.branches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.branche-card { background: var(--paper); border: none; box-shadow: none; border-radius: var(--radius-md); padding: 20px 22px; }
.branche-card .nom a { font-family: var(--font-titre); font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.03em; }
.branche-card .nom a:hover { color: var(--vert-fonce); }
.branche-card .adresse { font-size: 14px; color: var(--ink-soft); margin-top: 5px; }
.branche-card .ville { font-size: 13px; color: var(--ink-faint); font-weight: 500; margin-top: 3px; }
.branche-card .tel { font-size: 14px; margin-top: 5px; }
.branche-card .lien-itineraire-branche { display: inline-block; font-size: 13.5px; margin-top: 12px; color: var(--vert-fonce); text-decoration: none; font-weight: 600; }
.branche-card .lien-itineraire-branche:hover { text-decoration: underline; }
.lien-autres-adresses { margin-top: 14px; }
.lien-autres-adresses a { color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.lien-autres-adresses a:hover { text-decoration: underline; }
/* ---------- FICHE ETABLISSEMENT ---------- */
.type-badge { display: inline-block; padding: 6px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--cat); color: #fff; margin: 6px 0; }
.reco-badge { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; background: var(--ambre); color: #3D2A00; padding: 6px 12px; border-radius: var(--radius-pill); }
.description-avant { background: var(--cat-voile); border-radius: var(--radius-lg); padding: 26px 28px; margin: 6px 0 26px; }
.fiche-lieu .description-avant .description { background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; line-height: 1.7; color: var(--ink); font-size: 17.5px; font-weight: 500; max-width: 62ch; }
.description-avant .description-longue { margin: 16px 0 0; }
.fiche-lieu-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 24px; }
.fiche-lieu-badges .type-badge { margin: 0; }
.alerte-alcool { display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--amber-ink); background: var(--amber-bg); border: none; border-radius: var(--radius-md); padding: 12px 18px; margin: 0 0 20px; }
.info-certification-halal { display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--vert-fonce); background: var(--vert-clair); border: none; border-radius: var(--radius-md); padding: 11px 17px; margin: 0 0 20px; }
/* Certification halal non renseignee (aout 2026, audit). Volontairement NEUTRE, ni vert
(qui vaudrait validation) ni ambre (qui vaudrait alerte sur l'etablissement) : ce n'est
pas un reproche au commerce, c'est une information manquante chez nous. Un gris franc,
lisible, qui se distingue clairement du badge vert "Certifie halal". */
.info-halal-inconnue { display: block; max-width: 640px; font-size: 13.5px; line-height: 1.55; font-weight: 500; color: var(--ink-soft); background: var(--paper); border-left: 3px solid var(--line-fort); border-radius: var(--radius-md); padding: 12px 18px; margin: 0 0 20px; }
.bloc-horaires { margin: 26px 0; padding: 24px 26px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: none; }
.bloc-horaires h3 { font-family: var(--font); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); margin: 0 0 12px; }
.horaire-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.horaire-ligne:last-child { border-bottom: none; }
.horaire-ligne span:first-child { font-weight: 500; color: var(--ink-soft); }
.grille-horaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 16px; margin: 8px 0 4px; }
.grille-horaires label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.grille-horaires input, .grille-horaires select { margin-top: 4px; }
.horaire-iqama { font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.horaire-note-calcul { margin: 14px 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.horaire-mawaqit { margin: 8px 0 0; font-size: 13.5px; }
.horaire-mawaqit a { font-weight: 600; }
.badge-partenaire { display: inline-flex; align-items: center; margin-left: 8px; font-size: 12px; background: var(--gold-600); color: #3D2A00; padding: 6px 13px; border-radius: var(--radius-pill); font-weight: 600; border: none; }
.badge-priorite { display: inline-block; font-size: 11px; font-weight: 600; color: #3D2A00; background: var(--gold-500); border: none; border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap; }
.fiche-lieu-reseaux { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 24px; }
.reseau-lien { display: inline-block; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; text-decoration: none; background: var(--paper); border: none; color: var(--ink); }
.reseau-lien:hover { background: var(--ink); color: #fff; }
.description-longue { background: var(--paper); border: none; border-left: none; box-shadow: none; border-radius: var(--radius-lg); padding: 26px 28px; margin: 0 0 28px; line-height: 1.75; color: var(--ink-soft); font-size: 16px; max-width: none; }
.lieu-photo-principale { position: relative; margin-bottom: 24px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: none; border: none; cursor: zoom-in; }
/* height (pas max-height) : audit QA aout 2026 -- sans hauteur reservee, l'![]()
occupe une boite de 0px avant chargement et le navigateur ne declenche jamais son
chargement/affichage sur une fiche reelle (repro constatee sur Chrome desktop, photo
jamais visible meme apres plusieurs minutes). Meme cause que sur .une-card-avec-photo img,
qui a une hauteur fixe et ne presente pas ce probleme. */
.lieu-photo-principale img { display: block; width: 100%; height: 380px; object-fit: cover; }
/* Septembre 2026 : les photos au-dela de la couverture ne sont plus affichees en ligne
(elles faisaient deborder la colonne photos par rapport a la colonne carte a cote) --
seule cette pastille indique qu'il y en a d'autres, accessibles via la visionneuse. */
.lieu-photo-compteur { position: absolute; right: 14px; bottom: 14px; background: rgba(11, 11, 16, .72); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); pointer-events: none; }
.fiche-lieu-infos { background: var(--paper); border: none; box-shadow: none; border-radius: var(--radius-lg); padding: 6px 24px; margin-bottom: 24px; }
.info-ligne { display: flex; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.info-ligne:last-child { border-bottom: none; }
.info-icone { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-sm); color: var(--cat); }
.ico { width: 17px; height: 17px; display: block; }
.btn-itineraire .ico { width: 14px; height: 14px; }
.branche-card .tel .ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; color: var(--ink-faint); }
.info-texte { flex: 1; font-size: 15.5px; color: var(--ink); }
.info-lien { color: var(--ink); text-decoration: none; font-weight: 500; }
.info-lien:hover { color: var(--vert-fonce); text-decoration: underline; }
.info-ligne .btn-itineraire { flex-shrink: 0; }
.btn-itineraire { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border: none; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: var(--radius-pill); white-space: nowrap; }
.btn-itineraire:hover { background: var(--vert); }
#mini-map { height: 380px; border-radius: var(--radius-lg); margin-top: 18px; box-shadow: none; border: none; overflow: hidden; }
#carte-globale { height: 560px; border-radius: var(--radius-lg); margin-top: 36px; box-shadow: none; border: none; position: relative; overflow: hidden; z-index: 1; }
.pagination { display: flex; gap: 20px; align-items: center; margin-top: 26px; font-size: 14.5px; }
.pagination a { color: var(--vert-fonce); text-decoration: none; font-weight: 600; }
.pagination a:hover { text-decoration: underline; }
/* CTA COMMERCANTS — note discrete en pied de page. */
.cta-box { background: var(--paper); border: none; border-top: none; border-radius: var(--radius-lg); padding: 32px 34px; text-align: left; color: var(--ink); }
.cta-box h2 { font-family: var(--font-titre); font-size: 24px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.03em; }
.cta-box h3 { font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); margin: 0 0 8px; padding-top: 0; border-top: none; text-transform: uppercase; letter-spacing: .09em; }
.cta-box p { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; max-width: 56ch; margin-left: 0; margin-right: 0; line-height: 1.6; }
.cta-btn { display: inline-block; padding: 14px 28px; background: var(--vert); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; text-decoration: none; }
.cta-btn:hover { background: var(--vert-fonce); }
.contact-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 940px; margin: 36px auto 0; text-align: left; border-top: none; }
.contact-hub-card { position: relative; overflow: hidden; background: var(--paper); border: none; border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: none; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; }
.contact-hub-card::before { content: none; }
.contact-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.contact-hub-card .type-badge { align-self: flex-start; margin: 0 0 16px; background: var(--vert); color: #fff; }
.contact-hub-card-organisme .type-badge { background: var(--violet); }
.contact-hub-card h2 { font-size: 25px; font-weight: 700; margin: 0 0 12px; color: var(--ink); line-height: 1.15; letter-spacing: -.035em; }
.contact-hub-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 26px; flex-grow: 1; }
/* Le bouton heritait de .btn-lien { white-space: nowrap } : dans une carte etroite, un
libelle long ("Demander a figurer dans les Decouvertes") depassait le cadre et se faisait
couper par l'overflow: hidden de la carte -- le texte devenait illisible. Le bouton prend
desormais toute la largeur de la carte et le libelle peut passer a la ligne. */
.contact-hub-card .btn-lien { align-self: stretch; justify-content: center; text-align: center; white-space: normal; }
.contact-hub-lien { font-size: 15px; font-weight: 600; color: var(--vert-fonce); text-decoration: none; }
.contact-hub-lien:hover { text-decoration: underline; }
/* Barre d'actions de l'onglet "Voir ma fiche" (espace etablissement) : deplacee juste
sous les badges, avant photo/description, pour ne plus ressembler a des boutons
d'action rattaches au paragraphe de description qui les precedait auparavant. */
.apercu-fiche-actions { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
/* Bouton secondaire generique. Meme correctif que .choix-cible-option juste au-dessus :
fond blanc + bordure plutot que "background: var(--paper)" sur fond deja --paper. */
.btn-lien { display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--ink); background: #fff; border: 1.5px solid var(--line-fort); padding: 11px 21px; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.btn-lien:hover { background: var(--ink); color: #fff; }
.type-badge-bleu { background: var(--violet); color: #fff; }
.type-badge-or { background: var(--gold-600, #F5A524); color: #3D2A00; }
/* Plus specifique que la regle generique .contact-hub-card .type-badge, qui sinon
repasserait ce badge en vert. */
.contact-hub-card .type-badge-or { background: var(--gold-600, #F5A524); color: #3D2A00; }
/* ---------- FORMULAIRES ---------- */
/* background #fff + bordure (et non "background: var(--paper)" + "border: none" comme
avant) : ce bouton s'affiche presque toujours a l'interieur d'un panneau deja colore en
--paper (.admin-panel, .espace-entree-col...) et devenait invisible, absorbe dans le fond --
ne restait visible que son texte en gras, sans aucun repere de bouton. */
.choix-cible-option { display: inline-flex; align-items: center; gap: 8px; padding: 13px 21px; background: #fff; border: 1.5px solid var(--line-fort); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .14s, border-color .14s; }
.choix-cible-option:hover { background: var(--paper-2); }
.choix-cible-option:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); color: var(--vert-fonce); }
/* Variante pour une action destructrice (ex : suppression de compte) -- meme forme que
.choix-cible-option pour rester coherent visuellement, mais couleur --danger pour signaler
clairement qu'il ne s'agit pas d'une action anodine comme "Changer mon mot de passe". */
.choix-cible-option-danger { display: inline-flex; align-items: center; gap: 8px; padding: 13px 21px; background: #fff; border: 1.5px solid var(--danger); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; color: var(--danger); cursor: pointer; text-decoration: none; transition: background .14s, border-color .14s; }
.choix-cible-option-danger:hover { background: var(--danger-bg); }
/* Suggestions d'autocompletion (sept. 2026, voir le script dans page()) : une rangee de
boutons juste sous le champ concerne, dans le flux normal du formulaire -- pas une liste
flottante superposee, pour eviter tout probleme de positionnement selon le formulaire. Vide
par defaut (:empty), elle ne prend donc aucune place tant que rien n'a ete tape. */
/* Liste de suggestions (nom d'etablissement / adresse) : un vrai menu deroulant compact,
classees par pertinence (le meilleur resultat en premier), pas une rangee de gros boutons
pill verts -- ".form-commercant button" ciblait par erreur ces boutons generes en JS et
leur donnait le style du bouton d'envoi du formulaire (sept. 2026). */
.autocomplete-resultats { display: flex; flex-direction: column; margin-top: 2px; margin-bottom: 4px; background: #fff; border: 1.5px solid var(--line-fort); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-hover, 0 8px 20px -12px rgba(11,44,30,.25)); }
.autocomplete-resultats:empty { display: none; border: none; box-shadow: none; }
.form-commercant .autocomplete-resultats button.autocomplete-option,
button.autocomplete-option {
display: block; width: 100%; margin-top: 0; padding: 10px 14px; background: #fff; color: var(--ink);
border: none; border-top: 1px solid var(--line); border-radius: 0; font-size: 13.5px; font-weight: 500;
font-family: inherit; line-height: 1.4; cursor: pointer; text-align: left; transition: background .12s;
}
.autocomplete-resultats button.autocomplete-option:first-child { border-top: none; }
.form-commercant .autocomplete-resultats button.autocomplete-option:hover,
button.autocomplete-option:hover { background: var(--paper-2); }
.type-etablissement-option { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; background: var(--paper); border: 2px solid transparent; border-radius: var(--radius-md); font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; margin-bottom: 8px; }
.type-etablissement-option:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); color: var(--vert-fonce); }
.type-etablissement-option input { margin-top: 3px; }
.aide-champ-inline { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.bloc-deja-ref-non { margin-top: 8px; padding: 20px 22px; background: var(--paper); border: none; border-radius: var(--radius-md); }
.bloc-deja-ref-non p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 14px; }
.form-commercant { display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin: 26px auto 0; text-align: left; }
.form-commercant label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* border : var(--line-fort) et non "none" -- ces champs partagent la meme couleur de fond
(--paper) que les panneaux qui les contiennent (.admin-panel notamment) et disparaissaient
litteralement dedans, sans aucun moyen de reperer les limites d'un champ. Le filet resout
ca quel que soit le fond derriere (panneau gris ou page blanche). */
.form-commercant input, .form-commercant textarea, .form-commercant select { padding: 13px 15px; border: 1.5px solid var(--line-fort); border-radius: var(--radius-md); font-size: 15px; font-family: inherit; background: var(--paper); color: var(--ink); font-weight: 400; }
.form-commercant input:focus, .form-commercant textarea:focus, .form-commercant select:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.form-commercant button { margin-top: 30px; padding: 16px; background: var(--vert); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 15.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .14s; }
.form-commercant button:hover { background: var(--vert-fonce); }
/* Variante rouge pleine (aout 2026) : meme gabarit que .form-commercant button (pill,
padding, poids de police) mais couleur --danger -- utilisee uniquement pour une action
destructive finale et irreversible (ex. suppression de compte), la ou .choix-cible-option-danger
(contour, plus discret) sert d'entree vers cette action. */
.form-commercant .btn-danger-plein { background: var(--danger); }
.form-commercant .btn-danger-plein:hover { background: var(--danger-fonce); }
.form-erreur { color: var(--danger); background: var(--danger-bg); border: none; padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14.5px; }
.form-avertissement { color: var(--amber-ink); background: var(--amber-bg); border: none; padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 16px; text-align: left; font-size: 14.5px; }
.form-avertissement p { margin: 2px 0; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
/* ---------- PIED DE PAGE : panneau sombre arrondi, en echo du hero ---------- */
footer { flex-shrink: 0; background: var(--noir); color: #8E8EA3; padding: 40px 34px; margin: 64px auto 20px; max-width: 1400px; width: calc(100% - 40px); border-radius: var(--radius-xl); font-size: 13px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.footer-copyright { margin: 0; font-size: 13px; color: #6E6E82; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 0; }
.footer-links a { color: #C4C4D4; text-decoration: none; font-size: 13.5px; font-weight: 500; }
.footer-links a:hover { color: var(--vert); }
.footer-social { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0; }
.footer-social-label { font-size: 13px; color: #6E6E82; }
.footer-social a { color: #C4C4D4; display: inline-flex; }
.footer-social a:hover { color: var(--vert); }
@media (max-width: 640px) {
footer { justify-content: center; text-align: center; padding: 32px 22px; }
.footer-social { justify-content: center; }
}
/* Galerie et lightbox photos */
.article-images-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.article-images-galerie img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-md); cursor: zoom-in; transition: opacity .15s; }
.article-images-galerie img:hover { opacity: .85; }
.lightbox-article { position: fixed; inset: 0; background: rgba(11, 11, 16, .96); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 60px 20px 20px; }
.lightbox-article[hidden] { display: none; }
.lightbox-article img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); cursor: default; }
.lightbox-retour { position: fixed; top: 18px; left: 18px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink); border: none; border-radius: 50%; font-weight: 600; font-size: 19px; line-height: 1; cursor: pointer; z-index: 2001; box-shadow: none; }
.lightbox-retour:hover { background: var(--vert); color: #fff; }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink); border: none; border-radius: 50%; font-weight: 600; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2001; box-shadow: none; }
.lightbox-nav:hover { background: var(--vert); color: #fff; }
.lightbox-nav-prec { left: 18px; }
.lightbox-nav-suiv { right: 18px; }
.lightbox-compteur { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .15); padding: 6px 14px; border-radius: var(--radius-pill); z-index: 2001; }
@media (max-width: 480px) { .lightbox-nav { width: 40px; height: 40px; font-size: 20px; } .lightbox-nav-prec { left: 8px; } .lightbox-nav-suiv { right: 8px; } }
/* display: flex (et non inline-flex) : garde ce bouton colle a gauche meme dans un
conteneur centre au texte (.form-section) -- bug recurrent de la fleche recentree. */
.btn-retour-rond { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: none; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 600; margin-bottom: 16px; transition: background .14s, color .14s; }
.btn-retour-rond:hover { background: var(--ink); color: #fff; }
@media (max-width: 480px) { .lightbox-retour { top: 10px; left: 10px; width: 40px; height: 40px; } }
.images-existantes-admin { margin: 10px 0; }
.images-existantes-admin p { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.photo-couverture-bloc { margin: 10px 0 4px; }
.photo-couverture-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.photo-couverture-label .aide-champ-inline { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); margin-top: 3px; }
.photo-couverture-existante { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.photo-couverture-existante img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--radius-md); border: 2px solid var(--vert); }
.miniatures-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.miniature-admin { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.miniature-admin-numero { font-size: 10.5px; font-weight: 600; color: #fff; background: var(--ink); border: none; padding: 3px 9px; border-radius: var(--radius-pill); }
.aide-champ { font-size: 13px; color: var(--ink-faint); line-height: 1.55; margin: -4px 0 4px; font-weight: 400; }
.aide-champ code { background: var(--paper); padding: 2px 7px; border-radius: 5px; font-size: 11.5px; }
.champ-requis { display: contents; color: var(--danger); font-weight: 600; }
.bloc-verif-telephone { background: var(--paper); border: none; border-radius: var(--radius-md); padding: 18px; margin: -4px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.btn-verif-tel { align-self: flex-start; padding: 11px 20px; background: #fff; border: none; color: var(--vert-fonce); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }
.btn-verif-tel:hover { background: var(--vert); color: #fff; }
.btn-verif-tel:disabled { opacity: 0.5; cursor: default; }
.bloc-verif-telephone .aide-champ { margin: 0; }
.legende-obligatoire { font-size: 12.5px; color: var(--ink-faint); margin: -6px 0 14px; }
.liste-fichiers-joints { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.liste-fichiers-joints li { display: flex; align-items: center; gap: 6px; background: var(--paper); border: none; border-radius: var(--radius-pill); padding: 6px 8px 6px 14px; font-size: 12.5px; max-width: 220px; }
.liste-fichiers-joints li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-fichiers-joints li button { flex-shrink: 0; border: none; background: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; cursor: pointer; font-size: 12px; color: var(--ink-faint); padding: 0; }
.liste-fichiers-joints li button:hover { background: var(--danger-bg); color: var(--danger); }
.miniature-admin img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: none; }
.miniature-admin-supprimer { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--danger); }
.miniature-admin:has(input:checked) img { opacity: .4; outline: 2px solid var(--danger); }
@media (max-width: 1000px) { .hero h1 { font-size: 48px; } }
@media (max-width: 768px) {
.hero { padding: 48px 26px 52px; }
.hero h1 { font-size: 40px; letter-spacing: -.045em; }
.section h1 { font-size: 34px; }
.type-hero h1 { font-size: 34px; }
}
@media (max-width: 480px) {
.une-grid, .lieux-grid, .cat-blocks-row { grid-template-columns: 1fr; }
.hero { padding: 38px 20px 42px; margin: 12px auto 0; border-radius: var(--radius-lg); }
.hero h1 { font-size: 33px; }
.hero p { font-size: 16px; }
.section { padding: 0 18px; margin: 44px auto; }
.cta-box, .intro-banner { padding: 24px 20px; }
footer { border-radius: var(--radius-lg); }
}
/* ---------- ADMIN ---------- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--paper); border-radius: var(--radius-md); overflow: hidden; box-shadow: none; }
.admin-table th, .admin-table td { padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; vertical-align: top; }
.admin-table th { background: none; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.demande-traitee { opacity: .5; }
.form-marquer-inline { display: inline; margin: 0; }
.input-raison-blocage { width: 130px; padding: 7px 11px; font-size: 12px; border: none; background: #fff; border-radius: var(--radius-sm); margin-right: 6px; vertical-align: middle; font-family: inherit; }
.lien-marquer-traite { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--vert-fonce); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.lien-marquer-traite:hover { color: var(--ink); }
.lien-supprimer-demande { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--danger); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.lien-supprimer-demande:hover { color: #a5252a; }
.cellule-actions { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.lien-creer-fiche { font-size: 12px; font-weight: 600; color: var(--vert-fonce); text-decoration: underline; }
.lien-creer-fiche:hover { color: var(--ink); }
.lien-repondre-email { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: var(--vert); padding: 7px 14px; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; }
.lien-repondre-email:hover { background: var(--vert-fonce); }
.bloc-mise-en-avant { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.badge-en-avant { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #3D2A00; background: var(--gold-500); border: none; padding: 4px 10px; border-radius: var(--radius-pill); }
.badge-certificat-expire { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--danger); border: none; padding: 4px 10px; border-radius: var(--radius-pill); display: inline-block; }
.form-mise-en-avant-definir { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.form-mise-en-avant-definir input[type="date"] { font-size: 12px; padding: 6px 10px; border: none; background: #fff; border-radius: var(--radius-sm); font-family: inherit; }
.form-mise-en-avant-definir button { font-size: 12px; font-weight: 600; color: #3D2A00; background: var(--gold-500); border: none; padding: 7px 13px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; font-family: inherit; }
.form-mise-en-avant-definir button:hover { background: var(--gold-600); }
.demandes-traitees-details { margin-top: 12px; }
/* Cartes de demandes (admin, septembre 2026) : remplace les anciennes lignes de tableau
.admin-table, trop denses (tout sur une seule ligne, actions "accepter/supprimer"
melees au texte) pour permettre une vraie lecture. Chaque demande est une carte
autonome, regroupee d'abord par type de demande (ajout, signalement, communaute...)
puis en sous-groupe par categorie d'etablissement quand ca aide (regrouperDemandesParCategorie
cote serveur ne cree un sous-groupe que s'il y a au moins 2 categories distinctes). */
.demande-groupe { margin-top: 22px; }
.demande-groupe:first-child { margin-top: 4px; }
.demande-groupe-titre { display: flex; align-items: center; gap: 9px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.demande-groupe-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--paper); color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.demandes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.demande-carte { background: var(--paper); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.demande-carte-traitee { opacity: .55; }
.demande-carte-traitee:hover { opacity: 1; }
.demande-carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.demande-carte-date { font-size: 12px; color: var(--ink-faint); }
.demande-champs { display: flex; flex-direction: column; gap: 7px; }
.demande-champ { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; line-height: 1.45; }
.demande-champ-label { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.demande-champ-valeur { color: var(--ink); font-weight: 500; }
.demande-champ-valeur a { color: var(--vert-fonce); }
.demande-description { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 2px 0 0; background: #fff; border-radius: var(--radius-sm); padding: 10px 13px; }
.demande-pieces { font-size: 12.5px; margin: 0; }
.demande-pieces a { color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.demande-pieces a:hover { text-decoration: underline; }
.demande-mentions { font-size: 12.5px; color: var(--ink-faint); margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demande-carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Action principale (verifier/publier) : seule mise en avant visuellement, c'est
l'action que l'admin doit faire dans l'immense majorite des cas. */
.demande-carte-actions .lien-creer-fiche { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: var(--vert); padding: 9px 16px; border-radius: var(--radius-pill); text-decoration: none; }
.demande-carte-actions .lien-creer-fiche:hover { background: var(--vert-fonce); }
.demande-carte-actions .lien-repondre-email { padding: 9px 16px; }
/* Marquer traite / supprimer : actions secondaires, delibnerement plus discretes et
separees a droite pour eviter un clic accidentel sur "supprimer" juste apres "accepter". */
.demande-carte-actions { gap: 8px; }
/* La suppression est repoussee a droite : c'est la seule action irreversible de la
carte, elle ne doit pas se trouver sous le pouce a cote de « valider ». */
.demande-carte-actions form[action$="/supprimer"] { margin-left: auto; }
.demande-recap { background: var(--vert-clair); color: var(--vert-fonce); border-radius: var(--radius-md); padding: 13px 16px; margin: -4px 0 18px; }
@media (max-width: 480px) {
.demandes-grille { grid-template-columns: 1fr; }
.demande-carte-actions .form-marquer-inline { margin-left: 0; }
}
.section-offres-etablissement { margin: 4px 0 26px; }
.grille-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; align-items: stretch; }
@media (max-width: 720px) { .grille-offres { grid-template-columns: 1fr; } }
/* Cartes tarifaires : volontairement discretes -- Riwa reste un annuaire communautaire
avant tout, ces offres ne doivent pas dominer l'espace etablissement. */
.carte-offre { position: relative; border: none; border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); }
.carte-offre-active { background: var(--vert-clair); }
.carte-offre-fiche-pro { border-top: 3px solid var(--gold-600); }
.carte-offre-une { border-top: 3px solid var(--vert); }
.carte-offre-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.carte-offre h3 { font-family: var(--font); font-size: 11px; margin: 0; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--ink-faint); }
.carte-offre-fiche-pro h3 { color: var(--gold-700); }
.carte-offre-une h3 { color: var(--vert-fonce); }
.carte-offre-prix-bloc { margin: 2px 0 4px; }
.carte-offre-prix-principal { font-family: var(--font-titre); font-size: 38px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.045em; }
.carte-offre-prix-principal .unite { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-faint); margin-left: 4px; letter-spacing: 0; }
.carte-offre-prix-alt { font-size: 13px; color: var(--ink-faint); font-weight: 400; margin-top: 7px; }
.carte-offre-avantages { list-style: none; display: flex; flex-direction: column; gap: 11px; flex-grow: 1; margin: 6px 0 0; }
.carte-offre-avantages li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.carte-offre-avantages li::before { content: '✓'; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--vert-fonce); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.carte-offre-fiche-pro .carte-offre-avantages li::before { color: var(--gold-700); }
.carte-offre-une .carte-offre-avantages li::before { color: var(--vert-fonce); }
.fiche-lieu-actions-pro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn-offre { display: inline-block; text-align: center; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--vert); padding: 14px 24px; border-radius: var(--radius-pill); text-decoration: none; }
.btn-offre:hover { background: var(--vert-fonce); }
.btn-offre-secondaire { background: var(--paper); color: var(--ink); border: none; }
.btn-offre-secondaire:hover { background: var(--ink); color: #fff; }
.carte-offre-boutons { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.carte-offre-boutons .btn-offre { font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; padding: 13px 16px; }
.carte-offre-boutons .btn-offre:hover { background: var(--ink); color: #fff; }
/* Vitrine des offres sur /espace-etablissement (page publique) : ici les cartes servent
a donner envie, contrairement a celles de l'onglet de gestion. */
.bloc-offres-vitrine { margin-top: 56px !important; padding-top: 44px; border-top: 1px solid var(--line); }
.grille-offres-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; gap: 22px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .grille-offres-2 { grid-template-columns: 1fr; } }
.bloc-offres-vitrine .carte-offre { background: var(--paper); box-shadow: none; border: none; text-align: left; padding: 38px 34px; gap: 18px; border-radius: var(--radius-xl); }
.bloc-offres-vitrine .carte-offre-fiche-pro { border-top: 4px solid var(--gold-600); }
.bloc-offres-vitrine .carte-offre-une { border-top: 4px solid var(--vert); }
.bloc-offres-vitrine .carte-offre h3 { font-size: 12px; }
.bloc-offres-vitrine .carte-offre-prix-principal { font-size: 50px; }
.bloc-offres-vitrine .carte-offre-prix-alt { font-size: 13.5px; }
.bloc-offres-vitrine .carte-offre-avantages { gap: 13px; margin-top: 10px; }
.bloc-offres-vitrine .carte-offre-avantages li { font-size: 15px; }
.bloc-offres-vitrine .carte-offre-avantages li::before { width: 22px; height: 22px; font-size: 12px; }
@media (max-width: 480px) { .bloc-offres-vitrine .carte-offre { padding: 26px 22px; } }
/* ============================================================
LA FICHE PRO (septembre 2026, refonte complete)
L'ancienne version empilait des blocs blancs sur fond blanc : plus
aucun "encadre" ne se lisait, et les six avantages s'etalaient en
paragraphes que personne ne parcourt.
Ce qui change : un PANNEAU vert profond avec son propre fond, pose
franchement sur la page. Deux couleurs et deux seulement -- le vert
de la marque, le dore pour ce qui est payant. Les avantages sont
reduits a leur titre, en deux colonnes, lisibles d'un seul regard.
Le prix vient apres : on comprend d'abord ce qu'on achete.
============================================================ */
.fp-page { max-width: 760px; margin: 48px auto 72px; }
.fp-panneau {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
padding: 52px 44px 40px;
background:
radial-gradient(120% 90% at 50% -10%, #12472F 0%, transparent 62%),
linear-gradient(168deg, #0B2C1E 0%, #071A12 100%);
color: #fff;
border: 1px solid rgba(245, 165, 36, .22);
}
/* Voile dore tres diffus en haut du panneau : c'est lui qui donne la
chaleur, sans ajouter ni degrade decoratif ni ombre portee. */
.fp-halo {
position: absolute;
top: -180px; left: 50%;
width: 520px; height: 360px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(245, 165, 36, .30) 0%, transparent 68%);
pointer-events: none;
}
.fp-entete { position: relative; text-align: center; margin-bottom: 34px; }
.fp-titre {
font-family: var(--font-titre);
font-size: 52px; font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
margin: 0 0 14px; color: #fff;
}
.fp-titre-or {
background: linear-gradient(100deg, #FFD98A 0%, #F5A524 48%, #FFC96B 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: #F5A524;
}
.fp-tagline { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .74); margin: 0; }
.fp-avantages {
position: relative;
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .10);
}
.fp-avantage { display: flex; align-items: flex-start; gap: 11px; }
.fp-coche { flex-shrink: 0; color: #F5A524; font-size: 13px; line-height: 1.55; }
.fp-avantage-texte { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.fp-avantage-texte .avantage-fort { color: #fff; font-weight: 600; }
.fp-prix {
position: relative;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
margin-top: 36px; padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.fp-prix-option {
position: relative;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .04);
padding: 22px 20px;
display: flex; flex-direction: column; gap: 3px;
}
.fp-prix-vedette { border-color: rgba(245, 165, 36, .55); background: rgba(245, 165, 36, .10); }
.fp-prix-ruban {
position: absolute; top: -11px; left: 18px;
background: #F5A524; color: #0B2C1E;
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
padding: 4px 11px; border-radius: var(--radius-pill);
}
.fp-prix-montant { font-family: var(--font-titre); font-size: 34px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.fp-prix-periode { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.fp-prix-note { font-size: 12px; color: rgba(255, 255, 255, .48); margin-top: 3px; }
/* Sept. 2026 : l'offre est reservee aux commerces, le dire ici evite qu'une mosquee
arrive sur cette page en croyant devoir payer ce qu'elle a deja. */
.fp-destinataire { margin: 14px auto 0; max-width: 60ch; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.fp-mention { position: relative; margin: 22px 0 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .45); }
@media (max-width: 620px) {
.fp-panneau { padding: 40px 24px 32px; }
.fp-titre { font-size: 38px; }
.fp-avantages { grid-template-columns: 1fr; gap: 13px; }
.fp-prix { grid-template-columns: 1fr; gap: 18px; }
}
/* Etat du certificat halal dans l'espace etablissement (sept. 2026) :
le gerant doit savoir, avant de televerser quoi que ce soit, ce que
sa fiche affiche aujourd'hui au public. */
.certificat-etat { font-size: 13px; line-height: 1.55; border-radius: var(--radius-md); padding: 11px 14px; margin: 4px 0 10px; }
.certificat-etat-ok { background: var(--emerald-50, #EFFBF6); color: var(--emerald-700, #007A50); border: 1px solid var(--emerald-100, #D6F3E6); }
.certificat-etat-attente { background: var(--amber-bg, #FFF7E6); color: var(--amber-ink, #8A5E00); border: 1px solid var(--amber-border, #FFE0A3); }
.certificat-etat-manquant { background: var(--paper, #F4F5F9); color: var(--ink-soft); border: 1px solid var(--line, #E6E7EE); }
.demandes-traitees-details summary { cursor: pointer; font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.admin-message-ok { background: var(--vert-clair); border: none; color: var(--vert-fonce); padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14.5px; font-weight: 500; }
.admin-liens-outils { font-size: 14px; margin-bottom: 12px; }
.admin-liens-outils a { color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.admin-liens-outils a:hover { text-decoration: underline; }
.form-admin-lieu { max-width: 680px; }
.label-case { flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; font-weight: 400 !important; text-align: left !important; font-size: 14.5px !important; color: var(--ink) !important; }
.label-case input { width: auto; margin-top: 3px; flex-shrink: 0; }
/* text-align: left ici (et pas seulement herite) : dans un .form-section (text-align:
center), un texte de case a cocher sur plusieurs lignes se retrouvait centre ligne par
ligne -- illisible. Le texte d'une case part toujours du bord gauche. */
.label-case span { flex: 1; text-align: left; }
/* Boutons du hero annuaire */
.hero-nav-btns { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.hero-btn { display: inline-block; padding: 13px 24px; background: rgba(255,255,255,.12); border: none; border-radius: var(--radius-pill); color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 600; }
.hero-btn:hover { background: #fff; color: var(--ink); }
/* SECTION "A LA UNE" */
.section-une { padding: 0 24px; }
.section-une h2 { font-size: 30px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); margin-bottom: 0; }
.section-une-titre { margin-bottom: 0 !important; }
.voir-tout-lien { font-size: 14.5px; font-weight: 600; color: var(--vert-fonce); text-decoration: none; white-space: nowrap; }
/* 3 colonnes fixes : les emplacements "A la une" non vendus doivent rester visibles.
En auto-fit, deux fiches s'etalaient sur toute la largeur et la place libre
disparaissait -- or c'est elle qui donne envie de la reserver. */
.une-grid-large { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .une-grid-large { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .une-grid-large { grid-template-columns: 1fr; } }
.une-grid-large .une-card-contenu { padding: 26px 26px 28px; }
.une-grid-large .une-card .nom { font-size: 26px; }
.une-grid-large .une-card .desc { font-size: 15px; }
.une-grid-large .une-card-avec-photo img { height: 210px; }
/* Mobile : les cartes Decouvertes prenaient presque tout l'ecran (photo de 210px + 26px de
marge + un titre de 26px), au point qu'une seule tenait dans la fenetre -- on ne voyait
donc jamais qu'il y en avait trois. Tout est ramene a une taille de vignette : la photo
reste l'element dominant, mais la carte suivante depasse en bas de l'ecran et invite a
faire defiler. */
@media (max-width: 600px) {
.une-grid-large { gap: 14px; }
.une-grid-large .une-card-contenu { padding: 16px 18px 18px; }
.une-grid-large .une-card .nom { font-size: 20px; }
.une-grid-large .une-card .desc { font-size: 14px; }
.une-grid-large .une-card-avec-photo img { height: 150px; }
.une-grid-large .une-card .type-small { margin-bottom: 10px; }
.une-card-contenu { padding: 16px 18px 18px; }
.une-card .nom { font-size: 20px; }
.une-card-avec-photo img { height: 150px; }
.une-card-vide { min-height: 120px; }
}
.section-communaute { margin-top: 56px; }
.communaute-card { background: var(--paper); }
.communaute-card .type-small { background: var(--vert); }
.section-communaute-intro { font-size: 17px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; margin: -4px 0 26px; }
.communaute-card-vide { background: none; display: flex; align-items: center; justify-content: center; min-height: 170px; box-shadow: none; }
.communaute-vide-texte { font-size: 14.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; font-weight: 500; }
.communaute-date { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 6px 0 2px; }
.communaute-texte { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; }
/* FLUX COMMUNAUTE (accueil) : chaque post est un aplat, pas une ligne de liste. */
.feed-communaute { display: flex; flex-direction: column; gap: 12px; }
.feed-item { display: flex; align-items: flex-start; gap: 20px; padding: 26px 28px; background: var(--paper); border: none; border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.feed-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.feed-item-icone { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; color: var(--vert); margin-top: 2px; box-shadow: none; }
.feed-item-icone .ico { width: 21px; height: 21px; }
.feed-item-corps { flex: 1; min-width: 0; }
.feed-item-ligne1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feed-item-etablissement { font-family: var(--font-titre); font-weight: 700; font-size: 21px; letter-spacing: -.035em; color: var(--ink); }
.feed-item-type { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--vert); padding: 4px 10px; border-radius: var(--radius-pill); }
.feed-item-texte { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; margin-top: 10px; max-width: 68ch; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-item-date { flex-shrink: 0; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; margin-top: 6px; font-weight: 500; }
/* Vignette de la publication sur l'accueil (sept. 2026) : format fixe et recadrage
par le centre, pour que des photos de ratios differents alignent quand meme leurs
lignes. Une ligne sans photo n'a tout simplement pas cet element -- aucun cadre
vide, aucune place reservee. */
.feed-item-vignette { flex-shrink: 0; width: 132px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.feed-item-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
.feed-item-vignette { width: 88px; height: 72px; }
}
.feed-item-alerte { background: var(--amber-bg); border: none; border-left: none; padding-left: 28px; margin-left: 0; }
.feed-item-alerte:hover { background: #FFF1D6; }
.feed-item-alerte .feed-item-icone { background: #fff; color: var(--amber-strong); box-shadow: none; }
.feed-item-alerte .feed-item-type { color: #3D2A00; background: var(--gold-500); }
.communaute-vide-texte-feed { text-align: left; padding: 26px 28px; background: var(--paper); border-radius: var(--radius-lg); border-top: none; }
@media (max-width: 600px) {
.feed-item { padding: 22px 20px; gap: 14px; }
.feed-item-icone { width: 38px; height: 38px; }
.feed-item-icone .ico { width: 18px; height: 18px; }
.feed-item-etablissement { font-size: 19px; }
.feed-item-ligne1 { flex-direction: column; align-items: flex-start; gap: 8px; }
.feed-item-date { margin-top: 8px; }
}
/* PAGE /la-vie-de-la-communaute */
/* ============================================================
Filtres de l'annuaire des associations (sept. 2026)
Avant : une ligne de pastilles a choix unique -- on ne pouvait pas demander
"jeunesse ET education", il n'y avait pas de filtre ville alors que les pages
categorie de l'annuaire en ont un, et neuf pastilles alignees faisaient une
bouillie de texte en haut de page. Ici : un panneau, des cases a cocher (donc
cumulables), une ville, un nom.
============================================================ */
.asso-filtres { background: var(--paper); border-radius: var(--radius-lg); padding: 22px 26px; margin: 4px 0 26px; }
.asso-filtres-ligne { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.asso-filtre-champ { display: flex; flex-direction: column; gap: 6px; }
.asso-filtre-label { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); padding: 0; }
.asso-filtre-aide { font-weight: 500; text-transform: none; letter-spacing: 0; }
.asso-filtre-champ input, .asso-filtre-champ select {
width: 100%; padding: 12px 15px; border: none; border-radius: var(--radius-md);
background: #fff; color: var(--ink); font-family: inherit; font-size: 15px;
}
.asso-filtre-champ input:focus, .asso-filtre-champ select:focus { outline: 2px solid #0E4630; outline-offset: 1px; }
.asso-filtre-groupe { border: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line, rgba(14,14,20,.08)); }
.asso-filtre-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 18px; margin-top: 12px; }
.asso-filtre-case { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink); cursor: pointer; line-height: 1.35; }
.asso-filtre-case input { width: 17px; height: 17px; flex-shrink: 0; accent-color: #0E4630; cursor: pointer; margin: 0; }
.asso-filtres-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, rgba(14,14,20,.08)); }
.asso-filtres-pied .resultats-count { margin: 0; }
@media (max-width: 820px) {
.asso-filtre-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.asso-filtres { padding: 18px 18px; }
.asso-filtres-ligne { grid-template-columns: 1fr; }
.asso-filtre-cases { grid-template-columns: 1fr; }
}
.filtres-communaute { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 30px; }
.filtre-chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper); border: none; padding: 11px 20px; border-radius: var(--radius-pill); cursor: pointer; transition: all .14s; }
.filtre-chip:hover { background: var(--paper-2); }
.filtre-chip.est-actif { background: var(--ink); color: #fff; }
.timeline-communaute { position: relative; margin-top: 4px; display: flex; flex-direction: column; gap: 12px; border-top: none; }
.timeline-communaute::before { content: none; }
.timeline-item { position: relative; display: flex; gap: 20px; padding: 26px 28px; background: var(--paper); border: none; border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.timeline-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.timeline-item:last-child { padding-bottom: 26px; border-bottom: none; }
.timeline-rail { position: relative; z-index: 1; flex-shrink: 0; width: 46px; display: flex; justify-content: flex-start; padding-top: 2px; }
.timeline-point { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; color: var(--vert); transition: none; box-shadow: none; padding: 0; }
.timeline-point .ico { width: 21px; height: 21px; }
.timeline-item:hover .timeline-point { background: #fff; color: var(--vert-fonce); }
.timeline-corps { flex: 1; min-width: 0; padding-top: 2px; }
.timeline-date { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.timeline-annee { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-faint); }
.timeline-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.timeline-etablissement { font-family: var(--font-titre); font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.035em; }
.timeline-type-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--vert); padding: 4px 10px; border-radius: var(--radius-pill); }
.timeline-texte { font-style: normal; font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; margin: 8px 0 8px; padding: 0; background: none; border-left: none; border-radius: 0; max-width: 68ch; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-lieu { font-size: 13px; color: var(--ink-faint); }
.timeline-item-alerte { background: var(--amber-bg); }
.timeline-item-alerte .timeline-point { background: #fff; color: var(--amber-strong); }
.timeline-item-alerte .timeline-type-badge { color: #3D2A00; background: var(--gold-500); }
@media (max-width: 600px) {
.timeline-item { gap: 14px; padding: 22px 20px; }
.timeline-rail { width: 38px; }
.timeline-point { width: 38px; height: 38px; }
.timeline-point .ico { width: 18px; height: 18px; }
.timeline-etablissement { font-size: 19px; }
}
/* Alertes epinglees au-dessus du flux */
.alerte-banniere { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 30px; border-top: none; }
.alerte-banniere-item { display: flex; gap: 14px; align-items: flex-start; background: var(--amber-bg); border: none; border-radius: var(--radius-lg); padding: 20px 24px; text-decoration: none; color: inherit; transition: transform .16s ease; }
.alerte-banniere-item:hover { box-shadow: none; transform: translateY(-2px); }
.alerte-banniere-icone { flex-shrink: 0; margin-top: 2px; color: var(--amber-strong); }
.alerte-banniere-icone .ico { width: 19px; height: 19px; }
.alerte-banniere-titre { display: block; font-family: var(--font-titre); font-weight: 700; font-size: 18px; color: #4A3300; margin-bottom: 4px; letter-spacing: -.03em; }
.alerte-banniere-texte { display: block; font-size: 14.5px; color: var(--amber-ink); line-height: 1.55; }
/* Page annonce individuelle. Largeur elargie de 720px a 900px (aout 2026, a la demande
de Yacine : la page paraissait trop centree/etroite), en restant plus etroite que
.section (1200px) pour garder des lignes de texte confortables a lire. */
.annonce-page { max-width: 1100px; }
.annonce-entete { display: flex; gap: 18px; align-items: flex-start; margin: 4px 0 28px; padding-bottom: 0; border-bottom: none; }
.annonce-icone { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); border: none; color: var(--vert); display: flex; align-items: center; justify-content: center; box-shadow: none; padding: 0; margin-top: 2px; }
.annonce-icone .ico { width: 23px; height: 23px; }
.annonce-type-badge { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--vert); padding: 5px 11px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.annonce-entete h1 { font-size: 40px; font-weight: 800; margin: 0 0 10px; line-height: 1.05; letter-spacing: -.05em; }
.annonce-lieu { font-size: 14px; color: var(--ink-faint); margin: 0 0 3px; }
.annonce-date { font-size: 13.5px; color: var(--ink-faint); margin: 0; }
/* Le corps d'une publication etait pose nu sur le fond de page, sans contenant : il
flottait entre la photo et le bloc "Informations pratiques", qui lui en avait un.
Depuis septembre 2026 il a le meme aplat que ce bloc, plus un filet vert a gauche --
on voit ou le texte commence et ou il s'arrete. */
.annonce-texte-complet {
position: relative; overflow-wrap: anywhere;
font-size: 17.5px; line-height: 1.75; color: var(--ink-soft);
margin: 0 0 28px; padding: 28px 32px;
background: var(--paper); border: none; border-left: 4px solid #0E4630;
border-radius: var(--radius-lg); box-shadow: none; max-width: 72ch;
}
.annonce-texte-complet p { margin: 0 0 1.1em; overflow-wrap: anywhere; }
.annonce-texte-complet p:last-child { margin-bottom: 0; }
.annonce-cta-groupe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; padding-top: 0; border-top: none; }
/* Boutons de la nav */
.nav-btn { background: var(--vert) !important; color: #fff !important; padding: 11px 20px; border-radius: var(--radius-pill); font-weight: 600 !important; font-size: 14.5px !important; margin-left: 14px !important; }
.nav-btn:hover { background: var(--vert-fonce) !important; }
.nav-btn-secondary { background: var(--paper) !important; color: var(--ink) !important; border: none; }
.nav-btn-secondary:hover { background: var(--paper-2) !important; }
.nav-link-plain { color: var(--ink-soft) !important; text-decoration: none; padding: 9px 14px; border-radius: var(--radius-pill); font-weight: 500 !important; font-size: 14.5px !important; margin-left: 2px; background: transparent; }
.nav-link-plain:hover { color: var(--ink) !important; background: var(--paper); }
/* BANNIERE D'INTRO */
.intro-banner { background: var(--paper); border: none; border-top: none; border-bottom: none; box-shadow: none; border-radius: var(--radius-lg); padding: 34px 32px; text-align: left; }
.intro-banner h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; color: var(--ink); letter-spacing: -.035em; }
.intro-banner p { font-size: 16px; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; margin: 0; }
/* Pages formulaire */
.form-section { text-align: center; }
.form-section .form-erreur { max-width: 480px; margin: 0 auto 12px; text-align: left; }
.form-section h2 { font-size: 24px; font-weight: 700; }
.form-section-compact { max-width: 640px; margin-left: auto; margin-right: auto; }
.form-section-compact > p:first-of-type { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 4px; }
/* Entree /espace-etablissement (deconnecte) : deux parcours cote a cote. */
.espace-entree-hero { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 0; }
.espace-entree-hero p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.espace-entree-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 30px auto 0; align-items: stretch; border: none; box-shadow: none; border-radius: 0; overflow: visible; background: none; }
.espace-entree-col { padding: 38px 36px; text-align: center; background: var(--paper); border-radius: var(--radius-lg); }
.espace-entree-nouveau { display: flex; flex-direction: column; justify-content: center; border-right: none; }
.espace-entree-col h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.03em; }
.espace-entree-choix { padding: 16px 0; }
.espace-entree-choix + .espace-entree-choix { border-top: 1px solid var(--line); margin-top: 2px; }
.espace-entree-choix-titre { font-weight: 500; color: var(--ink); margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.espace-entree-col .form-commercant input { background: #fff; }
@media (max-width: 760px) {
.espace-entree-grid { grid-template-columns: 1fr; }
.espace-entree-col { padding: 30px 22px; }
.espace-entree-nouveau { border-right: none; border-bottom: none; }
}
.visibilite-intro { max-width: 560px; margin: 0 auto; font-size: 16px; color: var(--ink-soft); line-height: 1.65; }
.visibilite-cta-texte { font-weight: 600; color: var(--ink); margin-top: 8px; margin-bottom: 18px; font-size: 16px; }
.visibilite-layout { display: flex; gap: 40px; align-items: flex-start; max-width: 900px; margin: 26px auto 0; text-align: left; }
.visibilite-form-col { flex: 1 1 360px; }
.visibilite-form-col .visibilite-cta-texte { text-align: center; }
.question-alcool { text-align: center; margin: 22px 0; }
.question-alcool .choix-cible-option { margin: 5px 6px; }
@media (max-width: 760px) { .visibilite-layout { flex-direction: column; } }
.contact-direct-ligne { margin-top: 24px; font-size: 13.5px; color: var(--ink-faint); }
.contact-direct-ligne a { color: var(--vert-fonce); font-weight: 600; }
.note-expansion { text-align: center; padding: 8px 24px 0; max-width: 1200px; margin: 0 auto; }
.note-expansion p { font-size: 13.5px; color: var(--ink-faint); }
.search-page.avec-filtre { display: flex; flex-wrap: wrap; gap: 10px; max-width: 780px; }
.search-page.avec-filtre input { flex: 1 1 220px; width: auto; }
.search-page.avec-filtre select { flex: 0 0 200px; padding: 14px 16px; border-radius: var(--radius-md); border: none; background: var(--paper); font-size: 14.5px; color: var(--ink); font-family: inherit; }
@media (max-width: 640px) {
.search-page.avec-filtre { flex-direction: column; }
.search-page.avec-filtre input { flex: 0 0 auto; width: 100%; }
.search-page.avec-filtre select { flex: 0 0 auto; width: 100%; }
}
.filtres-annexes { display: flex; flex-wrap: wrap; gap: 8px; max-width: 780px; margin: 12px 0 0; }
.filtres-annexes .filtre-chip { padding: 9px 17px; font-size: 13px; }
.signaler-erreur-ligne { margin-top: 30px; padding-top: 0; border-top: none; }
.signaler-erreur-ligne a { font-size: 13.5px; color: var(--ink-faint); text-decoration: underline; }
.signaler-erreur-ligne a:hover { color: var(--ink); }
.signalement-note { background: var(--amber-bg); border: none; color: var(--amber-ink); border-radius: var(--radius-md); padding: 14px 18px; font-size: 14.5px; margin: 0 0 16px; }
.lieu-marker span { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.type-intro-seo { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; max-width: 62ch; margin: 0 0 16px; }
.page-404 { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.liens-404 { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }
.liens-404 a { color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.liens-404 a:hover { text-decoration: underline; }
.admin-panel { background: var(--paper); border: none; border-radius: var(--radius-lg); padding: 32px 34px; box-shadow: none; text-align: left; }
@media (max-width: 480px) { .admin-panel { padding: 22px 18px; } }
.admin-header-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.admin-deconnexion { font-size: 13.5px; color: var(--ink-faint); text-decoration: underline; }
.admin-deconnexion:hover { color: var(--ink); }
/* Onglets. Le fond est explicitement neutralise : .nav-admin est un