/* MyGeek — feuille de style partagée */
:root {
--bg: #17141c;
--surface: #211d29;
--text: #f5f1ec;
--text-secondary: #a79db0;
--border: #322c3d;
--amber: #f5a93f;
--teal: #2fd1c0;
--coral: #f2617a;
--radius: 14px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
}
body {
font-family: 'Work Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
background:
radial-gradient(720px circle at 12% 6%, rgba(245,169,63,0.16), transparent 60%),
radial-gradient(820px circle at 92% 20%, rgba(242,97,122,0.13), transparent 60%),
radial-gradient(600px circle at 60% 90%, rgba(47,209,192,0.08), transparent 60%),
var(--bg);
background-attachment: fixed;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
/* Nicolas veut les paragraphes en justifie (6 sept.) : regle posee sur l'element p lui-meme
(specificite la plus faible), donc toute classe plus specifique qui a deja un text-align
(.ql-align-center/.ql-align-right dans les articles, th/td, etc.) continue a l'emporter sans
rien y toucher. Un paragraphe d'une seule ligne n'est de toute facon jamais visuellement
affecte par justify (seule la derniere ligne d'un paragraphe multi-lignes n'est pas etiree).
hyphens:auto ajoute en complement : sans coupure de mots, un texte justifie sur une colonne
etroite (mobile) cree souvent de grands trous entre les mots des qu'un mot long ne rentre pas
sur une ligne. Fonctionne nativement en francais grace a deja present sur
toutes les pages. Non verifiable dans ce bac a sable (Chromium local sans dictionnaire de
cesure), mais -webkit-hyphens est bien supporte par Safari iOS, donc actif sur l'iPhone de
Nicolas ; ne degrade rien si un navigateur ne le supporte pas (justify seul s'applique alors). */
p { margin: 0; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
a { color: inherit; text-decoration: none; }
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* Header / nav */
.site-header { border-bottom: 1px solid var(--border); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 24px; }
.logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; }
/* Le logo est desormais l'image combinee icone+texte (386x104 en dur dans le HTML) : sans
cette regle, elle garde sa taille native sur mobile, occupe quasiment tout l'ecran et fait
deborder toute la barre du haut horizontalement (texte colle aux bords sur le reste du site). */
@media (max-width: 860px) {
/* Nicolas trouve la version du 6 sept. (32px) trop petite alors qu'il y a de la place :
on agrandit avec un clamp() qui suit la largeur d'ecran (jusqu'a 64px, 2x la taille initiale,
sur les iPhone les plus larges) tout en restant sous le seuil de recollision avec le bouton
Admin sur les petits ecrans (verifie jusqu'a 360px de large). Le bouton Admin est legerement
resserre en mobile (voir plus bas, dans le bloc mobile qui suit ses regles de base pour bien
les surcharger) pour degager la place necessaire, sans toucher a son apparence desktop. */
.logo-full { height: clamp(48px, 15vw, 64px); width: auto; max-width: 60vw; }
}
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav a { font-size: 14px; color: var(--text-secondary); transition: color 0.15s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-admin {
font-size: 13px; font-weight: 500; padding: 9px 20px;
background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.btn-admin:hover { border-color: var(--amber); }
.nav-toggle {
display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 8px; cursor: pointer;
}
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--surface); border-bottom: 1px solid var(--border);
flex-direction: column; align-items: flex-start; gap: 0;
max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
}
.site-nav.is-open { max-height: 320px; }
.site-nav a { width: 100%; padding: 14px 24px; border-bottom: 1px solid var(--border); }
/* Resserre le bouton Admin pour degager la place necessaire au logo agrandi ci-dessus
(regle placee ici, apres les regles de base .header-actions/.btn-admin, pour bien les
surcharger — un media query n'ajoute aucune specificite CSS supplementaire). */
.header-actions { gap: 8px; }
.btn-admin { padding: 7px 12px; font-size: 12px; }
}
/* Buttons */
.btn-primary {
display: inline-block;
background: linear-gradient(135deg, var(--amber), var(--coral));
color: var(--bg); padding: 14px 28px; border-radius: var(--radius);
font-size: 15px; font-weight: 700;
}
.link-underline { border-bottom: 1px solid var(--border); padding-bottom: 2px; font-weight: 500; }
/* Hero */
/* padding-top/bottom en longhand (pas le raccourci "padding: 88px 0 80px") : ce raccourci
remettrait aussi le padding gauche/droit a 0, ce qui annule le "padding: 0 24px" de
.container sur tout element qui cumule les deux classes (class="hero container") — invisible
sur grand ecran (le max-width de .container laisse de la marge de toute facon) mais donne un
texte colle aux bords sur mobile/tablette. Meme raison pour tous les .xxx-body ci-dessous. */
.hero { position: relative; padding-top: 88px; padding-bottom: 80px; }
/* Page Actus : hero resserre pour faire remonter les articles (le contenu de la page est la
priorite, pas l'entete). */
.actus-page .hero { padding-top: 40px; padding-bottom: 36px; }
/* Page Actus : le bandeau CTA en bas de page doit faire toute la largeur du .container
(comme la section des articles), pas la largeur reduite (900px) de la regle .cta-banner
de base utilisee par index.html/tag.html/videos.html. */
.actus-page .cta-banner { max-width: 1180px; }
.hero-inner { display: flex; flex-direction: column; gap: 18px; }
.greeting { font-size: 16px; font-weight: 600; color: var(--amber); }
.kicker {
display: inline-block; width: fit-content; font-family: 'IBM Plex Mono', monospace;
font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--amber); background: rgba(245,169,63,0.12); padding: 7px 16px; border-radius: 999px;
}
.hero h1 { font-size: 56px; line-height: 1.1; }
.hero p.lead { font-size: 19px; line-height: 1.6; color: var(--text-secondary); max-width: 600px; }
.highlight { position: relative; display: inline-block; }
.highlight::before {
content: ""; position: absolute; left: -6px; right: -6px; bottom: 6px; height: 18px;
background: var(--coral); opacity: 0.32; border-radius: 5px; transform: rotate(-1deg);
}
.highlight span { position: relative; }
.cta-row { display: flex; align-items: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
/* Carte "tutos" à côté du hero (accueil) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); gap: 36px; align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-learn-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px;
box-shadow: 0 20px 40px -20px rgba(47,209,192,0.35); transition: transform 0.15s, border-color 0.15s;
/* min-width:0 indispensable : .hero-learn-card est un item de la grille .hero-grid, et un item
de grille/flex a par defaut une largeur minimale automatique basee sur son contenu. Or
.hero-article-text h4 est en white-space:nowrap (pour l'ellipse "...") : un titre d'article
long et non coupable pousse alors TOUTE la largeur minimale de la carte (et donc de la colonne
de grille partagee avec .hero-inner, en layout mobile 1 colonne) bien au-dela de l'ecran,
provoquant un debordement horizontal de toute la colonne de gauche du hero. */
min-width: 0;
}
.hero-learn-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.hero-learn-kicker {
font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
}
.hero-learn-card h2 { font-size: 21px; line-height: 1.25; }
.hero-learn-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
/* Aperçus dynamiques des derniers articles, dans la carte "blog" du hero */
.hero-article-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.hero-article-card {
display: flex; gap: 12px; align-items: center; padding: 8px; margin: -8px;
border-radius: 10px; transition: background 0.15s, transform 0.15s;
}
.hero-article-card:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }
.hero-article-thumb {
width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg);
}
.hero-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-article-thumb .actus-cover-placeholder { min-height: 0; width: 100%; height: 100%; }
.hero-article-thumb .actus-cover-placeholder svg { width: 18px; height: 18px; }
.hero-article-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-article-text h4 {
font-size: 13.5px; line-height: 1.3; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-article-card:hover h4 { color: var(--teal); }
.hero-article-text .actus-date { font-size: 11px; }
/* Petites animations d'entree discretes (desactivees si l'utilisateur prefere moins de mouvement) */
@media (prefers-reduced-motion: no-preference) {
.hero-inner, .hero-learn-card { animation: hero-fade-up 0.6s ease-out both; }
.hero-learn-card { animation-delay: 0.12s; }
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* Breadcrumb (theme pages) */
.breadcrumb { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.breadcrumb:hover { color: var(--text); }
/* Poles grid (homepage) */
.poles { padding-bottom: 100px; display: flex; flex-direction: column; gap: 32px; }
.poles-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.poles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .poles-grid { grid-template-columns: 1fr; } }
.pole-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 36px 30px; display: flex; flex-direction: column; gap: 16px;
}
.pole-card.amber { box-shadow: 0 20px 40px -20px rgba(245,169,63,0.35); }
.pole-card.teal { box-shadow: 0 20px 40px -20px rgba(47,209,192,0.35); }
.pole-card.coral { box-shadow: 0 20px 40px -20px rgba(242,97,122,0.35); }
.icon-badge {
width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
border-radius: 42% 58% 60% 40% / 50% 45% 55% 50%;
}
.icon-badge.amber { background: rgba(245,169,63,0.16); box-shadow: 0 0 24px rgba(245,169,63,0.25); color: var(--amber); transform: rotate(-6deg); }
.icon-badge.teal { background: rgba(47,209,192,0.16); box-shadow: 0 0 24px rgba(47,209,192,0.25); color: var(--teal); transform: rotate(5deg); }
.icon-badge.coral { background: rgba(242,97,122,0.16); box-shadow: 0 0 24px rgba(242,97,122,0.25); color: var(--coral); transform: rotate(-4deg); }
.icon-badge svg { transform: rotate(6deg); }
.pole-card h3 { font-size: 20px; }
.pole-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.pole-link { font-size: 14px; font-weight: 600; margin-top: 4px; }
.pole-link.amber { color: var(--amber); }
.pole-link.teal { color: var(--teal); }
.pole-link.coral { color: var(--coral); }
/* Two-column services grid (homepage) */
.poles-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .poles-grid.cols-2 { grid-template-columns: 1fr; } }
/* Generic info sections (homepage: comment ça marche, matériel...) */
.info-section { padding-bottom: 90px; }
.section-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.info-section h2 { font-size: 28px; margin-bottom: 14px; max-width: 720px; }
.info-section .lead-sm { font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 680px; margin-bottom: 8px; }
/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { display: flex; flex-direction: column; gap: 10px; }
.step-number {
font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--teal);
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.process-step h3 { font-size: 16px; }
.process-step p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
/* Materiel / matériaux */
.materiel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
@media (max-width: 700px) { .materiel-grid { grid-template-columns: 1fr; } }
.materiel-heading { font-size: 16px; margin-bottom: 4px; }
.materiel-note { font-size: 13.5px; color: var(--text-secondary); margin-top: 12px; font-style: italic; }
/* Generic bullet list (reusable outside .theme-page) */
.bullet-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { font-size: 15px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
/* CTA banner */
.cta-banner {
text-align: center; padding: 64px 24px; margin: 0 auto 100px; max-width: 900px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cta-banner h2 { font-size: 26px; }
.cta-banner p { font-size: 15.5px; color: var(--text-secondary); max-width: 480px; }
.cta-banner .btn-primary { margin-top: 6px; }
/* Actus — press-style landing page */
.actus-body { padding-bottom: 110px; display: flex; flex-direction: column; gap: 56px; }
.actus-own-wrap { display: flex; flex-direction: column; gap: 28px; }
/* Filtre par tag + recherche (page Actus) — barre persistante au-dessus de la grille/liste,
masquee (display:none, voir actus.js) sur le detail d'un article et la vue Archives. */
.actus-search-row { display: flex; }
.actus-search-input {
width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 11px 18px; color: var(--text); font-family: inherit; font-size: 14.5px;
}
.actus-search-input::placeholder { color: var(--text-secondary); }
.actus-search-input:focus { outline: none; border-color: var(--teal); }
.actus-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actus-filter-chip {
font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.02em;
color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.actus-filter-chip:hover { border-color: var(--teal); color: var(--text); }
.actus-filter-chip.is-active { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.actus-archived-badge {
display: inline-block; margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
background: rgba(255,255,255,0.06); border-radius: 999px; padding: 2px 8px;
}
.actus-featured {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: stretch;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
text-decoration: none; color: inherit; margin-bottom: 32px; transition: border-color 0.15s ease;
}
.actus-featured:hover { border-color: var(--teal); }
@media (max-width: 780px) { .actus-featured { grid-template-columns: 1fr; } }
.actus-featured-media { position: relative; min-height: 260px; }
.actus-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-cover-placeholder {
width: 100%; height: 100%; min-height: 260px; position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--teal), var(--amber));
}
.actus-cover-placeholder::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.5px);
background-size: 14px 14px; opacity: 0.2; mix-blend-mode: overlay;
}
.actus-cover-placeholder svg { position: relative; color: rgba(255,255,255,0.9); }
.actus-featured-body { padding: 36px 36px 36px 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
@media (max-width: 780px) { .actus-featured-body { padding: 0 28px 32px; } }
.actus-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.actus-featured-body h2 { font-size: 26px; line-height: 1.25; }
.actus-featured-body p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; }
#home-actus-grid { margin-bottom: 24px; }
.actus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .actus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .actus-grid { grid-template-columns: 1fr; } }
.actus-card {
display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
/* La carte n'est plus elle-meme un : les tags (voir plus bas) sont des liens propres
vers tag.html, places a cote de ce lien plutot qu'imbriques dedans (un dans un
n'est pas valide en HTML et donnerait un comportement de clic imprevisible). */
.actus-card-link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.actus-card-media { aspect-ratio: 16 / 10; }
.actus-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-card-media .actus-cover-placeholder { min-height: 0; aspect-ratio: 16 / 10; }
.actus-card-body { padding: 4px 20px 10px; display: flex; flex-direction: column; gap: 8px; }
.actus-card h3 { font-size: 16.5px; line-height: 1.35; }
.actus-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.actus-card > .tag-chip-list { padding: 0 20px 18px; }
/* Tags des articles : chips cliquables vers une page dediee par tag (tag.html), utilises
sur les cartes de la grille, la sidebar, et l'entete d'un article. */
.tag-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.02em; color: var(--teal); background: rgba(47,209,192,0.12);
border-radius: 999px; padding: 3px 10px; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.tag-chip:hover { background: var(--teal); color: var(--bg); }
/* Page actus : colonne principale + colonne latérale miniatures (articles < 3 mois, non "à la une") */
.actus-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .actus-layout { grid-template-columns: 1fr; } }
.actus-main .actus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .actus-main .actus-grid { grid-template-columns: 1fr; } }
/* La colonne "Aussi récemment" ne doit jamais rendre la page plus longue que la colonne "à la
une" a cote d'elle (16 sept.). align-items: start (ci-dessus) est indispensable : une grille
CSS en align-items: stretch calcule la hauteur de la ligne a partir du contenu "naturel" des
DEUX colonnes AVANT de les etirer - si la sidebar contient un element a defilement dont le
contenu grandit avec le nombre d'articles, la ligne (donc .actus-main aussi) s'etirerait a la
hauteur du contenu deroulant, ce qui est l'inverse de l'effet recherche. .actus-main garde
donc sa hauteur naturelle, et actus.js (voir syncSidebarHeight) mesure cette hauteur en JS et
la reporte comme max-height sur .actus-sidebar, dont seule .actus-sidebar-list defile. En
layout mobile empile (960px), il n'y a plus de colonne voisine a mesurer : on limite alors la
colonne entiere a une hauteur fixe raisonnable, avec le meme defilement interne. */
.actus-sidebar {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 24px 20px;
display: flex; flex-direction: column; min-height: 0;
}
@media (max-width: 960px) { .actus-sidebar { max-height: 420px !important; } }
.actus-sidebar-label {
font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px;
}
.actus-sidebar-list {
display: flex; flex-direction: column; gap: 16px;
flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
padding-right: 6px; margin-right: -6px;
}
.actus-sidebar-card { display: flex; gap: 12px; align-items: flex-start; }
.actus-sidebar-thumb {
width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg);
}
.actus-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-sidebar-thumb .actus-cover-placeholder { min-height: 0; width: 100%; height: 100%; }
.actus-sidebar-thumb .actus-cover-placeholder svg { width: 22px; height: 22px; }
.actus-sidebar-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.actus-sidebar-text h4 { font-size: 14px; line-height: 1.35; font-weight: 600; }
.actus-sidebar-card:hover h4 { color: var(--teal); }
.actus-sidebar-text .actus-date { font-size: 11.5px; }
.actus-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; }
.actus-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.actus-list li:first-child { border-top: 1px solid var(--border); }
.actus-list a { font-size: 15.5px; font-weight: 500; color: var(--text); }
.actus-list a:hover { color: var(--teal); }
.actus-list .actus-date { white-space: nowrap; }
@media (max-width: 480px) { .actus-list li { flex-direction: column; gap: 4px; } }
.actus-archives-link { display: inline-block; margin-top: 28px; }
.actus-archives-title { font-size: 22px; margin: 0 0 4px; }
.actus-empty { color: var(--text-secondary); font-size: 15px; padding: 30px 0; }
/* Videos hub — grouped by playlist */
.playlist-section { padding-bottom: 54px; }
.playlist-heading { font-size: 21px; margin-bottom: 20px; }
.video-card-media { position: relative; }
.video-play-badge {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(9,7,13,0.18);
}
.video-play-badge svg {
width: 46px; height: 46px; color: rgba(255,255,255,0.95);
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4));
}
.videos-empty { color: var(--text-secondary); font-size: 15px; padding: 10px 0 40px; }
/* Theme pages */
.theme-page .hero { padding-bottom: 40px; }
.theme-body { padding-bottom: 100px; display: flex; flex-direction: column; gap: 40px; max-width: 800px; }
.theme-section h2 { font-size: 24px; margin-bottom: 14px; }
.theme-section p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.theme-section ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.theme-section li {
font-size: 15px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5;
}
.theme-section li::before {
content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px;
}
.theme-page.amber .theme-section li::before { background: var(--amber); }
.theme-page.teal .theme-section li::before { background: var(--teal); }
.theme-page.coral .theme-section li::before { background: var(--coral); }
.theme-cta { margin-top: 8px; }
.note-box {
border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px;
font-size: 15px; color: var(--text-secondary); background: var(--surface);
}
/* Contact page */
.contact-page .hero { padding-bottom: 60px; }
.contact-body { padding-bottom: 120px; max-width: 640px; display: flex; flex-direction: column; gap: 24px; }
.contact-email {
display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600;
font-family: 'Space Grotesk', sans-serif; width: fit-content;
}
/* Numero de telephone (17 sept.) : meme gabarit que .contact-email mais plus discret (couleur
texte secondaire plutot que la couleur d'accent), pour rester secondaire par rapport a l'email. */
.contact-phone {
display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600;
font-family: 'Space Grotesk', sans-serif; width: fit-content; color: var(--text-secondary);
}
.contact-phone:hover { color: var(--text); }
.contact-links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.contact-links a { font-size: 15px; color: var(--text-secondary); }
.contact-links a:hover { color: var(--text); }
.contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.contact-form h3 { font-size: 16px; margin-bottom: -2px; }
.contact-form input, .contact-form textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--teal); }
/* Bloc "En bref" (17 sept.) : resume factuel visible en haut de chaque page principale, pense
pour les moteurs de recherche et les IA generatives (voir commentaires HTML sur ce meme bloc
dans index.html/contact.html/etc. et injectActusOwn-style dans server.js). Volontairement
sobre : pas une bannière criarde, juste un encart net qui se distingue du reste du texte. */
.ai-summary { margin: 0 auto 40px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ai-summary-label { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin-bottom: 8px; }
.ai-summary p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.ai-summary a { color: var(--teal); }
/* Footer */
.site-footer { padding: 56px 0; border-top: 1px solid var(--border); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-heading { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; }
/* footer-locality (17 sept.) : sous-titre discret sous le heading, meme groupe que lui
(.footer-left) pour que .footer-inner ne voie toujours que 2 enfants directs (voir note
ci-dessous sur justify-content:space-between). */
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-locality { font-size: 14px; color: var(--text-secondary); }
.footer-email { font-size: 15px; color: var(--amber); font-weight: 600; border-bottom: 1px solid var(--amber); padding-bottom: 2px; }
.footer-phone { font-size: 15px; color: var(--text-secondary); font-weight: 500; }
.footer-phone:hover { color: var(--teal); }
/* Liens reseaux sociaux (6 sept.) : groupes avec l'email dans .footer-right pour que les deux
restent colles ensemble a droite du footer (le heading reste seul a gauche grace au
justify-content:space-between de .footer-inner, qui ne voit plus que 2 enfants directs). */
.footer-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social-link { display: inline-flex; color: var(--text-secondary); transition: color 0.15s; }
.footer-social-link:hover { color: var(--teal); }
@media (max-width: 600px) {
.hero h1 { font-size: 40px; }
.hero p.lead { font-size: 17px; }
.footer-inner { flex-direction: column; align-items: flex-start; }
}
/* ---- Videos hub: card media sizing (reuses .actus-card) ---- */
.video-card-media { aspect-ratio: 16 / 10; }
.video-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-media .actus-cover-placeholder { min-height: 0; aspect-ratio: 16 / 10; }
.videos-body { padding-bottom: 110px; }
/* ---- Actus: single article view ---- */
.actus-subnav { display: flex; justify-content: flex-end; margin-bottom: -20px; }
.actus-article { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.actus-article h1 { font-size: 32px; line-height: 1.2; }
.actus-article-body { font-size: 16.5px; line-height: 1.75; color: var(--text); }
.actus-article-body h1, .actus-article-body h2, .actus-article-body h3, .actus-article-body h4 {
font-family: 'Space Grotesk', sans-serif; margin: 32px 0 14px; letter-spacing: -0.01em;
}
.actus-article-body h1:first-child, .actus-article-body h2:first-child { margin-top: 0; }
/* Titre en double dans les articles (6 sept.) : Nicolas retape systematiquement le titre de
l'article en Titre 1 (h1) tout en haut du contenu BookStack (souvent mis en couleur/centre via
Quill), en plus du titre affiche par le site via {article.name}
(voir actus.js). Un
premier correctif masquait ce h1 du corps pour ne garder que le titre du site — mais Nicolas
veut au contraire garder SA mise en forme (couleur, centrage) et voir disparaitre le titre
"neutre" du site. On masque donc ici le h1 du template (`.actus-article > h1`, celui pose par
actus.js) des que le corps de l'article contient lui-meme un h1 — les h1 ne servent JAMAIS a
une vraie sous-partie de l'article (Nicolas utilise systematiquement h2 pour ses sections, ex.
"Ce que dit le texte", "En resume"), donc tout h1 present dans .actus-article-body est forcement
ce titre retape, quel que soit sa position exacte (parfois precede d'un encadre "kicker" avant
le h1, ex. un article avec un bandeau "GUIDE DEBUTANT"). Si un futur article n'a pas de h1 dans
son corps (Nicolas arrete cette habitude), le titre du site reste affiche normalement — aucun
article ne se retrouve donc sans titre visible. */
.actus-article:has(.actus-article-body h1) > h1 { display: none; }
/* Nettoyage du paragraphe vide que Nicolas laisse souvent juste apres son titre (simple ligne
d'espacement) : on ne le masque que s'il est reellement vide (juste un
), jamais un vrai
chapo/texte d'intro qui suivrait directement le titre. */
.actus-article-body h1 + p:has(> br:only-child) { display: none; }
.actus-article-body p { margin: 0 0 16px; }
.actus-article-body ul, .actus-article-body ol { margin: 0 0 16px; padding-left: 24px; }
.actus-article-body li { margin-bottom: 8px; }
.actus-article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.actus-article-body img { max-width: 100%; border-radius: var(--radius); margin: 10px 0; }
.actus-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
.actus-article-body th, .actus-article-body td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.actus-article-body code { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
.actus-article-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; margin: 0 0 20px; }
.actus-article-body pre code { background: none; padding: 0; }
.actus-article-body blockquote { border-left: 3px solid var(--amber); margin: 0 0 20px; padding: 4px 0 4px 20px; color: var(--text-secondary); }
.actus-article-body hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.actus-article-body .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.actus-article-body .ql-font-monospace { font-family: 'IBM Plex Mono', monospace; }
.actus-article-body .ql-callout {
border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius);
padding: 14px 18px; margin: 0 0 20px; background: var(--surface);
}
.actus-article-body .ql-callout::before {
display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 6px; color: var(--text-secondary);
}
.actus-article-body .ql-callout.ql-callout-tip { border-left-color: var(--teal); }
.actus-article-body .ql-callout.ql-callout-tip::before { content: "Conseil"; color: var(--teal); }
.actus-article-body .ql-callout.ql-callout-warning { border-left-color: var(--amber); }
.actus-article-body .ql-callout.ql-callout-warning::before { content: "Attention"; color: var(--amber); }
.actus-article-body .ql-callout.ql-callout-important { border-left-color: var(--coral); }
.actus-article-body .ql-callout.ql-callout-important::before { content: "Important"; color: var(--coral); }
.actus-article-body .ql-box {
border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 4px; margin-bottom: 20px;
background: rgba(255, 255, 255, 0.14);
}
.actus-article-body .ql-box .ql-box { background: rgba(255, 255, 255, 0.14); }
.actus-article-body .ql-box > *:last-child { margin-bottom: 18px; }
.actus-article-body .ql-align-center { text-align: center; }
.actus-article-body .ql-align-right { text-align: right; }
.actus-article-body .ql-align-justify { text-align: justify; }
/* ---- Galerie par dossiers (public, 14 sept.) ---- */
.gallery-body { padding-bottom: 110px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-card {
display: flex; flex-direction: column; gap: 0; text-align: left; cursor: pointer;
background: none; border: none; overflow: visible;
font: inherit; color: inherit; padding: 0; transition: transform 0.15s;
}
.gallery-card:hover { transform: translateY(-2px); }
.gallery-card-body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.gallery-card-caption { font-size: 15px; font-weight: 600; }
.gallery-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }
/* Pile de photos façon Apple Photos : jusqu'à 3 couches en éventail, la plus récente dessus. */
.gallery-stack { position: relative; aspect-ratio: 4 / 3; }
.gallery-stack-layer {
position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.5);
transform: rotate(calc(var(--depth) * 2deg)) translate(calc(var(--depth) * 6px), calc(var(--depth) * -4px));
transition: transform 0.2s ease;
}
.gallery-stack-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card:hover .gallery-stack-layer {
transform: rotate(calc(var(--depth) * 3deg)) translate(calc(var(--depth) * 9px), calc(var(--depth) * -6px));
}
.gallery-stack-extra {
position: absolute; bottom: 8px; right: 8px; background: rgba(9,7,13,0.75); color: var(--text);
border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 9px; z-index: 5;
}
.stars-display { color: var(--amber); letter-spacing: 1px; }
.stars-display.stars-empty { color: var(--text-secondary); letter-spacing: normal; font-size: 12.5px; }
.stars-value { font-size: 12px; color: var(--text-secondary); }
/* Popup album façon publication : photo à gauche (carrousel), panneau d'avis à droite. */
.gallery-modal-overlay {
position: fixed; inset: 0; background: rgba(9,7,13,0.78); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; overflow-y: auto;
}
.gallery-modal {
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
width: 100%; max-width: 980px; height: 86vh; max-height: 760px;
display: flex; overflow: hidden;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.gallery-modal-close {
position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
background: rgba(9,7,13,0.55); border: none; color: var(--text); font-size: 16px; cursor: pointer; z-index: 4;
}
.gallery-modal-photo-pane {
position: relative; flex: 1 1 58%; min-width: 0; background: #0b0910;
display: flex; align-items: center; justify-content: center;
}
.gallery-modal-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gallery-modal-nav {
position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
background: rgba(9,7,13,0.55); border: none; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
}
.gallery-modal-nav-prev { left: 14px; }
.gallery-modal-nav-next { right: 14px; }
.gallery-modal-counter {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
background: rgba(9,7,13,0.6); color: var(--text); font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
}
.gallery-modal-side { flex: 0 0 380px; max-width: 42%; border-left: 1px solid var(--border); overflow: hidden; display: flex; }
.gallery-modal-side-scroll { flex: 1; overflow-y: auto; padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 16px; }
.gallery-modal-title { font-size: 19px; }
.gallery-modal-description { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; margin: -8px 0 0; }
.gallery-modal-meta { margin-top: -6px; }
.gallery-avis-section { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.gallery-avis-section h3 { font-size: 15px; }
.gallery-comments { display: flex; flex-direction: column; gap: 14px; }
.gallery-comment-item { display: flex; flex-direction: column; gap: 4px; }
.gallery-comment-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gallery-comment-item p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; }
.gallery-comment-date { font-size: 12px; color: var(--text-secondary); }
.gallery-comment-form { display: flex; flex-direction: column; gap: 10px; }
.gallery-comment-form input[type="text"], .gallery-comment-form textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.gallery-comment-form input[type="text"]:focus, .gallery-comment-form textarea:focus { outline: none; border-color: var(--teal); }
.star-picker { display: flex; gap: 4px; }
.star-picker-btn {
background: none; border: none; font-size: 24px; color: var(--border); cursor: pointer; padding: 0; line-height: 1;
}
.star-picker-btn.is-selected { color: var(--amber); }
.gallery-comment-success { font-size: 14px; color: var(--teal); }
@media (max-width: 760px) {
.gallery-modal { flex-direction: column; height: 92vh; max-height: none; }
.gallery-modal-photo-pane { flex: 0 0 40vh; }
.gallery-modal-side { flex: 1; max-width: none; border-left: none; border-top: 1px solid var(--border); }
}
/* Formulaire de soumission d'un album par un visiteur (14 sept.) */
#gallery-submit { padding-bottom: 100px; }
.gallery-submit-form {
display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin-top: 20px;
}
.gallery-submit-form input, .gallery-submit-form textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.gallery-submit-form input:focus, .gallery-submit-form textarea:focus { outline: none; border-color: var(--teal); }