/* Le CSS global de Vitrine : variables de secours, remise à zéro, titres, primitives de mise en page. Posé dans le par la plomberie parce que la fiche de Vitrine le déclare — donc seulement quand Vitrine est le design choisi. Il ne contient aucune couleur ni aucune police en dur : seulement des NOMS, que la plomberie remplace en tête de page avec les choix du client. C'est ce qui rend un thème réglable sans recompiler quoi que ce soit. Les valeurs ci-dessous ne sont qu'un filet de sécurité, pour qu'une page reste lisible si le bloc de thème n'a pas été posé. Il n'appartient qu'à Vitrine : un autre design a le sien, et n'utilise jamais celui-ci. */ :root { --ak-primaire: #2563eb; --ak-secondaire: #0f172a; --ak-fond: #ffffff; --ak-texte: #171d24; --ak-police-titre: "Poppins", sans-serif; --ak-police-texte: "Inter", sans-serif; /* Déduites, pour ne pas multiplier les réglages du client : un gris de texte secondaire ou une bordure ne se choisissent pas, ils suivent. */ --ak-texte-doux: color-mix(in srgb, var(--ak-texte) 62%, var(--ak-fond)); --ak-bordure: color-mix(in srgb, var(--ak-texte) 14%, var(--ak-fond)); --ak-fond-doux: color-mix(in srgb, var(--ak-texte) 4%, var(--ak-fond)); --ak-sur-primaire: #ffffff; /* Le rouge des erreurs : une constante du design, pas un réglage du client. */ --ak-erreur: #b42318; --ak-largeur: 1120px; --ak-gouttiere: 24px; --ak-espace-1: 0.25rem; --ak-espace-2: 0.5rem; --ak-espace-3: 0.75rem; --ak-espace-4: 1rem; --ak-espace-5: 1.5rem; --ak-espace-6: 2rem; --ak-espace-7: 3rem; --ak-espace-8: 5rem; --ak-arrondi: 10px; --ak-arrondi-grand: 16px; --ak-transition: 150ms ease; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ak-police-texte); font-size: 1rem; line-height: 1.65; color: var(--ak-texte); background: var(--ak-fond); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-family: var(--ak-police-titre); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); } h3 { font-size: 1.25rem; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* Un contour visible au clavier, jamais à la souris. */ :focus-visible { outline: 2px solid var(--ak-primaire); outline-offset: 3px; } /* ---------- Mise en page ---------- */ .ak-large { width: 100%; max-width: var(--ak-largeur); margin: 0 auto; /* La gouttière évite qu'un texte colle au bord sur un téléphone. */ padding: 0 var(--ak-gouttiere); } .ak-pile-site { display: flex; flex-direction: column; gap: var(--ak-espace-8); } /* Seulement le vertical : « padding » en raccourci remettrait à zéro la gouttière de « .ak-large », avec qui cette classe se combine presque toujours — et le texte collerait au bord sur un téléphone. */ .ak-section-site { padding-top: var(--ak-espace-7); padding-bottom: var(--ak-espace-7); } /* ---------- Texte écrit par le client ---------- */ /* Le corps d'une page vient d'un éditeur : on ne maîtrise pas les balises qu'il contient, seulement leur allure. */ .ak-texte > * + * { margin-top: var(--ak-espace-4); } .ak-texte h2, .ak-texte h3 { margin-top: var(--ak-espace-6); } .ak-texte a { color: var(--ak-primaire); text-decoration: underline; } .ak-texte ul, .ak-texte ol { padding-left: 1.25rem; } .ak-texte img { border-radius: var(--ak-arrondi); } /* ---------- Petites choses partagées ---------- */ .ak-doux-site { color: var(--ak-texte-doux); } .ak-bouton-site, .ak-contact-simple-bouton { display: inline-flex; align-items: center; gap: var(--ak-espace-2); padding: 0.7rem 1.4rem; font-family: var(--ak-police-texte); font-weight: 500; color: var(--ak-sur-primaire); background: var(--ak-primaire); border: none; border-radius: var(--ak-arrondi); cursor: pointer; transition: filter var(--ak-transition); } .ak-bouton-site:hover, .ak-contact-simple-bouton:hover { filter: brightness(0.92); } .ak-lien-site { font-weight: 500; color: var(--ak-primaire); } .ak-lien-site:hover { text-decoration: underline; } /* ---------- Plugin : formulaire de contact simple ---------- Le plugin écrit les balises et leurs classes (le contrat est dans DESIGNS.md) ; Vitrine les habille ici. Pour l'intégrer, rien d'autre qu'une ligne dans AkVitrinePage.razor. */ .ak-contact-simple { width: 100%; max-width: var(--ak-largeur); margin: 0 auto; padding: var(--ak-espace-7) var(--ak-gouttiere); } .ak-contact-simple-formulaire { display: flex; flex-direction: column; gap: var(--ak-espace-5); max-width: 40rem; } .ak-contact-simple-champ { display: flex; flex-direction: column; gap: var(--ak-espace-2); } .ak-contact-simple-etiquette { font-weight: 500; } .ak-contact-simple-obligatoire { color: var(--ak-primaire); } .ak-contact-simple-saisie { width: 100%; padding: 0.7rem 0.9rem; font: inherit; color: var(--ak-texte); background: var(--ak-fond); border: 1px solid var(--ak-bordure); border-radius: var(--ak-arrondi); transition: border-color var(--ak-transition); } .ak-contact-simple-saisie:focus { outline: none; border-color: var(--ak-primaire); } textarea.ak-contact-simple-saisie { min-height: 10rem; resize: vertical; } .ak-contact-simple-saisie[aria-invalid="true"] { border-color: var(--ak-erreur); } .ak-contact-simple-erreur { font-size: 0.9rem; color: var(--ak-erreur); } .ak-contact-simple-mention { font-size: 0.9rem; color: var(--ak-texte-doux); } .ak-contact-simple-bouton { align-self: flex-start; } .ak-contact-simple-envoye { max-width: 40rem; margin-bottom: var(--ak-espace-5); padding: var(--ak-espace-5); background: var(--ak-fond-doux); border-radius: var(--ak-arrondi); }