/* ========================================================================== ia-socle.css — HABILLAGE DE CE QUE LE SOCLE ÉMET Le paquet de contenu livre ialemans.css, qui habille l'accueil, les pages légales et le CORPS des articles (.ia-blog-body, .ia-blog-lead, .ia-blog-sources). Il n'habille pas ce que le socle ajoute autour : le lien d'évitement, l'en-tête d'article, les articles connexes, le 404. Cette feuille comble exactement ce manque, et rien d'autre. ELLE NE DÉCLARE AUCUNE COULEUR : tout vient des variables de ialemans.css (--night, --white, --cyan…). Un changement de charte se fait donc à un seul endroit, et cette feuille suit. ⚠ ORDRE DE CHARGEMENT. header.php épingle ialemans.css en premier PARCE QUE l'ordre alphabétique placerait « ia-socle.css » avant « ialemans.css » — et les variables seraient alors lues avant d'être déclarées. Aucune police n'est appelée : le site n'utilise que des familles système. ========================================================================== */ /* -------------------------------------------------------------------------- LIEN D'ÉVITEMENT — premier élément du , posé par header.php. Hors du flux visuel tant qu'il n'a pas le focus ; parfaitement visible dès qu'un visiteur au clavier l'atteint. Jamais display:none, qui le retirerait aussi de l'ordre de tabulation. -------------------------------------------------------------------------- */ .ia-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.9rem 1.4rem; background: var(--cyan); color: var(--night); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .ia-skip:focus { left: 0; } /* -------------------------------------------------------------------------- EN-TÊTE D'ARTICLE — page/articles//01-entete.php La largeur reprend celle de .ia-blog-body (min(820px, 92%)) : l'en-tête et le corps doivent s'aligner au pixel, sinon le titre ne surplombe plus son texte. Le padding haut compense l'en-tête du site, qui est en position:fixed et ne réserve donc aucune place dans le flux. Même valeur que .legal-hero du paquet, pour que toutes les pages internes commencent à la même hauteur. -------------------------------------------------------------------------- */ .ia-blog-head { width: min(820px, 92%); margin-inline: auto; padding-top: 150px; } .ia-blog-fil { margin-bottom: 2.2rem; } .ia-blog-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-dim); } .ia-blog-fil li + li::before { content: "/"; margin-right: 0.55rem; color: var(--line); } .ia-blog-fil a:hover { color: var(--cyan); } /* Le dernier maillon est la page courante : ce n'est pas un lien, et il ne doit pas en avoir l'air. */ .ia-blog-fil [aria-current="page"] { color: var(--grey); } .ia-blog-badge { display: inline-block; margin-bottom: 1.4rem; padding: 0.42rem 0.9rem; border: 1px solid rgba(34, 225, 255, 0.28); background: var(--cyan-soft); color: var(--cyan); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .ia-blog-titre { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--white); } .ia-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); color: var(--grey-dim); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; } .ia-blog-meta-sep { color: var(--line); } .ia-blog-cover { margin: 2.6rem 0 0; } .ia-blog-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); } /* -------------------------------------------------------------------------- ARTICLES CONNEXES ET FIN D'ARTICLE — page/articles//90-connexes.php Les cartes n'affichent pas d'image : le contenu livré n'en comporte aucune. Le jour où les articles en auront une, ajouter le bloc dans le gabarit et sa règle ici — la grille est déjà prête à l'accueillir. -------------------------------------------------------------------------- */ .ia-blog-connexes { padding-block: clamp(56px, 8vh, 96px); border-top: 1px solid var(--line); background: var(--midnight); } .ia-blog-connexes-titre { margin-bottom: 2.4rem; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); } .ia-blog-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .ia-blog-carte { /* Colonne : le pied de carte (auteur + « Lire ») est poussé en bas par son margin-top:auto, donc toutes les cartes d'une rangée l'alignent, quelle que soit la longueur de leur titre ou de leur chapeau. */ display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid var(--line); background: var(--anthracite); transition: border-color 0.3s ease, transform 0.3s ease; } .ia-blog-carte:hover { border-color: rgba(34, 225, 255, 0.4); transform: translateY(-3px); } .ia-blog-carte-cat { margin-bottom: 0.9rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); } .ia-blog-carte-titre { font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--white); } .ia-blog-carte-titre a:hover { color: var(--cyan); } .ia-blog-carte-texte { margin-top: 0.8rem; color: var(--grey); font-size: 0.94rem; line-height: 1.6; } .ia-blog-fin { padding-block: clamp(56px, 8vh, 96px); border-top: 1px solid var(--line); text-align: center; } .ia-blog-retour { margin-bottom: 2rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); } .ia-blog-retour a:hover { color: var(--cyan); } /* -------------------------------------------------------------------------- PAGE INTROUVABLE — 404.php Le padding haut du .section standard (96 px minimum) passerait sous l'en-tête fixe : on reprend ici la hauteur des autres pages internes. -------------------------------------------------------------------------- */ .ia-404 { padding-top: 150px; } .ia-404-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* -------------------------------------------------------------------------- BANDEAU + EN-TÊTE — correctif de superposition DÉFAUT CORRIGÉ (mesuré, pas supposé) : dans ialemans.css, .topbar est dans le flux (36,5 px de haut) tandis que .header est en position:fixed top:0. Les deux occupent donc les mêmes pixels. La topbar passe devant (z-index 60 contre 50), et le logo IALEMANS comme le bouton d'appel se retrouvent coupés par le haut — sur TOUTES les pages du site. LE CORRECTIF : c'est le conteneur .ia-bandeau (menu/menu.html) qui est fixé, et ses deux enfants reprennent le flux à l'intérieur. Ils s'empilent alors naturellement, l'un sous l'autre, et restent solidaires au défilement. Aucune hauteur n'est écrite en dur : rien à corriger si la topbar change de taille, de police ou de contenu. Ce qui n'est PAS touché : les couleurs, le flou, les bordures, le z-index et la mise en page interne des deux blocs restent ceux de ialemans.css. -------------------------------------------------------------------------- */ .ia-bandeau { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } .ia-bandeau .topbar, .ia-bandeau .header { position: static; } /* -------------------------------------------------------------------------- LISTING DU BLOG ET PAGES CATÉGORIE page/blog/10-listing.php et page/categorie-/10-categorie.php Même padding haut que l'en-tête d'article : l'en-tête du site est fixe et ne réserve aucune place dans le flux. -------------------------------------------------------------------------- */ .ia-blog-listing, .ia-blog-categorie { padding-top: 150px; padding-bottom: clamp(72px, 10vh, 120px); } .ia-blog-listing-head { max-width: 720px; margin-bottom: clamp(36px, 5vh, 56px); } .ia-blog-categorie .ia-blog-listing-head { margin-top: 1.6rem; } .ia-blog-filtres { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: clamp(32px, 5vh, 52px); padding-bottom: clamp(32px, 5vh, 52px); border-bottom: 1px solid var(--line); } .ia-blog-filtre { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--line); color: var(--grey); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.3s ease, color 0.3s ease; } .ia-blog-filtre:hover { border-color: rgba(34, 225, 255, 0.45); color: var(--cyan); } .ia-blog-filtre--actif { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); } .ia-blog-filtre-nb { color: var(--grey-dim); } .ia-blog-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } /* La carte est déjà définie plus haut (articles connexes) : seuls les éléments propres au listing s'ajoutent ici. */ .ia-blog-carte-haut, .ia-blog-carte-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-dim); } .ia-blog-carte-haut { margin-bottom: 1rem; } /* margin-top:auto pousse le pied en bas de la carte : dans une rangee, tous les pieds s'alignent quelle que soit la longueur des titres et des chapeaux. L'ecart minimal au-dessus vient de la marge basse du chapeau. */ .ia-blog-carte-bas { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); } .ia-blog-carte-texte { margin-bottom: 1.4rem; } .ia-blog-carte-lire { color: var(--cyan); } .ia-blog-carte:hover .ia-blog-carte-lire .arrow { transform: translateX(5px); } .ia-blog-vide { padding-block: 3rem; color: var(--grey-dim); } .ia-blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: clamp(40px, 6vh, 64px); } .ia-blog-page { display: inline-flex; align-items: center; min-width: 2.6rem; justify-content: center; padding: 0.6rem 0.9rem; border: 1px solid var(--line); color: var(--grey); font-size: 0.76rem; letter-spacing: 0.1em; transition: border-color 0.3s ease, color 0.3s ease; } .ia-blog-page:hover { border-color: rgba(34, 225, 255, 0.45); color: var(--cyan); } .ia-blog-page--actif { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); } .ia-blog-total { margin-top: 1.6rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-dim); } .ia-blog-categorie .ia-blog-retour { margin-top: clamp(40px, 6vh, 64px); text-align: center; } @media (max-width: 640px) { .ia-blog-head { width: min(100% - 2rem, 820px); padding-top: 110px; } .ia-404, .ia-blog-listing, .ia-blog-categorie { padding-top: 110px; } } /* -------------------------------------------------------------------------- FORMULAIRE DE CONTACT — page/index/90-contact.php POURQUOI CE BLOC EXISTE. ialemans.css n'habille AUCUN champ de saisie : ni input, ni select, ni textarea, ni bouton d'envoi — le paquet livré n'avait pas de formulaire, seulement deux liens « mailto: ». Sans ces règles, le formulaire s'afficherait aux couleurs par défaut du navigateur : champs blancs sur un site noir, et un bouton gris au milieu d'une page dessinée. Il n'y a ni Bootstrap ni classe « he- » sur ce site : tout est écrit ici. AUCUNE COULEUR N'EST DÉCLARÉE : tout vient des variables de ialemans.css (--night, --cyan, --grey, --line…), comme le reste de cette feuille. Un changement de charte se fait à un seul endroit, et le formulaire suit. Le bouton d'envoi réutilise .btn / .btn-primary du paquet : la seule chose qu'on lui ajoute, c'est de prendre toute la largeur. -------------------------------------------------------------------------- */ .ia-form { /* .section-cta centre son contenu ; un formulaire, lui, se lit aligné à gauche — les libellés doivent démarrer sur la même verticale. */ width: min(720px, 100%); margin: clamp(32px, 5vh, 52px) auto 0; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); background: var(--anthracite); text-align: left; /* Indique au navigateur que les contrôles natifs (liste déroulante ouverte, curseur de saisie, barre de défilement du textarea) sont sur fond sombre. Sans cela, la liste du sur tous les navigateurs : on les pose explicitement. */ .ia-select option { background: var(--anthracite); color: var(--white); } .ia-input::placeholder, .ia-textarea::placeholder { color: var(--grey-dim); } .ia-input:hover, .ia-select:hover, .ia-textarea:hover { border-color: rgba(34, 225, 255, 0.35); } /* Le focus est marqué DEUX FOIS, et ce n'est pas un doublon : l'outline suit la règle :focus-visible du site (visible au clavier), la bordure et le halo restent visibles à la souris — un visiteur qui clique doit voir où il écrit. */ .ia-input:focus, .ia-select:focus, .ia-textarea:focus { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); } /* Champ refusé par le serveur : le rouge de la charte, et une bordure plus épaisse — la couleur seule ne suffit pas à qui ne la distingue pas. */ .ia-input[aria-invalid="true"], .ia-select[aria-invalid="true"], .ia-textarea[aria-invalid="true"] { border-color: var(--red); border-left-width: 3px; } .ia-form-erreur { margin-top: 0.5rem; color: var(--red); font-size: 0.88rem; line-height: 1.5; } .ia-form-aide, .ia-form-note { margin-top: 0.5rem; color: var(--grey-dim); font-size: 0.84rem; } .ia-form-note { margin-top: 1.6rem; } /* --- Bandeau de réponse --------------------------------------------------- Affiché en tête de formulaire après un envoi. Il porte tabindex="-1" et reçoit le focus par le fragment « #form-message » de l'URL de retour : c'est ce déplacement de focus qui le fait annoncer par un lecteur d'écran. Il doit donc rester visible quand il a le focus — pas d'outline retiré ici. -------------------------------------------------------------------------- */ .ia-form-bandeau { margin-bottom: 1.8rem; padding: 1rem 1.1rem; border-left: 3px solid var(--cyan); background: var(--cyan-soft); color: var(--white); font-size: 0.98rem; line-height: 1.6; } .ia-form-bandeau--ko { border-left-color: var(--red); background: rgba(255, 46, 77, 0.1); } .ia-form-bandeau:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } /* --- Bouton d'envoi ------------------------------------------------------- .btn et .btn-primary viennent du paquet (ialemans.css) : couleur, épaisseur, animation de la flèche, tout est déjà là. On n'ajoute que la largeur. -------------------------------------------------------------------------- */ .ia-form-envoi { width: 100%; margin-top: 1.8rem; justify-content: center; } .ia-form-legal { margin-top: 1.6rem; color: var(--grey-dim); font-size: 0.82rem; line-height: 1.6; } .ia-form-legal a { color: var(--grey); border-bottom: 1px solid var(--line); } .ia-form-legal a:hover { color: var(--cyan); border-bottom-color: var(--cyan); } /* --- Repli : écrire directement ------------------------------------------- Le formulaire remplace les liens « mailto: », il ne les supprime pas de la page. Un visiteur qui préfère son logiciel de courrier — ou qui bute sur le formulaire, quelle qu'en soit la raison — garde une porte de sortie visible. -------------------------------------------------------------------------- */ .ia-form-secours { margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--grey-dim); } .ia-form-secours a { color: var(--cyan); border-bottom: 1px solid rgba(34, 225, 255, 0.4); padding-bottom: 2px; } /* --- Piège à robots ------------------------------------------------------- Hors de l'écran, jamais display:none. C'est délibéré : un robot un peu sérieux ignore les champs cachés par display:none ou hidden, parce que c'est le motif le plus connu. Un champ simplement sorti du cadre lui paraît normal. Le visiteur, lui, ne peut ni le voir, ni l'atteindre au clavier (tabindex="-1"), ni l'entendre (aria-hidden="true" sur son conteneur). left négatif plutôt que right : le du site est en overflow-x:hidden, mais un élément débordant à droite provoque quand même un défilement horizontal sur certains navigateurs mobiles. -------------------------------------------------------------------------- */ .ia-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 640px) { .ia-form { padding: 1.4rem 1.1rem; } .ia-form-duo { grid-template-columns: 1fr; } }