html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
:root {
--bleu-fonce: #183153;
--bleu: #2d70b7;
--bleu-clair: #eef6ff;
--fond: #f3f8fd;
--texte: #4c6076;
--bordure: #dce6ef;
--orange: #e78335;
--vert: #45965a;
--vert-fonce: #2f7d45;
--rouge: #9a3b3b;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--bleu-fonce);
background: #fff;
line-height: 1.5;
}
a { color: var(--bleu); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid rgba(45,112,183,.28);
outline-offset: 2px;
}
/* EN-TÊTE */
.entete {
min-height: 80px;
padding: 14px 6%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid #e3e8ee;
background: #fff;
}
.logo, .logo-site {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 700;
color: var(--bleu-fonce);
text-decoration: none;
}
.logo-icone { color: var(--orange); }
.logo-coup-de-main-local { width: 50px; height: 50px; object-fit: contain; display: block; border-radius: 10px; }
nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
nav a { color: var(--bleu-fonce); text-decoration: none; font-size: 16px; }
nav a:hover { text-decoration: underline; }
.connexion {
padding: 11px 16px;
border-radius: 8px;
background: var(--bleu);
color: #fff;
}
/* BANDEAU BON SENS */
.bandeau-bon-sens {
padding: 18px 6%;
background: #fff8e8;
border-bottom: 1px solid #f2dfb5;
}
.bandeau-bon-sens-contenu {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
}
.bandeau-bon-sens h2 { margin: 0 0 5px; font-size: 20px; }
.bandeau-bon-sens p { margin: 0; color: #5f5234; font-size: 16px; }
.lien-charte { white-space: nowrap; font-weight: 700; }
/* BANNIÈRE */
.banniere {
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
padding: 55px 8% 95px;
background: var(--fond);
position: relative;
}
.banniere-contenu {
width: 100%; max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 60px;
}
.banniere-texte { flex: 1; max-width: 730px; }
.surtitre, .categories-surtitre, .acces-surtitre, .formulaire-surtitre {
margin: 0 0 10px;
color: var(--bleu);
font-size: 15px;
font-weight: 700;
letter-spacing: .03em;
}
.banniere h1 { margin: 0 0 20px; font-size: clamp(42px, 5vw, 66px); line-height: 1.04; }
.introduction { margin: 0 0 10px; font-size: 24px; line-height: 1.5; }
.description { margin: 0 0 32px; font-size: 20px; line-height: 1.55; color: var(--texte); }
.actions { display: flex; flex-wrap: wrap; gap: 15px; }
.bouton {
display: inline-block; padding: 16px 22px; border-radius: 10px;
color: #fff; text-decoration: none; font-size: 18px; font-weight: 700;
}
.bouton:hover { opacity: .9; }
.besoin { background: var(--orange); }
.aider { background: var(--vert); }
.donner { background: var(--bleu); }
.engagements { margin-top: 24px; font-size: 17px; font-weight: 700; color: #607386; }
.banniere-visuel { width: 330px; flex-shrink: 0; }
.bloc-pilote {
background: #fff; border-radius: 18px; padding: 26px 30px;
box-shadow: 0 8px 24px rgba(0,0,0,.08); text-align: center;
}
.logo-pilote { display: block; width: 210px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.pilote-titre { margin: 0 0 5px; font-size: 14px; font-weight: 700; color: var(--bleu); text-transform: uppercase; }
.pilote-texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte); }
/* INDICATEUR DÉFILEMENT */
.indicateur-scroll {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 7px;
border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 100;
opacity: 1; transition: opacity .3s ease, transform .3s ease;
}
.indicateur-scroll.masque { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }
.texte-scroll { font-size: 14px; font-weight: 700; color: var(--bleu); }
.cercle-scroll {
width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255,255,255,.82); border: 1px solid rgba(24,49,83,.1);
box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.fleche-scroll { font-size: 28px; color: var(--bleu-fonce); animation: rebond 1.4s infinite; }
@keyframes rebond { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* BLOCS GÉNÉRAUX */
.section-standard { padding: 70px 8%; }
.section-standard.fond { background: var(--fond); }
.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; }
.intro-section { max-width: 780px; margin-bottom: 36px; }
.intro-section h1, .intro-section h2 { margin: 0 0 15px; color: var(--bleu-fonce); }
.intro-section h1 { font-size: 44px; }
.intro-section h2 { font-size: 38px; }
.intro-section p { margin: 0 0 12px; font-size: 19px; line-height: 1.6; color: var(--texte); }
/* ACCÈS HORS LIGNE */
.acces-hors-ligne { padding: 70px 8%; background: #fff; }
.acces-contenu { width: 100%; max-width: 1200px; margin: 0 auto; }
.acces-introduction { max-width: 760px; margin-bottom: 35px; }
.acces-introduction h2 { margin: 0 0 20px; font-size: 38px; }
.acces-introduction p { font-size: 19px; line-height: 1.6; color: var(--texte); }
.acces-solutions { display: flex; gap: 25px; }
.carte-acces { flex: 1; padding: 30px; border: 1px solid var(--bordure); border-radius: 16px; background: #f7fafc; }
.icone-acces, .icone-categorie {
width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; border-radius: 50%; background: #eaf3ff; font-size: 30px;
}
.carte-acces h3 { margin: 0 0 15px; font-size: 24px; }
.carte-acces p { font-size: 18px; line-height: 1.5; }
.petit-texte { color: var(--texte); }
.numero-a-venir, .numero-permanence { margin-top: 20px; font-weight: 700; color: var(--bleu); }
.numero-permanence a { color: var(--bleu); text-decoration: none; font-size: 21px; }
.numero-permanence a:hover { text-decoration: underline; }
/* CATÉGORIES */
.categories { padding: 70px 8%; background: var(--fond); }
.categories-contenu { width: 100%; max-width: 1200px; margin: 0 auto; }
.categories-introduction { max-width: 760px; margin-bottom: 40px; }
.categories-introduction h2 { margin: 0 0 15px; font-size: 38px; }
.categories-introduction p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--texte); }
.grille-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.carte-categorie {
min-height: 290px; padding: 28px; background: #fff; border: 1px solid var(--bordure);
border-radius: 16px; box-shadow: 0 5px 15px rgba(0,0,0,.05);
transition: transform .2s ease, box-shadow .2s ease;
color: inherit; text-decoration: none;
}
.carte-categorie:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0,0,0,.09); }
.carte-categorie h3 { margin: 0 0 15px; font-size: 23px; line-height: 1.25; }
.carte-categorie p { min-height: 95px; margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: var(--texte); }
.lien-categorie { font-size: 16px; font-weight: 700; color: var(--bleu); }
.carte-bouton { width: 100%; text-align: left; font: inherit; cursor: pointer; appearance: none; }
.orientation-numerique { display: none; margin-top: 35px; padding: 35px; background: #fff; border: 1px solid var(--bordure); border-radius: 16px; }
.orientation-numerique.visible { display: block; }
.orientation-numerique h3 { margin: 0 0 10px; font-size: 28px; }
.orientation-intro { margin-bottom: 25px; font-size: 19px; color: var(--texte); }
.choix-numerique { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.choix-carte { padding: 22px; text-align: left; background: #f7fafc; border: 1px solid var(--bordure); border-radius: 12px; font: inherit; }
a.choix-carte { text-decoration: none; }
a.choix-carte:hover { background: #eaf3ff; }
.choix-carte strong { display: block; margin-bottom: 10px; font-size: 18px; color: var(--bleu-fonce); }
.choix-carte span { display: block; font-size: 16px; line-height: 1.5; color: var(--texte); }
/* PAGE CONTENU / JURIDIQUE */
.page-contenu { max-width: 950px; margin: 0 auto; padding: 55px 24px 80px; }
.page-contenu h1 { margin: 0 0 16px; font-size: 42px; }
.page-contenu h2 { margin: 38px 0 12px; font-size: 27px; }
.page-contenu h3 { margin: 26px 0 10px; font-size: 21px; }
.page-contenu p, .page-contenu li { font-size: 17px; line-height: 1.65; color: #334b63; }
.page-contenu ul { padding-left: 24px; }
.encadre {
margin: 26px 0; padding: 20px 22px; border-radius: 12px; background: var(--bleu-clair);
border-left: 4px solid var(--bleu);
}
.encadre-attention { background: #fff8e8; border-left-color: var(--orange); }
.grille-etapes { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin: 28px 0; }
.etape { padding: 24px; border: 1px solid var(--bordure); border-radius: 14px; background: #fff; }
.etape-numero { font-size: 14px; font-weight: 700; color: var(--bleu); }
.etape h2, .etape h3 { margin: 6px 0 8px; }
/* FORMULAIRES */
.page-formulaire { min-height: calc(100vh - 80px); padding: 55px 8% 80px; background: var(--fond); }
.formulaire-conteneur { max-width: 850px; margin: 0 auto; }
.retour-accueil { display: inline-block; margin-bottom: 30px; font-size: 17px; font-weight: 700; text-decoration: none; }
.formulaire-introduction { margin-bottom: 35px; }
.formulaire-introduction h1 { margin: 0 0 15px; font-size: 44px; }
.formulaire-introduction p { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.6; color: var(--texte); }
.formulaire-aide { padding: 40px; background: #fff; border: 1px solid var(--bordure); border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.champ-formulaire { margin-bottom: 28px; }
.champ-formulaire label { display: block; margin-bottom: 9px; font-size: 18px; font-weight: 700; }
.facultatif { margin-left: 5px; font-size: 14px; font-weight: 400; color: #607386; }
.champ-formulaire input[type="text"], .champ-formulaire input[type="tel"], .champ-formulaire input[type="email"], .champ-formulaire input[type="password"], .champ-formulaire select, .champ-formulaire textarea {
width: 100%; padding: 14px 16px; border: 1px solid #b8c6d4; border-radius: 9px; background: #fff;
font: inherit; font-size: 17px; color: var(--bleu-fonce);
}
.champ-formulaire textarea { resize: vertical; }
.champ-formulaire input[type="file"] { width: 100%; padding: 12px; border: 1px dashed #b8c6d4; border-radius: 9px; background: #f7fafc; font-size: 16px; }
.aide-champ { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #607386; }
.alerte-photo, .alerte-formulaire { margin-top: 12px; padding: 14px 16px; background: #fff8e8; border-radius: 8px; font-size: 15px; color: #5c4b22; }
.rappel-moderation { margin: 30px 0; padding: 18px 20px; background: var(--bleu-clair); border-left: 4px solid var(--bleu); border-radius: 8px; }
.rappel-moderation p { margin: 7px 0 0; color: var(--texte); }
.bouton-envoi { width: 100%; padding: 17px 25px; border: 0; border-radius: 10px; background: var(--orange); color: #fff; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
.bouton-envoi:hover { opacity: .9; }
.case-validation { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; font-size: 16px; color: #334b63; }
.case-validation input { margin-top: 4px; transform: scale(1.2); }
/* ANNONCES */
.page-annonces { max-width: 1100px; margin: 0 auto; padding: 50px 24px 80px; }
.introduction-annonces { margin-bottom: 28px; }
.introduction-annonces h1 { font-size: 42px; margin: 8px 0 12px; }
.introduction-annonces p { color: var(--texte); font-size: 18px; }
.barre-annonces { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.filtres-annonces { display: flex; gap: 10px; flex-wrap: wrap; }
.filtre-annonce { display: inline-block; padding: 10px 14px; border-radius: 999px; background: #edf5fc; color: var(--bleu); text-decoration: none; font-weight: 700; }
.filtre-annonce.actif { background: var(--bleu); color: #fff; }
.actions-annonces { display: flex; gap: 10px; flex-wrap: wrap; }
.bouton-secondaire { display: inline-block; padding: 11px 15px; border-radius: 9px; border: 1px solid var(--bleu); color: var(--bleu); text-decoration: none; font-weight: 700; background: #fff; }
.liste-annonces { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.carte-annonce { background: #fff; border: 1px solid #d9e1ea; border-radius: 16px; padding: 22px; box-shadow: 0 5px 18px rgba(0,0,0,.05); }
.carte-annonce h2 { font-size: 1.25rem; margin: 10px 0; }
.meta-annonce { display: flex; gap: 10px; flex-wrap: wrap; font-size: .92rem; color: #60758d; }
.badge-categorie, .badge-nature { display: inline-block; padding: 5px 10px; border-radius: 20px; font-weight: 700; font-size: .84rem; }
.badge-categorie { background: #edf5fc; color: var(--bleu); }
.badge-nature { margin-left: 7px; background: #eef7ef; color: var(--vert-fonce); }
.description-annonce { margin: 16px 0; line-height: 1.55; color: #334b63; }
.disponibilite-annonce { font-size: .95rem; color: var(--texte); }
.aucune-annonce { padding: 30px; text-align: center; color: #60758d; background: #fff; border-radius: 14px; border: 1px solid var(--bordure); }
.lien-signaler { display: inline-block; margin-top: 12px; font-size: 14px; color: #7a5c5c; }
/* MODÉRATION */
.page-moderation { max-width: 1000px; margin: 0 auto; padding: 50px 24px 80px; }
.introduction-moderation { margin-bottom: 35px; }
.introduction-moderation h1 { font-size: 42px; margin: 8px 0 12px; }
.introduction-moderation p { color: var(--texte); }
.alerte-moderation { margin-top: 20px; padding: 15px 18px; background: #fff7e6; border-left: 4px solid #e58a1f; border-radius: 8px; color: #634711; }
.liste-moderation { display: grid; gap: 22px; }
.carte-moderation { background: #fff; border: 1px solid #d9e1ea; border-radius: 16px; padding: 24px; box-shadow: 0 5px 18px rgba(0,0,0,.05); }
.actions-moderation { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.bouton-publier, .bouton-refuser { border: 0; border-radius: 9px; padding: 11px 18px; font-size: .95rem; font-weight: 700; cursor: pointer; }
.bouton-publier { background: #2f8f4e; color: #fff; }
.bouton-refuser { background: #eee; color: #7a2f2f; }
.info-privee { margin-top: 15px; padding: 12px; background: #f3f6f9; border-radius: 8px; font-size: .9rem; color: var(--texte); }
/* PIED DE PAGE */
.pied-page { padding: 42px 6% 28px; background: var(--bleu-fonce); color: #fff; }
.pied-contenu { max-width: 1200px; margin: 0 auto; }
.pied-liens { display: flex; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pied-liens a { color: #fff; text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.pied-separation { border-top: 1px solid rgba(255,255,255,.2); padding-top: 22px; }
.pied-separation p { margin: 5px 0; color: #e5edf5; }
.hebergeur-site { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #cdd9e6; font-size: 14px; }
/* RESPONSIVE */
@media (max-width: 900px) {
.entete { flex-direction: column; align-items: flex-start; }
.bandeau-bon-sens-contenu { align-items: flex-start; flex-direction: column; }
.banniere { padding: 45px 6% 95px; }
.banniere-contenu { flex-direction: column; align-items: flex-start; }
.banniere-visuel { width: 100%; max-width: 440px; }
.actions { flex-direction: column; width: 100%; }
.bouton { width: 100%; text-align: center; }
.grille-categories { grid-template-columns: repeat(2,1fr); }
.acces-solutions { flex-direction: column; }
}
@media (max-width: 700px) {
nav { gap: 13px; }
.grille-categories, .choix-numerique, .grille-etapes, .liste-annonces { grid-template-columns: 1fr; }
.carte-categorie { min-height: auto; }
.carte-categorie p { min-height: auto; }
.categories, .acces-hors-ligne, .section-standard, .page-formulaire { padding-left: 6%; padding-right: 6%; }
.formulaire-aide { padding: 25px 20px; }
.formulaire-introduction h1, .page-contenu h1, .introduction-annonces h1, .introduction-moderation h1 { font-size: 34px; }
.indicateur-scroll { bottom: 16px; }
}
@media (max-width: 640px) {
.logo, .logo-site { font-size: 20px; gap: 8px; }
.logo-coup-de-main-local { width: 42px; height: 42px; }
}
/* CHOIX TERRITOIRE / COMMUNE */
.choix-territoire {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 10px;
}
.option-territoire {
display: flex !important;
align-items: flex-start;
gap: 12px;
padding: 18px;
margin: 0 !important;
border: 2px solid var(--bordure);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.option-territoire:hover {
border-color: #9ebfe0;
background: #f8fbff;
}
.option-territoire:has(input:checked) {
border-color: var(--bleu);
background: #eef6ff;
box-shadow: 0 0 0 2px rgba(45,112,183,.08);
}
.option-territoire input[type="radio"] {
margin: 4px 0 0;
width: 20px;
height: 20px;
flex: 0 0 auto;
accent-color: var(--bleu);
}
.option-territoire span { display: block; }
.option-territoire strong {
display: block;
margin-bottom: 4px;
font-size: 18px;
color: var(--bleu-fonce);
}
.option-territoire small {
display: block;
font-size: 15px;
line-height: 1.4;
color: var(--texte);
font-weight: normal;
}
.communes-voisines {
margin-top: 16px;
padding: 16px;
border: 1px solid var(--bordure);
border-radius: 10px;
background: #f7fafc;
}
.communes-voisines[hidden] { display: none; }
.communes-voisines label {
margin-bottom: 8px;
font-size: 16px;
}
@media (max-width: 700px) {
.choix-territoire { grid-template-columns: 1fr; }
}
/* MISE À JOUR PAGE ANNONCES */
.hero-annonces {
margin-bottom: 22px;
padding: 34px;
border-radius: 24px;
background: linear-gradient(135deg, #eef5ff 0%, #f9fcff 55%, #f3fbf5 100%);
border: 1px solid #d9e6f4;
box-shadow: 0 10px 30px rgba(24,49,83,.06);
}
.hero-annonces-contenu {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
gap: 28px;
align-items: center;
}
.hero-annonces h1 {
margin: 0 0 12px;
font-size: clamp(36px, 4vw, 52px);
line-height: 1.06;
}
.hero-annonces-intro {
margin: 0;
font-size: 18px;
color: var(--texte);
max-width: 60ch;
}
.hero-annonces-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
}
.hero-badge-besoin { background: #fff0e5; color: #a6541f; }
.hero-badge-offre { background: #eaf7ec; color: #2f7d45; }
.hero-badge-don { background: #f2ecff; color: #6a52a3; }
.hero-annonces-visuel {
display: grid;
gap: 12px;
}
.mini-annonce {
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(24,49,83,.08);
box-shadow: 0 10px 20px rgba(24,49,83,.04);
}
.mini-annonce strong {
display: block;
margin: 6px 0 3px;
font-size: 18px;
}
.mini-annonce small { color: var(--texte); font-size: 14px; }
.mini-annonce-etiquette {
display: inline-flex;
padding: 5px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
.mini-annonce-besoin { background: #fff8f2; }
.mini-annonce-besoin .mini-annonce-etiquette { background: #ffe5cf; color: #a6541f; }
.mini-annonce-offre { background: #f4fbf5; }
.mini-annonce-offre .mini-annonce-etiquette { background: #dff1e2; color: #2f7d45; }
.mini-annonce-don { background: #f8f4ff; }
.mini-annonce-don .mini-annonce-etiquette { background: #e9ddff; color: #6a52a3; }
.bandeau-annonces {
margin-bottom: 28px;
padding: 20px 22px;
border-radius: 18px;
background: #fff8e8;
border: 1px solid #f0dfb4;
}
.bandeau-annonces-contenu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.bandeau-annonces h2 {
margin: 0 0 6px;
font-size: 20px;
}
.bandeau-annonces p {
margin: 0;
color: #5f5234;
font-size: 16px;
}
.liste-annonces {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.carte-annonce {
overflow: hidden;
padding: 0;
border-radius: 20px;
border: 1px solid #d9e1ea;
box-shadow: 0 10px 26px rgba(24,49,83,.06);
}
.carte-annonce.annonce-besoin { background: #fffaf6; border-color: #f1dccb; }
.carte-annonce.annonce-offre { background: #f7fcf8; border-color: #d7e9db; }
.carte-annonce.annonce-don { background: #faf7ff; border-color: #e2d9f5; }
.vignette-annonce {
position: relative;
padding: 18px 22px 16px;
min-height: 120px;
border-bottom: 1px solid rgba(24,49,83,.08);
}
.vignette-besoin {
background: radial-gradient(circle at top right, #ffe6d1 0, #ffe6d1 18%, transparent 18%), linear-gradient(135deg, #fff1e4 0%, #fff8f2 100%);
}
.vignette-offre {
background: radial-gradient(circle at top right, #daf0de 0, #daf0de 18%, transparent 18%), linear-gradient(135deg, #eef9f0 0%, #f7fcf8 100%);
}
.vignette-don {
background: radial-gradient(circle at top right, #e7dcff 0, #e7dcff 18%, transparent 18%), linear-gradient(135deg, #f4eeff 0%, #faf7ff 100%);
}
.vignette-surtitre {
display: inline-flex;
padding: 5px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
background: rgba(255,255,255,.7);
border: 1px solid rgba(24,49,83,.08);
}
.vignette-emoji {
margin-top: 12px;
font-size: 42px;
line-height: 1;
}
.vignette-phrase {
margin: 10px 0 0;
max-width: 28ch;
color: #4c6076;
font-size: 15px;
}
.zone-badges-annonce,
.carte-annonce h2,
.meta-annonce,
.description-annonce,
.disponibilite-annonce,
.lien-signaler {
margin-left: 22px;
margin-right: 22px;
}
.zone-badges-annonce {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.badge-nature {
margin-left: 0;
}
.badge-nature-besoin { background: #fff0e5; color: #a6541f; }
.badge-nature-offre { background: #e7f5ea; color: #2f7d45; }
.badge-nature-don { background: #f0e9ff; color: #6a52a3; }
.carte-annonce h2 {
margin-top: 14px;
margin-bottom: 10px;
font-size: 1.55rem;
line-height: 1.2;
}
.meta-annonce { display: flex; gap: 10px; flex-wrap: wrap; color: #60758d; font-size: .95rem; }
.description-annonce { margin-top: 14px; margin-bottom: 14px; color: #334b63; line-height: 1.6; }
.disponibilite-annonce {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 6px;
}
.lien-signaler {
display: inline-block;
margin-top: 12px;
margin-bottom: 22px;
font-size: 14px;
color: #7a5c5c;
}
.aucune-annonce {
margin-top: 10px;
padding: 34px;
border-radius: 18px;
background: #f8fbff;
}
@media (max-width: 900px) {
.hero-annonces-contenu {
grid-template-columns: 1fr;
}
.bandeau-annonces-contenu {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 700px) {
.hero-annonces {
padding: 24px 20px;
border-radius: 20px;
}
.liste-annonces {
grid-template-columns: 1fr;
}
.carte-annonce h2 {
font-size: 1.35rem;
}
}
/* =========================================
ESPACE ASSOCIATION ÇA MARCHE
========================================= */
.nav-ca-marche {
font-weight: 700;
color: #397f4b;
}
.pilote-lien { margin: 16px 0 0; }
.pilote-lien a { font-weight: 700; text-decoration: none; }
.page-association {
max-width: 1180px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.surtitre-association { color: #397f4b; }
.hero-association {
padding: 38px;
border-radius: 26px;
background: linear-gradient(135deg, #f0f8ee 0%, #fff9ed 100%);
border: 1px solid #dbe9d7;
box-shadow: 0 10px 30px rgba(24,49,83,.05);
}
.hero-association-contenu {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 38px;
align-items: center;
}
.hero-association-logo {
background: rgba(255,255,255,.8);
border-radius: 22px;
padding: 26px;
border: 1px solid rgba(24,49,83,.08);
}
.hero-association-logo img { display: block; width: 100%; height: auto; }
.hero-association h1 {
margin: 0 0 14px;
font-size: clamp(38px, 4.5vw, 58px);
line-height: 1.06;
}
.hero-association p { font-size: 18px; color: var(--texte); }
.mention-separation {
margin-top: 20px;
padding: 14px 16px;
background: rgba(255,255,255,.72);
border-left: 4px solid #397f4b;
border-radius: 10px;
font-size: 15px !important;
}
.section-association { padding: 64px 0; }
.section-association-fond {
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
background: #f7fbf6;
border-radius: 24px;
}
.titre-section-association { max-width: 780px; margin-bottom: 30px; }
.titre-section-association h2,
.entete-page-association h1 {
margin: 0 0 12px;
font-size: clamp(32px, 4vw, 44px);
line-height: 1.1;
}
.titre-section-association > p:not(.surtitre),
.entete-page-association > p:not(.surtitre) { color: var(--texte); font-size: 18px; }
.grille-association { display: grid; gap: 22px; }
.grille-association-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grille-association-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.carte-association,
.carte-info-association,
.carte-projet-apercu {
border-radius: 20px;
border: 1px solid var(--bordure);
background: #fff;
padding: 26px;
box-shadow: 0 8px 22px rgba(24,49,83,.05);
}
a.carte-association { color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
a.carte-association:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(24,49,83,.09); }
.carte-randonnees { background: #f4faef; border-color: #d8e8cf; }
.carte-repair { background: #fff8ec; border-color: #efe0c4; }
.carte-sorties { background: #f0f7ff; border-color: #d6e5f5; }
.icone-association { display: block; font-size: 42px; margin-bottom: 15px; }
.carte-association h3,
.carte-info-association h2,
.carte-projet-apercu h3 { margin: 0 0 10px; font-size: 24px; }
.carte-association p,
.carte-info-association p,
.carte-projet-apercu p { color: var(--texte); font-size: 17px; line-height: 1.6; }
.lien-carte-association { display: inline-block; margin-top: 10px; font-weight: 700; color: #397f4b; }
.grille-projets-apercu { grid-template-columns: repeat(3, minmax(0,1fr)); }
.statut-projet {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: #eaf5ea;
color: #397f4b;
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
}
.icone-projet { display: block; font-size: 34px; margin-bottom: 12px; }
.actions-association,
.actions-association-centrees { display: flex; gap: 12px; flex-wrap: wrap; }
.actions-association-centrees { justify-content: center; margin-top: 28px; }
.bouton-association {
display: inline-block;
padding: 13px 18px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
}
.bouton-association-principal { background: #397f4b; color: #fff; }
.bouton-association-secondaire { background: #fff; color: #397f4b; border: 1px solid #8ab697; }
.appel-participation {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 28px;
align-items: center;
}
.appel-participation h2 { margin: 0 0 10px; font-size: 34px; }
.appel-participation p { color: var(--texte); font-size: 17px; }
.entete-page-association { max-width: 850px; margin-bottom: 34px; }
.retour-association { display: inline-block; margin-bottom: 28px; font-weight: 700; text-decoration: none; }
.encadre-info-association {
margin-top: 36px;
padding: 26px;
border-radius: 18px;
background: #f1f8ef;
border-left: 5px solid #397f4b;
}
.encadre-info-association h2 { margin-top: 0; }
.encadre-info-association p { color: var(--texte); font-size: 17px; }
.grille-repair-infos { grid-template-columns: repeat(3,minmax(0,1fr)); }
.bloc-texte-association { padding: 32px !important; margin-top: 35px; }
.grande-carte-association { min-height: 290px; }
.etat-mini { margin-top: 24px; padding: 16px; border-radius: 12px; background: #f7fafc; }
.etat-mini strong, .etat-mini span { display: block; }
.etat-mini span { margin-top: 5px; color: var(--texte); }
/* RANDONNÉES PUBLIQUES */
.legende-randonnee {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.legende-randonnee span {
padding: 9px 12px;
background: #f1f7ef;
border-radius: 999px;
color: #3e5c45;
font-size: 14px;
}
.liste-randonnees { display: grid; gap: 18px; }
.carte-randonnee {
display: grid;
grid-template-columns: 210px minmax(0,1fr);
overflow: hidden;
border-radius: 18px;
border: 1px solid #dbe6da;
background: #fff;
box-shadow: 0 7px 22px rgba(24,49,83,.05);
}
.date-randonnee {
padding: 26px 22px;
background: #edf7ea;
display: flex;
flex-direction: column;
justify-content: center;
}
.date-randonnee strong { font-size: 20px; line-height: 1.3; text-transform: capitalize; }
.date-randonnee span { margin-top: 10px; font-weight: 700; color: #397f4b; }
.contenu-randonnee { padding: 24px 26px; }
.contenu-randonnee h2 { margin: 9px 0 10px; font-size: 26px; }
.infos-randonnee { display: flex; flex-wrap: wrap; gap: 9px 14px; color: #526b5a; }
.rdv-randonnee { margin: 14px 0 0; font-weight: 700; }
.message-randonnee {
margin-top: 16px;
padding: 13px 15px;
border-radius: 10px;
background: #fff8e8;
color: #5f5234;
border-left: 4px solid var(--orange);
}
.badge-statut-randonnee {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
.badge-confirmee { background: #e7f5ea; color: #2f7d45; }
.badge-modifiee { background: #fff0d8; color: #8a5a16; }
.badge-annulee { background: #fde9e9; color: #9a3b3b; }
.carte-randonnee.statut-modifiee { border-color: #ecd5aa; }
.carte-randonnee.statut-annulee { border-color: #e8c5c5; opacity: .86; }
.etat-vide-association {
padding: 44px 28px;
text-align: center;
border: 1px dashed #b9cbb7;
border-radius: 18px;
background: #f8fbf7;
}
.etat-vide-association > span { font-size: 45px; }
.etat-vide-association h2 { margin: 12px 0 8px; }
.etat-vide-association p { color: var(--texte); }
/* PROJETS ET FORMULAIRES ASSOCIATION */
.liste-projets-detail { display: grid; gap: 20px; }
.projet-detail {
display: grid;
grid-template-columns: 82px minmax(0,1fr);
gap: 22px;
padding: 28px;
border: 1px solid var(--bordure);
border-radius: 20px;
background: #fff;
}
.projet-detail-icone {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: #f1f8ef;
font-size: 36px;
}
.projet-detail h2 { margin: 3px 0 10px; font-size: 28px; }
.projet-detail p { margin: 0; color: var(--texte); font-size: 17px; line-height: 1.65; }
.formulaire-association-conteneur { max-width: 850px; margin: 58px auto 0; }
.formulaire-association { border-top: 5px solid #397f4b; }
.bouton-envoi-association { background: #397f4b; }
.case-participation { margin: 0 0 28px; }
/* GESTION RANDONNÉES */
.grille-gestion-randonnees {
display: grid;
grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
gap: 28px;
align-items: start;
}
.panneau-gestion-randonnees {
padding: 26px;
border: 1px solid var(--bordure);
border-radius: 20px;
background: #f9fbfc;
}
.panneau-gestion-randonnees > h2 { margin-top: 0; }
.formulaire-randonnee { padding: 25px; }
.double-champ { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.champ-formulaire input[type="date"],
.champ-formulaire input[type="time"] {
width: 100%; padding: 14px 16px; border: 1px solid #b8c6d4; border-radius: 9px; background: #fff; font: inherit; font-size: 17px; color: var(--bleu-fonce);
}
.titre-liste-gestion { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.titre-liste-gestion h2 { margin: 0; }
.lien-voir-public { font-weight: 700; white-space: nowrap; }
.liste-gestion-randonnees { display: grid; gap: 14px; }
.carte-gestion-randonnee {
padding: 18px;
border-radius: 15px;
border: 1px solid var(--bordure);
background: #fff;
}
.haut-gestion-randonnee { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-gestion-randonnee h3 { margin: 10px 0 7px; font-size: 20px; }
.carte-gestion-randonnee p { margin: 5px 0; color: var(--texte); }
.message-gestion-rando { padding: 10px 12px; border-radius: 9px; background: #fff8e8; }
.actions-gestion-randonnee { display: flex; gap: 9px; margin-top: 14px; }
.bouton-modifier-rando,
.bouton-supprimer-rando,
.bouton-annuler-edition {
border: 0;
border-radius: 8px;
padding: 10px 13px;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.bouton-modifier-rando { background: #eaf3ff; color: var(--bleu); }
.bouton-supprimer-rando { background: #fdecec; color: #9a3b3b; }
.bouton-annuler-edition { background: #eef1f3; color: #42566b; }
.actions-gestion-formulaire { display: grid; gap: 10px; }
.etat-vide-gestion { padding: 24px; text-align: center; background: #fff; border-radius: 12px; color: var(--texte); }
@media (max-width: 900px) {
.hero-association-contenu,
.grille-gestion-randonnees,
.appel-participation { grid-template-columns: 1fr; }
.hero-association-logo { max-width: 260px; }
.grille-association-3,
.grille-projets-apercu,
.grille-repair-infos { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.page-association { padding-left: 18px; padding-right: 18px; }
.hero-association { padding: 26px 20px; }
.section-association-fond { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
.grille-association-2 { grid-template-columns: 1fr; }
.carte-randonnee { grid-template-columns: 1fr; }
.date-randonnee { padding: 18px 20px; }
.projet-detail { grid-template-columns: 1fr; }
.double-champ { grid-template-columns: 1fr; }
.titre-liste-gestion { flex-direction: column; }
}
/* RÉPONSES AUX ANNONCES */
.actions-carte-annonce {
margin: 18px 22px 22px;
display: flex;
align-items: center;
gap: 12px 16px;
flex-wrap: wrap;
}
.actions-carte-annonce .lien-signaler {
margin: 0;
}
.bouton-repondre-annonce {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 16px;
border-radius: 10px;
color: #fff;
text-decoration: none;
font-weight: 700;
box-shadow: 0 4px 12px rgba(24,49,83,.08);
}
.bouton-repondre-annonce:hover { opacity: .9; }
.bouton-repondre-besoin { background: var(--orange); }
.bouton-repondre-offre { background: var(--vert); }
.bouton-repondre-don { background: #7657b8; }
.resume-annonce-reponse {
margin: 0 0 28px;
padding: 24px;
border: 1px solid var(--bordure);
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 24px rgba(24,49,83,.05);
}
.resume-annonce-reponse.annonce-besoin { background: #fffaf6; border-color: #f1dccb; }
.resume-annonce-reponse.annonce-offre { background: #f7fcf8; border-color: #d7e9db; }
.resume-annonce-reponse.annonce-don { background: #faf7ff; border-color: #e2d9f5; }
.resume-annonce-reponse .zone-badges-annonce { margin: 0 0 13px; }
.resume-annonce-reponse h2 { margin: 0 0 9px; font-size: 26px; }
.resume-annonce-reponse .description-annonce { margin: 13px 0 0; }
.resume-annonce-meta { margin: 0; color: var(--texte); }
.resume-apres-envoi { opacity: .72; }
.formulaire-reponse { border-top: 5px solid var(--bleu); }
.case-consentement-reponse {
margin: 4px 0 28px;
padding: 16px;
border-radius: 10px;
background: #f7fafc;
}
.confirmation-reponse-annonce {
padding: 36px 28px;
text-align: center;
border: 1px solid #cfe3d4;
border-radius: 18px;
background: #f2faf4;
}
.confirmation-reponse-annonce > span {
width: 58px;
height: 58px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--vert);
color: #fff;
font-size: 30px;
font-weight: 700;
}
.confirmation-reponse-annonce h2 { margin: 0 0 10px; }
.confirmation-reponse-annonce p { margin: 0 auto 22px; max-width: 620px; color: var(--texte); }
.section-reponses-demo {
margin-top: 58px;
padding-top: 40px;
border-top: 2px solid var(--bordure);
}
.section-reponses-demo .introduction-moderation h2 {
margin: 8px 0 12px;
font-size: 32px;
}
.liste-reponses-annonces { display: grid; gap: 16px; }
.carte-reponse-annonce {
padding: 22px;
border: 1px solid var(--bordure);
border-radius: 16px;
background: #fff;
box-shadow: 0 5px 18px rgba(0,0,0,.04);
}
.carte-reponse-annonce h3 { margin: 0 0 12px; font-size: 21px; }
.message-reponse-annonce {
margin: 14px 0;
padding: 14px 16px;
border-radius: 10px;
background: #f7fafc;
color: #334b63;
white-space: pre-wrap;
}
.date-reponse-annonce { margin: 0; color: #60758d; font-size: 14px; }
@media (max-width: 700px) {
.actions-carte-annonce { align-items: stretch; }
.bouton-repondre-annonce { width: 100%; }
}
/* AUTHENTIFICATION SUPABASE */
.page-auth { min-height: calc(100vh - 80px); padding: 55px 6% 80px; background: var(--fond); }
.auth-conteneur { max-width: 1050px; margin: 0 auto; }
.auth-conteneur > h1 { margin: 0 0 12px; font-size: 44px; }
.auth-intro { max-width: 760px; margin: 0 0 30px; font-size: 18px; color: var(--texte); }
.grille-auth { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.carte-auth { height: 100%; padding: 30px; }
.carte-auth h2 { margin: 0 0 24px; font-size: 28px; }
.message-formulaire { margin: 0 0 24px; padding: 15px 18px; border-radius: 10px; font-weight: 700; }
.message-info { background: #eef6ff; color: #285c8f; border: 1px solid #cddff1; }
.message-succes { background: #edf8ef; color: #27673a; border: 1px solid #cce6d2; }
.message-erreur { background: #fff0f0; color: #8a3030; border: 1px solid #efcccc; }
.auth-connecte { margin-top: 24px; }
.encadre-compte { background: #f1faf3; border-left-color: var(--vert); }
.auth-etat { margin: 0; color: var(--vert-fonce) !important; font-weight: 700; }
.auth-actions-compte { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bouton-auth-secondaire { padding: 11px 16px; border: 1px solid var(--bleu); border-radius: 9px; background: #fff; color: var(--bleu); font: inherit; font-weight: 700; cursor: pointer; }
.bouton-auth-secondaire:hover { background: var(--bleu-clair); }
.auth-recuperation { margin-top: 28px; padding: 18px 20px; background: #fff; border: 1px solid var(--bordure); border-radius: 12px; }
.auth-recuperation summary { cursor: pointer; font-weight: 700; }
.mini-form-auth { margin-top: 18px; }
.mini-form-auth label { display: block; margin-bottom: 8px; font-weight: 700; }
.ligne-auth { display: flex; gap: 10px; }
.ligne-auth input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #b8c6d4; border-radius: 9px; font: inherit; }
@media (max-width: 800px) {
.grille-auth { grid-template-columns: 1fr; }
.ligne-auth { flex-direction: column; }
.auth-conteneur > h1 { font-size: 36px; }
}
/* MODÉRATION SUPABASE */
.badge-source-annonce {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
background: #f2f4f7;
color: #53677c;
font-size: .82rem;
font-weight: 700;
}
.meta-moderation {
margin: 6px 0 12px;
color: #60758d;
font-size: .94rem;
}
.consentement-moderation {
margin-top: 6px;
font-size: .86rem;
}
.bouton-publier:disabled,
.bouton-refuser:disabled {
opacity: .55;
cursor: wait;
}
.etat-erreur-annonces {
color: #8a3030;
background: #fff0f0;
border-color: #efcccc;
}
/* ---------- Espace personnel / mes annonces ---------- */
.page-compte { min-height: calc(100vh - 80px); padding: 55px 6% 80px; background: var(--fond); }
.compte-conteneur { max-width: 1050px; margin: 0 auto; }
.compte-conteneur > h1 { margin: 0 0 12px; font-size: 44px; }
.compte-intro { max-width: 800px; margin: 0 0 30px; font-size: 18px; line-height: 1.6; color: var(--texte); }
.section-mes-annonces { margin-top: 42px; }
.entete-section-compte { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.entete-section-compte h2 { margin: 5px 0 0; font-size: 32px; }
.badge-compte { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 700; }
.etat-compte { padding: 24px; border: 1px solid var(--bordure); border-radius: 14px; background: #fff; color: var(--texte); }
.liste-mes-annonces { display: grid; gap: 24px; }
.carte-mes-annonces { padding: 24px; border: 1px solid #d9e1ea; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.05); }
.carte-mes-annonces h3 { margin: 12px 0 8px; font-size: 26px; color: var(--bleu-fonce); }
.meta-compte-annonce { margin: 0 0 16px; color: #60758d; }
.dispo-compte-annonce { margin: 14px 0 0; }
.badge-statut-compte { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #edf1f5; color: #40536a; }
.badge-statut-publiee { background: #eaf7ed; color: #25683a; }
.badge-statut-en-attente { background: #fff4dc; color: #7d5610; }
.badge-statut-refusee, .badge-statut-masquee { background: #fbeaea; color: #8c3030; }
.badge-statut-terminee { background: #edf1f5; color: #536273; }
.actions-compte-annonce { margin-top: 18px; }
.bouton-terminer-annonce { padding: 10px 15px; border: 1px solid #507660; border-radius: 9px; background: #f2faf4; color: #245b36; font: inherit; font-weight: 700; cursor: pointer; }
.bouton-terminer-annonce:hover { background: #e6f5ea; }
.bouton-terminer-annonce:disabled { opacity: .6; cursor: wait; }
.annonce-terminee-info { margin: 15px 0 0; padding: 10px 12px; border-radius: 9px; background: #f2f5f7; color: #536273; font-weight: 700; }
.reponses-recues-compte { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dfe6ed; }
.reponses-recues-compte h4 { margin: 0 0 14px; font-size: 20px; color: var(--bleu-fonce); }
.aucune-reponse-compte { margin: 0; color: #60758d; }
.reponse-recue-compte { margin-top: 12px; padding: 17px 18px; border: 1px solid #dce5ee; border-radius: 12px; background: #f8fafc; }
.entete-reponse-compte { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; }
.entete-reponse-compte strong { color: var(--bleu-fonce); }
.entete-reponse-compte span { color: #60758d; font-size: 14px; }
.message-reponse-compte { margin: 13px 0; line-height: 1.55; }
.coordonnees-reponse-compte { padding: 11px 13px; border-radius: 9px; background: #eef4fa; line-height: 1.5; }
.lien-contact-prive { color: var(--bleu); font-weight: 700; overflow-wrap: anywhere; }
.lien-bouton-auth { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 700px) {
.compte-conteneur > h1 { font-size: 36px; }
.entete-section-compte { align-items: flex-start; flex-direction: column; }
.entete-section-compte h2 { font-size: 28px; }
.entete-reponse-compte { flex-direction: column; gap: 4px; }
}