/* ============================================================
AJPG.fr — feuille de style
Thème : « Au-dessus de la mer de nuages »
Inspiré de la photo d'accueil (randonneur au couchant, mer de nuages)
Polices (à ajouter dans le , avant ce fichier) :
Si vous préférez ne rien charger d'externe, commentez le bloc
@import ci-dessous : tout retombera sur une pile de polices système.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
/* ------------------------------------------------------------
1. Palette & tokens
------------------------------------------------------------ */
:root{
/* couleurs — palette "couchant sur mer de nuages" */
--nuit: #212e1c; /* crête / forêt en ombre chinoise */
--nuit-2: #2c3d24;
--mousse: #4d6b3f; /* vert mousse — accent principal */
--mousse-clair:#7fa066;
--couchant: #e07a3f; /* orange couchant — accent secondaire / liens */
--couchant-2: #f0a35c;
--dusk: #9a5a72; /* mauve du ciel — badges alpinisme */
--ciel: #3f6583; /* bleu dusk — cotation via ferrata */
--glacier: #5f96b0; /* bleu glacier — ski */
--banquise: #2f9c9c; /* turquoise — glace */
--ardoise: #6b7a72; /* gris-vert — raquettes */
--terre: #8a5a3b; /* brun — VTT */
--nuage: #faf7f1; /* blanc "nuage" — fond du contenu */
--nuage-2: #f1ece1;
--sable: #ece4d3;
--encre: #262420; /* texte principal */
--encre-douce: #6b675d; /* texte secondaire */
--trait: #e4ddcc; /* lignes / séparateurs discrets */
--blanc: #ffffff;
/* typographie */
--f-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
--f-texte: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* forme */
--rayon-s: 8px;
--rayon-m: 14px;
--rayon-l: 22px;
--ombre-s: 0 2px 8px rgba(33, 46, 28, .10);
--ombre-m: 0 10px 30px rgba(33, 46, 28, .16);
--ombre-l: 0 22px 55px rgba(33, 46, 28, .28);
}
/* ------------------------------------------------------------
2. Reset léger & base
------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: var(--f-texte);
font-size: 16px;
line-height: 1.55;
color: var(--encre);
background:
radial-gradient(1200px 600px at 15% -10%, #3a4d2f 0%, transparent 60%),
linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 45%, #384a2e 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--couchant); text-decoration: none; }
a:hover{ color: var(--couchant-2); }
::selection{ background: var(--couchant); color: #fff; }
:focus-visible{
outline: 3px solid var(--couchant-2);
outline-offset: 2px;
border-radius: 4px;
}
h1, h2, h3{ font-family: var(--f-display); font-weight: 600; margin: 0 0 .4em; color: var(--nuit); }
/* ------------------------------------------------------------
3. Conteneur général — la page "flotte" comme un plateau
au-dessus de la mer de nuages du fond
------------------------------------------------------------ */
#conteneur{
max-width: 1100px;
margin: 0 auto 28px;
background: var(--nuage);
border-radius: 0 0 var(--rayon-l) var(--rayon-l);
overflow: hidden;
box-shadow: var(--ombre-l);
}
/* ------------------------------------------------------------
4. En-tête — bandeau "couchant / mer de nuages"
------------------------------------------------------------ */
#header{
position: relative;
padding: 64px 32px 96px;
text-align: center;
color: #fff;
background:
linear-gradient(180deg, rgba(20,16,20,.10) 0%, rgba(20,16,20,.45) 100%),
url('/styles/couverture02.jpeg') center / cover no-repeat;
overflow: hidden;
}
/* mer de nuages en pied de bandeau, se fond dans le contenu */
#header::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 130px;
background: linear-gradient(180deg, rgba(250,247,241,0) 0%, var(--nuage) 92%);
pointer-events: none;
}
#header h1{
position: relative;
z-index: 1;
margin: 0;
padding-bottom: 18px;
font-size: clamp(2.1rem, 5vw, 3.5rem);
font-weight: 600;
letter-spacing: .015em;
}
#header h1 a{
display: inline-block;
color: #fff;
background: linear-gradient(100deg, #ffffff 0%, #ffedd0 45%, #ffcf94 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 28px rgba(20,14,10,.45);
transition: filter .2s ease, transform .2s ease;
}
#header h1 a:hover{ filter: brightness(1.12); transform: translateY(-1px); }
/* petit trait décoratif sous le titre, comme un liseré de crête */
#header h1::after{
content: "";
position: absolute;
left: 50%; bottom: 0;
width: 72px; height: 2px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
border-radius: 2px;
}
/* ------------------------------------------------------------
5. Navigation "sac à dos" (nav#menu) — non utilisée visuellement,
on la masque proprement plutôt que de la supprimer du DOM
------------------------------------------------------------ */
nav#menu{ display: none; }
/* ------------------------------------------------------------
6. Onglets de section (nav#smenu)
------------------------------------------------------------ */
nav#smenu{
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: -40px 20px 0;
padding: 10px;
background: rgba(33, 46, 28, .82);
backdrop-filter: blur(6px);
border-radius: var(--rayon-m);
box-shadow: var(--ombre-m);
}
nav#smenu span a{
display: inline-block;
padding: 10px 18px;
border-radius: 999px;
color: #eef0e6;
font-weight: 600;
font-size: .92rem;
letter-spacing: .01em;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
nav#smenu span a:hover{
background: rgba(255,255,255,.10);
color: #fff;
}
nav#smenu span a.active{
background: var(--couchant);
color: #fff;
box-shadow: 0 4px 14px rgba(224,122,63,.45);
}
@media (max-width: 560px){
nav#smenu{ margin-top: -28px; }
nav#smenu span a{ padding: 8px 12px; font-size: .85rem; }
}
/* ------------------------------------------------------------
7. Zone de contenu générale
------------------------------------------------------------ */
#article{
position: relative;
padding: 34px clamp(16px, 4vw, 40px) 50px;
}
/* bouton flottant "ajouter une nouvelle" (admin) */
#article > p[style*="position: fixed"]{
position: fixed !important;
right: 18px !important;
bottom: 18px !important;
top: auto !important;
z-index: 40;
margin: 0;
opacity: .55;
transition: opacity .18s ease, transform .18s ease;
}
#article > p[style*="position: fixed"]:hover{ opacity: 1; transform: translateY(-2px); }
#article > p[style*="position: fixed"] img{
width: 40px; height: 40px;
padding: 8px;
background: var(--nuit);
border-radius: 50%;
box-shadow: var(--ombre-s);
}
/* ------------------------------------------------------------
8. Filtres (région / pays / année)
------------------------------------------------------------ */
#geofiltre, #filtre-annee{
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: center;
margin-bottom: 28px;
padding: 16px 20px;
background: var(--nuage-2);
border: 1px solid var(--trait);
border-radius: var(--rayon-m);
}
.geoselect{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#geofiltre label, #filtre-annee label{
font-family: var(--f-display);
font-size: .92rem;
color: var(--nuit);
}
#geofiltre select, #filtre-annee select{
appearance: none;
font-family: var(--f-texte);
font-size: .9rem;
padding: 8px 34px 8px 12px;
border: 1px solid var(--trait);
border-radius: 999px;
background: var(--blanc) url("data:image/svg+xml;utf8,") no-repeat right 14px center;
color: var(--encre);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
#geofiltre select:hover, #filtre-annee select:hover{ border-color: var(--mousse-clair); }
#geofiltre select:focus, #filtre-annee select:focus{
outline: none;
border-color: var(--mousse);
box-shadow: 0 0 0 3px rgba(77,107,63,.18);
}
/* ==============================================================
9. Grille d'activités — page « Sélection d'activités »
============================================================== */
#article{ display: block; }
article.billet.liste{
position: relative;
}
/* les successifs deviennent une grille de cartes */
#article > article.billet.liste{
display: inline-block; /* fallback */
}
/* On enveloppe visuellement via un conteneur grid généré par le
fait que tous les .billet.liste sont frères directs de #article */
.liste #article{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 300px));
justify-content: center;
gap: 22px;
align-items: start;
}
/* les éléments qui ne sont pas des cartes reprennent toute la largeur */
#article > p,
#article > #geofiltre,
#article > #filtre-annee,
#article > .pagination,
#article > table,
#article > #vracphoto,
#article > article.billet:not(.liste){
grid-column: 1 / -1;
}
article.billet.liste{
display: flex;
flex-direction: column;
background: var(--blanc);
border-radius: var(--rayon-m);
overflow: hidden;
box-shadow: var(--ombre-s);
transition: transform .22s ease, box-shadow .22s ease;
}
article.billet.liste:hover{
transform: translateY(-5px);
box-shadow: var(--ombre-m);
}
article.billet.liste .modif{
position: absolute;
top: 10px; right: 10px;
z-index: 3;
opacity: 0;
transition: opacity .18s ease;
}
article.billet.liste:hover .modif{ opacity: .85; }
article.billet.liste .modif img{
width: 22px; height: 22px;
padding: 6px;
background: rgba(255,255,255,.92);
border-radius: 50%;
box-shadow: var(--ombre-s);
}
article.billet.liste p.bimage{
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sable);
}
article.billet.liste p.bimage a{ display: block; width: 100%; height: 100%; }
article.billet.liste p.bimage img.ombre{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
article.billet.liste:hover p.bimage img.ombre{ transform: scale(1.06); }
h3.ligne_activite{
margin: 0;
padding: 14px 16px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
flex: 1;
}
.part_gauche{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
font-weight: 400;
}
.pretype{
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: var(--nuage-2);
border-radius: 50%;
margin-right: 2px;
}
.pretype img{ width: 16px; height: 16px; }
.predate{
font-family: var(--f-mono);
font-size: .74rem;
letter-spacing: .02em;
color: var(--encre-douce);
text-transform: uppercase;
}
.prekm{
flex-basis: 100%;
font-family: var(--f-mono);
font-size: .78rem;
color: var(--mousse);
font-weight: 700;
margin: 2px 0 4px;
}
h3.ligne_activite .part_gauche > a{
flex-basis: 100%;
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--nuit);
line-height: 1.3;
}
h3.ligne_activite .part_gauche > a:hover{ color: var(--couchant); }
.part_droite{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
/* badges de cotation */
.badge_diff{
display: inline-block;
padding: 3px 9px;
font-family: var(--f-mono);
font-size: .72rem;
font-weight: 700;
color: #fff;
border-radius: 999px;
white-space: nowrap;
}
.badge_diff.diff_ped{ background: var(--mousse); } /* marche / rando */
.badge_diff.diff_esc{ background: var(--couchant); } /* escalade */
.badge_diff.diff_alp{ background: var(--dusk); } /* alpinisme */
.badge_diff.diff_via{ background: var(--ciel); } /* via ferrata */
.badge_diff.diff_ski{ background: var(--glacier); } /* ski */
.badge_diff.diff_eis{ background: var(--banquise); } /* glace */
.badge_diff.diff_raq{ background: var(--ardoise); } /* raquettes */
.badge_diff.diff_mtb{ background: var(--terre); } /* vtt */
/* ------------------------------------------------------------
10. Pagination
------------------------------------------------------------ */
p.pagination{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin: 8px 0 0;
font-family: var(--f-mono);
font-size: .85rem;
color: var(--encre-douce);
}
p.pagination a, p.pagination > span{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px; height: 34px;
padding: 0 10px;
border-radius: 999px;
color: var(--nuit);
}
p.pagination > span{ background: var(--nuit); color: #fff; font-weight: 700; }
p.pagination a{ background: var(--nuage-2); transition: background .15s ease, color .15s ease; }
p.pagination a:hover{ background: var(--mousse); color: #fff; }
p.pagination a.psuite{
background: var(--couchant);
color: #fff;
padding: 0 18px;
font-family: var(--f-texte);
font-weight: 600;
}
p.pagination a.psuite:hover{ background: var(--couchant-2); }
/* ==============================================================
11. Tableau « Toutes les activités »
============================================================== */
table#tact{
width: 100%;
border-collapse: collapse;
background: var(--blanc);
border: 1px solid var(--trait);
border-radius: var(--rayon-m);
overflow: hidden;
}
table#tact tr{ border-bottom: 1px solid var(--trait); transition: background .15s ease; }
table#tact tr:last-child{ border-bottom: none; }
table#tact tr:hover{ background: var(--nuage-2); }
table#tact td{ padding: 10px 12px; vertical-align: middle; font-size: .92rem; }
table#tact td.timg{ width: 76px; padding: 8px; }
table#tact td.timg img{
width: 64px; height: 64px;
object-fit: cover;
border-radius: var(--rayon-s);
}
table#tact td.name a{
font-family: var(--f-display);
font-weight: 600;
color: var(--nuit);
font-size: 1rem;
}
table#tact td.name a:hover{ color: var(--couchant); }
table#tact td.tdepart{ color: var(--encre-douce); font-size: .85rem; white-space: nowrap; }
table#tact td.tdepart b{ color: var(--encre); }
table#tact td.tkm{ font-family: var(--f-mono); font-weight: 700; color: var(--mousse); white-space: nowrap; }
table#tact td:not(.timg):not(.name):not(.tdepart):not(.tkm):not(.ttype){
font-family: var(--f-mono);
font-size: .85rem;
color: var(--encre-douce);
white-space: nowrap;
}
table#tact td:not(.timg):not(.name):not(.tdepart):not(.tkm):not(.ttype) span{ color: var(--couchant); font-weight: 700; }
table#tact td.ttype{ width: 40px; text-align: center; }
table#tact td.ttype img{ width: 22px; height: 22px; margin: 0 auto; }
/* Vue "carte" sur mobile, sans toucher au HTML */
@media (max-width: 720px){
table#tact thead{ display: none; }
table#tact, table#tact tbody{ display: block; width: 100%; }
table#tact tr{
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 6px;
padding: 12px;
}
table#tact td{ padding: 0; border: none; }
table#tact td.timg{ flex: 0 0 64px; }
table#tact td.name{
flex: 1 1 calc(100% - 76px);
min-width: 140px;
padding-left: 12px;
}
/* date, distance, D+ (td sans classe) et type : une ligne sous le titre,
alignée au même niveau (après la vignette) */
table#tact td.tdepart,
table#tact td.tkm,
table#tact td.ttype,
table#tact td:not(.timg):not(.name){
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
table#tact td.tdepart{ padding-left: 76px; }
table#tact td.tkm{ padding-left: 10px; }
table#tact td:not(.timg):not(.name):not(.tdepart):not(.tkm):not(.ttype){ padding-left: 10px; }
table#tact td.ttype{ margin-left: auto; padding-left: 10px; }
table#tact td.ttype img{ margin: 0; }
}
/* ==============================================================
12. Photos en vrac
============================================================== */
#vracphoto ul#auto-loop{
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
justify-content: center;
gap: 18px;
}
#vracphoto ul#auto-loop li{
position: relative;
background: var(--blanc);
border-radius: var(--rayon-m);
overflow: hidden;
box-shadow: var(--ombre-s);
transition: transform .22s ease, box-shadow .22s ease;
}
#vracphoto ul#auto-loop li:hover{ transform: translateY(-5px); box-shadow: var(--ombre-m); }
#vracphoto p.galimg{ margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
#vracphoto p.galimg a{ display: block; width: 100%; height: 100%; }
#vracphoto p.galimg img.fancy{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
#vracphoto li:hover p.galimg img.fancy{ transform: scale(1.06); }
/* bandeau d'icônes (date, téléchargement, géolocalisation) */
#vracphoto .galico{
position: absolute;
inset: 0 0 auto 0;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-family: var(--f-mono);
font-size: .74rem;
font-weight: 700;
color: #fff;
background: linear-gradient(180deg, rgba(33,46,28,.75) 0%, rgba(33,46,28,0) 100%);
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease;
}
#vracphoto li:hover .galico{ opacity: 1; transform: translateY(0); }
#vracphoto .galico a{ display: inline-flex; }
/* icônes "lien" et "téléchargement" : simples silhouettes, on les passe en blanc */
#vracphoto .galico > a > img{ width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: .9; }
#vracphoto .galico > a > img:hover{ opacity: 1; transform: scale(1.1); }
/* icônes géoportail / google maps : déjà des badges en couleur,
on les garde telles quelles dans une pastille blanche pour le contraste */
#vracphoto .galico .geolocalisation{
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
#vracphoto .galico .geolocalisation img{
width: 20px; height: 20px;
padding: 2px;
background: rgba(255,255,255,.92);
border-radius: 6px;
opacity: .95;
transition: opacity .15s ease, transform .15s ease;
}
#vracphoto .galico .geolocalisation img:hover{ opacity: 1; transform: scale(1.08); }
/* ==============================================================
13. Page d'une activité (détail)
============================================================== */
article.billet:not(.liste){
background: var(--blanc);
border-radius: var(--rayon-l);
padding: clamp(20px, 4vw, 40px);
box-shadow: var(--ombre-s);
overflow: hidden; /* clearfix pour l'icône flottante */
}
article.billet .titretype{
display: flex;
align-items: center;
justify-content: center;
float: right;
width: 64px; height: 64px;
margin: 0 0 16px 20px;
background: var(--nuage-2);
border-radius: 50%;
}
article.billet .titretype img{ width: 38px; height: 38px; }
article.billet h2{
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
color: var(--nuit);
padding-top: 6px;
}
article.billet p.bdate{
clear: right;
font-family: var(--f-mono);
font-size: .85rem;
color: var(--encre-douce);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 18px;
}
div.modf{
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin: 10px 0 20px;
padding: 10px 12px;
background: var(--nuage-2);
border-radius: var(--rayon-s);
font-family: var(--f-texte);
font-size: .85rem;
}
div.modf img{ width: 22px; height: 22px; opacity: .8; }
div.modf img:hover{ opacity: 1; }
#sdescription{
font-family: var(--f-display);
font-size: 1.1rem;
color: var(--nuit);
background: var(--nuage-2);
border-left: 4px solid var(--couchant);
padding: 14px 18px;
border-radius: var(--rayon-s);
margin-bottom: 24px;
}
#donneessport{
display: grid;
grid-template-columns: minmax(200px, 320px) 1fr;
gap: 22px;
align-items: center;
background: var(--nuage-2);
border-radius: var(--rayon-m);
padding: 18px;
margin-bottom: 28px;
}
#donneessport img#carte_strava{
width: 100%;
border-radius: var(--rayon-s);
box-shadow: var(--ombre-s);
}
#donneessport ul{
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px 18px;
}
#donneessport ul li{
font-size: .82rem;
color: var(--encre-douce);
border-bottom: 1px dashed var(--trait);
padding-bottom: 8px;
}
#donneessport ul li span{
display: block;
font-family: var(--f-mono);
font-size: 1.05rem;
font-weight: 700;
color: var(--nuit);
margin-top: 2px;
}
#donneessport .lstrava,
#donneessport .ldropbox,
#donneessport .lrelive{
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 12px 4px 8px;
border-radius: 999px;
color: #fff !important;
font-weight: 700;
font-size: .74rem;
letter-spacing: .03em;
}
#donneessport .lstrava::before,
#donneessport .ldropbox::before,
#donneessport .lrelive::before{
content: "";
width: 15px; height: 15px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter: brightness(0) invert(1);
}
#donneessport .lstrava{ background: #fc4c02; }
#donneessport .lstrava::before{ background-image: url('/styles/social_strava15.png'); }
#donneessport .ldropbox{ background: var(--ciel); }
#donneessport .ldropbox::before{ background-image: url('/styles/dropbox15.png'); }
#donneessport .lrelive{ background: var(--mousse); }
#donneessport .lrelive::before{ background-image: url('/styles/reliveNB15.png'); }
@media (max-width: 720px){
#donneessport{ grid-template-columns: 1fr; }
}
/* galerie de la page détail : grandes photos empilées */
#galeriephoto ul#auto-loop{
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
#galeriephoto .galico{
float: right;
}
#galeriephoto .galico img {
display:inline;
margin:0 3px;
}
#galeriephoto p.galimg{ margin: 0; text-align: center; }
#galeriephoto p.galimg img.fancy{
width: auto;
height: auto;
max-width: 100%;
max-height: 82vh;
margin: 0 auto;
border-radius: var(--rayon-m);
box-shadow: var(--ombre-s);
cursor: zoom-in;
transition: box-shadow .2s ease;
}
#galeriephoto p.galimg img.fancy:hover{ box-shadow: var(--ombre-m); }
#galeriephoto iframe.geolocalisation{ display: none; } /* widget technique discret */
img#carte_google{
display: block;
width: auto;
height: auto;
max-width: 100%;
margin: 28px auto;
border-radius: var(--rayon-m);
box-shadow: var(--ombre-s);
}
#gpx{ margin: 12px 0 28px; }
#disqus_thread{
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--trait);
}
/* ------------------------------------------------------------
14. Pied de page
------------------------------------------------------------ */
footer{
text-align: center;
padding: 26px;
background: var(--nuit);
color: #cfd8c6;
font-size: .85rem;
}
footer a{
display: inline-flex;
align-items: center;
gap: 8px;
color: #cfd8c6;
font-weight: 600;
}
footer a:hover{ color: #fff; }
footer img{ width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: .85; }
/* ------------------------------------------------------------
15. Ajustements responsive généraux
------------------------------------------------------------ */
@media (max-width: 900px){
#conteneur{ margin: 0; border-radius: 0; }
#header{ padding: 46px 20px 84px; }
}
@media (max-width: 480px){
#article{ grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px 14px 40px; }
#vracphoto ul#auto-loop{ grid-template-columns: 1fr 1fr; gap: 12px; }
h3.ligne_activite{ padding: 10px 12px 12px; }
}
@media (max-width: 340px){
#article{ grid-template-columns: 1fr; }
#vracphoto ul#auto-loop{ grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
16. Respect de la préférence "mouvement réduit"
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
*{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}