/* base.css, remise à zéro, typographie et structure de page. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--font-corps); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Verrou de défilement posé sur les deux éléments : iOS ignore le verrou quand il n'est posé que sur . */ html.est-bloque, body.est-bloque { overflow: hidden; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 800; line-height: 1.02; letter-spacing: -.032em; margin: 0 0 var(--e2); text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; } h4 { font-family: var(--font-corps); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; } p { margin: 0 0 var(--e2); max-width: 66ch; } p:last-child { margin-bottom: 0; } a { color: inherit; } strong, b { font-weight: 700; } ul, ol { margin: 0 0 var(--e2); padding-left: 1.1em; } li { margin-bottom: .35em; } hr { border: 0; border-top: 1px solid var(--ligne); margin: var(--e5) 0; } /* Le mot mis en avant prend la terre cuite : pas de fond, pas de graisse supplémentaire, juste un changement de couleur. */ .surligne { color: var(--bleu); } ::selection { background: var(--jaune); color: var(--encre); } :focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--e2); top: -100px; z-index: 200; background: var(--bleu); color: #fff; padding: .8rem 1.2rem; border-radius: var(--r-rond); font-weight: 700; text-decoration: none; transition: top var(--transition); } .skip-link:focus { top: var(--e2); } /* --- Structure ---------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gouttiere); } .wrap-etroit { max-width: 720px; } .section { padding-block: var(--e6); } .section-creuse { background: var(--papier-creux); } .section-nuit { background: var(--bleu-nuit); color: #C8D8F5; } .section-nuit h2, .section-nuit h3 { color: #fff; } .section-nuit p { color: #B9C9EA; } /* --- L'étiquette, repère récurrent du site ------------------------------ */ .eyebrow { display: inline-block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--bleu); padding: .42rem .95rem; border-radius: var(--r-rond); margin-bottom: var(--e3); } .section-nuit .eyebrow { background: rgba(255, 255, 255, .16); } .page-epn .eyebrow, .page-equipe .eyebrow, .page-services .eyebrow, .page-faq .eyebrow, .page-contact .eyebrow { background: var(--encre); } /* --- Titres de section --------------------------------------------------- */ .entete-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e3); margin-bottom: var(--e5); } @media (max-width: 720px) { .entete-section { grid-template-columns: 1fr; align-items: start; } } .entete-section > div { max-width: 44rem; } .entete-section h2 { margin-bottom: .7rem; } .entete-section p { color: var(--encre-douce); margin: 0; } .section-nuit .entete-section p { color: #B9C9EA; } /* Pastille jaune posée au-dessus d'un titre. */ .titre-pastille { position: relative; padding-top: var(--e4); } .titre-pastille::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--jaune); } /* --- Variante calme des pages institutionnelles ------------------------- La maison, l'équipe, les services, la FAQ et le contact s'adressent à des partenaires : on y retire les aplats jaunes décoratifs et on neutralise le fond crème. La chaleur reste dans la typographie et le vert. ------------------------------------------------------------------------ */ .page-epn, .page-equipe, .page-services, .page-faq, .page-contact { --papier: #FCFDFF; --papier-creux: #F1F4FA; } .page-epn .titre-pastille::before, .page-equipe .titre-pastille::before, .page-services .titre-pastille::before, .page-faq .titre-pastille::before, .page-contact .titre-pastille::before { background: var(--bleu); } /* --- Apparition au défilement -------------------------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================================== Primitives partagées par le site public et l'administration Boutons, champs de formulaire et lien fléché sont employés par les deux gabarits. Les laisser dans components.css, que seul le site public charge, laissait les onze écrans d'administration sans boutons ni champs stylés. ========================================================================== */ /* ========================================================================== Boutons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.7rem; font-family: var(--font-corps); font-size: .875rem; font-weight: 700; line-height: 1; border: 1px solid transparent; border-radius: var(--r-rond); text-decoration: none; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .btn:active { transform: translateY(1px); } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--bleu); color: #fff; border-color: var(--bleu); } .btn-primary:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); } .btn-jaune { background: var(--jaune); color: var(--encre); border-color: var(--jaune); } .btn-jaune:hover { background: var(--encre); color: var(--jaune); border-color: var(--encre); } .btn-ghost { background: transparent; color: var(--encre); border-color: var(--ligne); } .btn-ghost:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); } .btn-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); } .btn-clair:hover { background: #fff; color: var(--encre); border-color: #fff; } .btn-petit { padding: .65rem 1.15rem; font-size: var(--t-mini); } .lien-fleche { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: var(--bleu-fonce); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid var(--jaune); transition: color var(--transition), border-color var(--transition); } .lien-fleche:hover { color: var(--bleu-nuit); border-bottom-color: var(--bleu-nuit); } .section-nuit .lien-fleche { color: var(--jaune); border-bottom-color: rgba(255, 216, 77, .5); } .section-nuit .lien-fleche:hover { color: #fff; border-bottom-color: #fff; } /* ========================================================================== Formulaires ========================================================================== */ .champ { display: flex; flex-direction: column; gap: .45rem; margin-bottom: var(--e3); } .champ label { font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue); } .champ input, .champ textarea, .champ select { font: inherit; padding: .95rem 1.1rem; border: 1px solid var(--ligne); border-radius: var(--r-petit); background: var(--blanc); color: var(--encre); transition: border-color var(--transition), box-shadow var(--transition); } .champ input:focus, .champ textarea:focus, .champ select:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile); } .champ textarea { min-height: 150px; resize: vertical; } .duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); } @media (max-width: 640px) { .duo-champs { grid-template-columns: 1fr; } } .formulaire-reponse { margin-top: var(--e2); padding: .9rem 1.1rem; border-radius: var(--r-petit); font-size: var(--t-petit); background: var(--bleu-voile); border: 1px solid rgba(12, 120, 108, .35); color: var(--bleu-fonce); } .formulaire-reponse.echec { background: #FBE9E9; border-color: #E9B4B4; color: #A32020; } /* ========================================================================== Garde-fous de responsivité Les enfants de grille et de flex valent min-width:auto par défaut : leur largeur minimale est celle de leur contenu. Un titre long, un tableau, ou surtout un , c'est indispensable : sa largeur intrinsèque suit son option la plus longue, ici des titres d'ouvrages de soixante caractères. */ input, select, textarea, button { max-width: 100%; } .champ input, .champ select, .champ textarea { width: 100%; min-width: 0; } /* Un mot très long, une référence ou une adresse ne cassent pas la mise en page : ils se coupent plutôt que de la faire déborder. */ h1, h2, h3, h4, p, li, dd, td, th, address { overflow-wrap: break-word; } /* Les tableaux larges défilent dans leur propre boîte, jamais avec la page. */ .table-enveloppe { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Filet de sécurité : si un élément déborde malgré tout, on le voit en développement plutôt que d'obtenir une barre de défilement horizontale silencieuse sur toute la page. */ html, body { max-width: 100%; }