/* =========================================================================
By Zigzag — Styles de base (reset, typographie, layout)
Les COULEURS ne sont pas définies ici : elles viennent des variables de
thème (voir themes.css), pilotées par l'attribut [data-theme] sur .
========================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 88px; /* compense le header sticky lors des ancres */
}
body {
margin: 0;
font-family: var(--police-texte);
line-height: 1.65;
color: var(--c-text);
background-color: var(--c-bg);
-webkit-font-smoothing: antialiased;
/* ═══ CEINTURE : LA PAGE NE DEFILE JAMAIS LATERALEMENT ═══
Un seul element trop large — une barre, un tableau, une grille d'agenda —
et TOUTE la page se met a defiler de cote sur un telephone. Le symptome
ne designe pas son coupable : on voit un bouton qui depasse, et c'est la
page entiere qui a bouge.
⚠️ CE N'EST PAS LE CORRECTIF, C'EST LE FILET. Le correctif est que la
barre tienne dans sa largeur (components.css). Cette ligne existe pour
que le PROCHAIN element trop large ne reproduise pas le defaut : elle
vaut pour tout ce qui n'est pas encore ecrit.
⚠️ `clip` ET SURTOUT PAS `hidden` : `overflow: hidden` fabrique un
conteneur de defilement, ce qui casse le `position: sticky` du header —
il cesserait de coller en haut de l'ecran. `clip` coupe sans creer de
conteneur, donc le header continue de coller. */
overflow-x: clip;
}
img {
max-width: 100%;
/* ⚠️ `height: auto` EST CE QUI GARDE LE RATIO quand les ![]()
portent width/height
(posés depuis le 20 septembre 2026 pour le CLS, voir _dimensions_image.twig).
Sans lui, `max-width` rétrécit la largeur et la hauteur déclarée RESTE : les
photos de galerie s'écrasent sur un écran étroit. Aucun ![]()
du site ne
portait de height avant : cette ligne ne change rien à l'existant. */
height: auto;
display: block;
}
/* Sticky footer : le footer reste collé en bas même sur les pages courtes.
Le occupe tout l'espace disponible (public + espace client). */
.site {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site > main {
flex: 1 0 auto;
}
h1, h2, h3 {
font-family: var(--police-titre);
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.5px;
margin: 0 0 0.5em;
}
p {
margin: 0 0 1rem;
}
a {
color: var(--c-accent-texte);
text-decoration: none;
transition: color 0.18s ease;
}
a:hover {
color: var(--c-accent-hover);
}
/* ---- Layout ---- */
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
}
.container--narrow {
max-width: 640px;
}
.section {
padding: 4.5rem 0;
}
.section__head {
text-align: center;
margin-bottom: 2.75rem;
}
.section__eyebrow {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.78rem;
font-weight: 600;
color: var(--c-accent-texte);
margin: 0 0 0.5rem;
}
.section__title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
text-transform: uppercase;
}
.section__lead {
color: var(--c-text-muted);
max-width: 540px;
margin: 0.5rem auto 0;
}
/* Accessibilité : focus visible cohérent */
:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Contenu réservé aux lecteurs d'écran / SEO : retiré du flux visuel sans
être masqué pour l'accessibilité (ex. h1 « By Zigzag » sous le logo hero). */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================================================
LA SONDE D'ÉCRAN ÉTROIT — elle ne s'affiche jamais, elle RÉPOND.
Elle n'a ni taille ni contenu : son seul rôle est de porter le point de
rupture pour qui n'a pas le droit de le connaître. `initLiensEtroits()`
(assets/admin_nav.js) lit son `display` calculé et en déduit qu'il est sur un
écran étroit — sans que « 760 px » soit écrit une seconde fois dans un
script. C'est ce qui fait mener les liens « Agenda » à l'écran qui sert au
téléphone.
⚠️ ELLE VIT DANS `app.css`, ET PAS DANS `admin.css`, POUR UNE RAISON MESURÉE.
Le socle PUBLIC (`templates/base.html.twig`) porte lui aussi un bouton
« Agenda », et il ne charge PAS `admin.css`. La sonde y serait restée sans
aucune règle — donc `display: inline` par défaut, donc « écran étroit » à
TOUTE largeur : le bouton du site aurait mené à l'écran du téléphone sur un
écran de bureau. Une classe écrite dans un gabarit et absente de la feuille
est invisible à tout ce qui lit le HTML. `app.css` est le seul fichier que
les DEUX socles chargent. **Ne pas la redéplacer.**
⚠️ LES DEUX RÈGLES SONT LE MÉCANISME, PAS UNE PRÉCAUTION. La première la
tait, la seconde la déclare. En retirer une ne casse rien de VISIBLE : les
liens cessent simplement de mener au bon écran, en silence.
========================================================================= */
.sonde-etroit { display: none; }
/* =========================================================================
LA CIBLE D'AFFICHAGE D'UNE SECTION — « téléphone » ou « ordinateur »
*(lot CMS étape 3, 10 septembre 2026)*.
⚠️⚠️ LE SERVEUR REND, LE CSS RÉVÈLE — ET CE N'EST PAS UN CHOIX DE STYLE.
Un `{% if %}` au rendu servirait la variante téléphone à quelqu'un sur
ordinateur dès que la page est mise en cache, et rien ne le signalerait.
Même patron que le popup d'installation, éprouvé sur un vrai iPhone.
⚠️ LE SEUIL N'EST ÉCRIT QU'UNE FOIS DANS TOUT LE DÉPÔT, et c'est celui de la
sonde ci-dessus : ces règles vivent DANS son bloc. Écrire « 760 » une
seconde fois ferait deux seuils qui divergeraient au premier ajustement —
*la maladie signature du projet*. Si le point de rupture bouge, il bouge
pour les deux, ou pour aucun.
⚠️ `tous` N'A AUCUNE RÈGLE, ET C'EST LA VALEUR PAR DÉFAUT : ce qui n'est pas
nommé s'affiche partout. *Une préférence ne déplace que ce qu'elle NOMME.*
========================================================================= */
[data-cible="telephone"] { display: none; }
@media (max-width: 760px) {
/* « Visible » pour le calcul seulement : aucune taille, aucun contenu,
`aria-hidden` sur la balise. C'est ce `block` que le JavaScript lit. */
.sonde-etroit { display: block; }
/* La cible « téléphone » n'apparaît qu'ici, et « ordinateur » s'efface :
les deux sens dans le même bloc, sous le même seuil. */
[data-cible="telephone"] { display: block; }
[data-cible="ordinateur"] { display: none; }
}