/*
Theme Name: Propulsion Numérique
Description: Thème sur mesure pour Propulsion Numérique.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Author: Propulsion Numérique
Author URI: https://propulsionnumerique.ca
Text Domain: propulsion-numerique
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Abstracts (tokens + forwards) */
/* ==========================================================================
DESIGN TOKENS — Propulsion Numérique
Thème sombre premium — fond Onyx
========================================================================== */
/* ----------------------------------
Couleurs — identité
---------------------------------- */
:root {
/* Rythme vertical de sections — réutilisable sur toutes les pages */
--section-padding: clamp(2rem, 5vw, 4.5rem);
--section-padding-sm: clamp(1.25rem, 3vw, 2.5rem);
/* Couple principal */
--color-school-bus-yellow: #ffc300;
--color-onyx: #0a0a0a;
/* Interactions */
--color-goldenrod: #d9a800;
--color-dark-goldenrod: #b88f00;
/* Accents réservés */
--color-copper: #b87333;
/* Cuivre foncé pour les GRANDS APLATS (boutons) : un aplat occupe plus de
surface et lit plus présent/vif que le même cuivre en texte/trait fin. Ce
token compense en sens inverse pour que le bouton rejoigne le ton sobre du
mot « GRATUIT » et du liséré. */
--color-copper-fill: #a3652e;
--color-amber: #c05c2c;
/* Surfaces (sur fond Onyx) */
--color-carbon-black: #1a1a1a;
--color-graphite: #2a2a2a;
/* Texte sur sombre */
--color-white-smoke: #f5f5f5;
--color-blanc: #ffffff;
--color-texte: #e8e8e4;
--color-texte-muted: rgb(232 232 228 / 0.8);
/* Séparations */
--color-bordure-subtile: rgb(255 255 255 / 0.08);
--color-bordure-forte: rgb(255 255 255 / 0.14);
/* Focus accessibilité */
--color-focus-ring: var(--color-school-bus-yellow);
/* Polices — Slake (UI / contenu), Ostra Centra (nom de marque seulement) */
--font-slake: "Slake", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
--font-ostra: "Ostra Centra", "Slake", system-ui, -apple-system, sans-serif;
}
/* ----------------------------------
Alias Sass
---------------------------------- */
/* Raccourcis layout */
/* ----------------------------------
Typographie
---------------------------------- */
/* Alias titres / boutons (même Slake que le corps — comme ancien $ff-heading CertiPro) */
/* ----------------------------------
Espacements
---------------------------------- */
/* ----------------------------------
Breakpoints
---------------------------------- */
/* XL = premier pixel du layout « large » ; la zone compacte laptop utilise max-width: ($bp-xl - 1), donc jusqu’à 1300px. */
/* Très grands écrans — header pleine largeur, hero plus d’air */
/* Base */
/* --------------------------------------------------------------------------
Polices auto-hébergées (WOFF2 uniquement)
— Ostra Centra : nom / marque (logo texte)
— Slake : interface et contenus
--------------------------------------------------------------------------- */
@font-face {
font-family: Slake;
src: url("assets/fontes/slake_thin-webfont.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Slake;
src: url("assets/fontes/slake_light-webfont.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Slake;
src: url("assets/fontes/slake_regular-webfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Slake;
src: url("assets/fontes/slake_bold-webfont.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Slake;
src: url("assets/fontes/slake_black-webfont.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ostra Centra";
src: url("assets/fontes/ostra_centra-webfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Abstracts (tokens + forwards) */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--color-onyx);
color: var(--color-texte);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--color-school-bus-yellow);
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
a:hover,
a:focus-visible {
color: var(--color-goldenrod);
}
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* ==========================================================================
GLOBAL IMAGE BEHAVIOR
========================================================================== */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Abstracts (tokens + forwards) */
/* =========================
BASE — Document (reprise échelle CertiPro, famille Slake)
========================= */
html {
font-family: var(--font-slake);
font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
font-variant-ligatures: none;
}
body {
font-family: var(--font-slake);
font-weight: 400;
line-height: 1.6;
}
p {
font-family: var(--font-slake);
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin: 0 0 0.75rem 0;
letter-spacing: 0.02em;
}
@media (min-width: 1301px) {
p {
font-size: 17px;
line-height: 26px;
}
}
ul,
ol {
margin: 0 0 0.75rem 0;
padding-left: 1rem;
}
li {
margin-bottom: 0.25rem;
}
a {
text-underline-offset: 0.15em;
}
dd {
margin-bottom: 8px;
}
.pn-small-text {
font-family: var(--font-slake);
font-weight: 400;
font-size: 12px;
line-height: 18px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.pn-small-text {
font-size: 14px;
line-height: 21px;
}
}
/* ---- Apostrophe typographique (utilitaire réutilisable) ----
Slake rend l'apostrophe à l'intérieur de la lettre précédente : on
isole l'apostrophe dans ' pour ajouter une
fine espace à sa droite et décoller la lettre suivante (« L' » + « a »).
Valeur à ajuster visuellement ; candidate à une généralisation. */
.pn-apos {
margin-right: 0.08em;
}
/* =========================
HEADINGS — tailles / interlignes repris de CertiPro
========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-slake);
margin: 0;
color: var(--color-blanc);
}
h1 {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1;
font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
}
h2 {
font-feature-settings: "kern" 1, "liga" 0, "calt" 0, "dlig" 0;
font-variant-ligatures: no-common-ligatures no-contextual;
}
h1 {
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
margin: 0 0 1rem 0;
}
@media (min-width: 768px) {
h1 {
font-size: 22px;
line-height: 33px;
}
}
@media (min-width: 1024px) {
h1 {
font-weight: 600;
font-size: 24px;
line-height: 45px;
}
}
.pn-h1-sub {
display: block;
font-family: var(--font-slake);
font-variant-caps: all-small-caps;
font-weight: 600;
font-size: 14px;
line-height: 21px;
}
@media (min-width: 768px) {
.pn-h1-sub {
font-size: 18px;
line-height: 27px;
}
}
@media (min-width: 1024px) {
.pn-h1-sub {
font-size: 24px;
line-height: 45px;
}
}
h2 {
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
margin: 0 0 0.75rem 0;
letter-spacing: 0.05em;
}
@media (min-width: 768px) {
h2 {
font-size: 24px;
line-height: 36px;
letter-spacing: 0.05em;
}
}
@media (min-width: 1024px) {
h2 {
font-size: 30px;
line-height: 51px;
letter-spacing: 0.05em;
}
}
@media (min-width: 1301px) {
h2 {
font-size: 34px;
line-height: 51px;
letter-spacing: 0.05em;
}
}
h3 {
font-weight: 600;
font-size: 18px;
line-height: 27px;
font-variant-caps: all-small-caps;
margin: 0 0 0.5rem 0;
}
@media (min-width: 768px) {
h3 {
font-size: 18px;
line-height: 27px;
}
}
@media (min-width: 1024px) {
h3 {
font-size: 22px;
line-height: 33px;
}
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: 21px;
margin: 0 0 0.25rem 0;
}
@media (min-width: 768px) {
h4 {
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 1024px) {
h4 {
font-weight: 500;
font-size: 20px;
line-height: 30px;
}
}
h5,
h6 {
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.25rem 0;
}
.pn-breadcrumb {
font-family: var(--font-slake);
font-weight: 400;
font-size: 14px;
line-height: 21px;
}
@media (min-width: 768px) {
.pn-breadcrumb {
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 1024px) {
.pn-breadcrumb {
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
}
/* Contenu éditorial WordPress */
.entry-content p {
color: var(--color-texte);
max-width: 65ch;
}
/* ---- Label de section — réutilisable sur tout le site ---- */
.pn-label {
display: inline-block;
font-family: var(--font-slake);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
line-height: 1.5;
}
@media (min-width: 768px) {
.pn-label {
line-height: 1;
}
}
/* Components */
/* ==========================================================================
ICONS — Propulsion Numérique (inline SVG)
========================================================================== */
.icon {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
vertical-align: middle;
color: currentColor;
}
.icon svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
stroke: currentColor;
}
/* Abstracts (tokens + forwards) */
/* ==========================================================================
SKIP LINK
========================================================================== */
.pn-skip-link {
position: absolute;
left: -9999px;
z-index: 100000;
padding: 0.75rem 1rem;
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
font-weight: 600;
text-decoration: none;
}
.pn-skip-link:focus {
left: 1rem;
top: 1rem;
outline: 2px solid var(--color-blanc);
outline-offset: 2px;
}
html.is-nav-open {
overflow: hidden;
}
/* ==========================================================================
PANNEAU MENU (overlay + tiroir — reprend CertiPro, couleurs Propulsion)
========================================================================== */
.site-header__panel[hidden] {
display: none;
}
.site-header__panel {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
justify-content: flex-start;
padding: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.site-header__panel-inner {
position: relative;
min-height: 100dvh;
height: 100dvh;
width: 100vw;
max-width: 100vw;
background: var(--color-carbon-black);
color: var(--color-blanc);
/* Air en haut : S mobile, M tablette, L desktop (lg / xl identiques) */
padding-top: 0.75rem;
padding-inline: 1rem;
padding-bottom: 1.5rem;
overflow: auto;
transform: translateX(16px);
opacity: 0;
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
will-change: transform, opacity;
}
/* Space M sous la liste, sans pousser le bouton en bas du viewport */
.site-header__panel-inner > .pn-nav {
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.site-header__panel-inner {
padding-top: 1rem;
}
}
@media (min-width: 1024px) {
.site-header__panel-inner {
padding-top: 1.5rem;
}
}
.site-header__panel.is-open {
opacity: 1;
visibility: visible;
transition: opacity 220ms ease, visibility 0s;
}
.site-header__panel.is-open .site-header__panel-inner {
transform: translateX(0);
opacity: 1;
}
.site-header__close {
position: absolute;
top: 22px;
right: 0.75rem;
width: 44px;
height: 44px;
border: 0;
background: transparent;
color: var(--color-blanc);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.site-header__close:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.site-header__panel-brand {
display: flex;
flex-direction: column;
gap: 0.25rem;
/* Liste : + space S sous le titre (partout) */
margin-bottom: 1.75rem;
}
/* Mobile + tablette : dégager le logo / titre Propulsion numérique du bord haut-gauche */
@media (max-width: 1023px) {
.site-header__panel-brand {
margin-top: 1rem;
margin-left: 1rem;
}
}
.site-header__panel-brand .custom-logo-link {
display: inline-block;
line-height: 0;
}
.site-header__panel-brand .custom-logo {
max-height: 3rem;
width: auto;
}
.site-header__panel-logo {
display: inline-block;
line-height: 0;
text-decoration: none;
color: var(--color-school-bus-yellow);
}
.site-header__panel-cta {
padding-top: 0;
padding-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
@media (min-width: 768px) {
.site-header__panel-cta {
align-items: flex-start;
}
}
.pn-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-nav__item {
margin: 0;
padding: 0;
}
.pn-nav__link,
.pn-nav__group-btn,
.pn-nav__info-title {
font-family: var(--font-slake);
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
text-decoration: none;
color: var(--color-blanc);
display: flex;
align-items: center;
width: 100%;
padding: 4px 0;
}
.pn-nav__group-btn {
background: transparent;
border: 0;
cursor: pointer;
gap: 14px;
}
.pn-nav__link,
.pn-nav__sub-link,
.pn-nav__group-btn {
position: relative;
text-decoration: none;
transition: transform 140ms ease;
}
.pn-nav__link,
.pn-nav__sub-link {
padding-left: 16px;
}
.pn-nav__sub-link::before {
top: 10px;
bottom: 2px;
left: -8px;
content: "";
position: absolute;
bottom: 8px;
width: 3px;
background: var(--color-school-bus-yellow);
transform: scaleY(0);
transform-origin: center;
transition: transform 160ms ease;
}
.pn-nav__link::before {
content: "";
position: absolute;
left: -8px;
top: 6px;
bottom: 7px;
width: 3px;
background: var(--color-school-bus-yellow);
transform: scaleY(0);
transform-origin: center;
transition: transform 160ms ease;
}
.pn-nav__group-btn {
padding-left: 16px;
}
.pn-nav__group-btn::before {
content: "";
position: absolute;
left: -8px;
top: 6px;
bottom: 7px;
width: 3px;
background: var(--color-school-bus-yellow);
transform: scaleY(0);
transform-origin: center;
transition: transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
.pn-nav__group-btn:hover {
transform: translateX(4px);
}
.pn-nav__group-btn:hover::before {
transform: scaleY(1);
}
}
.pn-nav__group-btn:focus-visible {
transform: translateX(2px);
}
.pn-nav__group-btn:focus-visible::before {
transform: scaleY(1);
}
.pn-nav__link:hover,
.pn-nav__sub-link:hover {
transform: translateX(4px);
}
.pn-nav__link:hover::before,
.pn-nav__sub-link:hover::before {
transform: scaleY(1);
}
.pn-nav__item.is-active > .pn-nav__link,
.pn-nav__sub-item.is-active > .pn-nav__sub-link {
transform: translateX(2px);
}
.pn-nav__item.is-active > .pn-nav__link::before,
.pn-nav__sub-item.is-active > .pn-nav__sub-link::before {
transform: scaleY(1);
}
.pn-nav__link:focus-visible,
.pn-nav__sub-link:focus-visible {
transform: translateX(2px);
}
.pn-nav__link:focus-visible::before,
.pn-nav__sub-link:focus-visible::before {
transform: scaleY(1);
}
.pn-nav__sub-link {
padding-left: 22px;
}
.icon--nav-arrow {
width: 24px;
height: 24px;
margin-top: 1px;
color: var(--color-blanc);
display: block;
transform: rotate(0deg);
transition: transform 160ms ease;
}
.pn-nav__group-btn[aria-expanded=true] .icon--nav-arrow {
transform: rotate(90deg);
}
.pn-nav__sub {
list-style: none;
margin: 0.25rem 0 0.75rem 0;
padding-left: 1rem;
}
.pn-nav__sub-link {
font-family: var(--font-slake);
font-weight: 500;
font-size: 14px;
line-height: 21px;
text-transform: none;
color: var(--color-blanc);
text-decoration: none;
display: block;
padding: 0.25rem 0;
}
.pn-nav__link[aria-disabled=true] {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
/* --------------------------------------------------------------------------
Mobile : légère entrée par le bas (comme CertiPro)
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.site-header__panel-inner {
max-width: none;
transform: translateY(10px);
}
.site-header__panel.is-open .site-header__panel-inner {
transform: translateY(0);
}
}
/* --------------------------------------------------------------------------
Tablette
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
.site-header__panel {
justify-content: flex-end;
padding: 0;
}
.site-header__panel-inner {
max-width: 560px;
border-radius: 0;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
padding-top: 1rem;
padding-inline: 3rem;
padding-bottom: 1.5rem;
transform: translateX(16px);
}
.site-header__panel.is-open .site-header__panel-inner {
transform: translateX(0);
padding-inline: 1rem;
}
}
/* --------------------------------------------------------------------------
Desktop : tiroir à droite
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.site-header__panel {
justify-content: flex-end;
padding: 0;
}
.site-header__panel-inner {
width: 480px;
max-width: 480px;
height: 100vh;
border-radius: 0;
padding-top: 1.5rem;
padding-right: 1rem;
padding-bottom: 1.5rem;
padding-left: 35px;
box-shadow: -25px 0 60px rgba(0, 0, 0, 0.45);
transform: translateX(16px);
}
.site-header__panel.is-open .site-header__panel-inner {
transform: translateX(0);
}
}
/* --------------------------------------------------------------------------
Grand écran : titre panneau + espacement navigation
-------------------------------------------------------------------------- */
@media (min-width: 1301px) {
.site-branding__lockup--panel .site-branding__line--first,
.site-branding__lockup--panel .site-branding__line--only,
.site-branding__lockup--panel .site-branding__line--second {
font-size: 1.35rem;
}
.pn-nav__list {
gap: 0.75rem;
}
}
/* --------------------------------------------------------------------------
CTA panneau : le bouton jaune « Faire analyser mon site » garde son
surlignement jaune (variante du bouton primaire).
-------------------------------------------------------------------------- */
.site-header__panel-cta .pn-btn {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.site-header__panel-cta .pn-btn::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -3px;
height: 6px;
background: linear-gradient(110deg, transparent 0%, rgba(255, 195, 0, 0.35) 30%, rgb(255, 195, 0) 50%, rgba(255, 195, 0, 0.35) 70%, transparent 100%);
border-radius: 100px;
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
.site-header__panel-cta .pn-btn:hover::after {
opacity: 1;
transform: scaleX(1);
}
}
.site-header__panel-cta .pn-btn:focus-visible::after {
opacity: 1;
transform: scaleX(1);
}
/* --------------------------------------------------------------------------
Pré-analyse : ancien bouton orange devenu un lien texte, sous le bouton
jaune (retour Jeff 2026-07-19). Orange ambre — l'accent du contenu des
pages — au lieu du jaune, pour le distinguer du bouton primaire au-dessus
(demande Jeff 2026-07-23). Flèche qui avance et soulignement au survol.
-------------------------------------------------------------------------- */
.site-header__panel-cta-link {
font-family: var(--font-slake);
font-weight: 600;
font-size: 15px;
line-height: 22px;
text-transform: uppercase;
letter-spacing: 0.02em;
text-decoration: none;
text-underline-offset: 4px;
color: var(--color-amber);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 4px;
}
.site-header__panel-cta-arrow {
display: inline-block;
transition: transform 160ms ease;
}
.site-header__panel-cta-link:hover,
.site-header__panel-cta-link:focus-visible {
text-decoration: underline;
}
.site-header__panel-cta-link:focus-visible .site-header__panel-cta-arrow {
transform: scale(1.18);
}
@media (hover: hover) and (pointer: fine) {
.site-header__panel-cta-link:hover .site-header__panel-cta-arrow {
transform: scale(1.18);
}
}
.site-header__panel-cta-link:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.pn-nav__link,
.pn-nav__sub-link,
.pn-nav__group-btn,
.pn-nav__link::before,
.pn-nav__sub-link::before {
transition: none;
}
.pn-nav__link:hover,
.pn-nav__sub-link:hover,
.pn-nav__item.is-active > .pn-nav__link,
.pn-nav__sub-item.is-active > .pn-nav__sub-link,
.pn-nav__link:focus-visible,
.pn-nav__sub-link:focus-visible {
transform: none;
}
.site-header__panel,
.site-header__panel-inner {
transition: none !important;
}
.site-header__panel.is-open .site-header__panel-inner {
transform: none !important;
opacity: 1 !important;
}
}
/* Abstracts (tokens + forwards) */
/* =========================
Liens & focus (hors .pn-btn) — structure CertiPro adaptée
========================= */
a:not(.pn-btn) {
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
}
a:focus-visible,
button:focus-visible:not(.pn-btn),
[role=button]:focus-visible:not(.pn-btn),
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
a:not(.pn-btn):hover {
text-decoration-thickness: 0.12em;
}
a:not(.pn-btn):active {
transform: translateY(1px);
}
/* ==========================================================================
BOUTONS — calque CertiPro (dimensions, états), couleurs Propulsion Numérique
========================================================================== */
.pn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
text-decoration: none;
font-family: var(--font-slake);
text-transform: uppercase;
text-align: center;
/* Texte trop long : le bouton ne déborde JAMAIS — il garde sa largeur
(plafonnée au contenant) et le libellé passe sur deux lignes. */
white-space: normal;
text-wrap: balance;
border: 0;
border-radius: 5px;
padding-inline: 1rem;
padding-block: 0.3rem;
width: 275px;
max-width: 100%;
min-height: 40px;
font-size: 16px;
font-weight: 600;
line-height: 22px;
-webkit-tap-highlight-color: transparent;
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 160ms ease, filter 240ms ease;
box-shadow: none;
}
@media (min-width: 768px) {
.pn-btn {
width: 275px;
min-height: 40px;
font-size: 18px;
line-height: 30px;
}
.pn-btn--accent {
width: 300px;
}
}
@media (min-width: 1024px) {
.pn-btn {
width: 300px;
min-height: 45px;
font-size: 20px;
line-height: 30px;
}
}
/* Largeur auto pour libellés courts (corrige l'effet « surligneur ») —
composant global, utilisé sur toutes les pages. */
.pn-btn--auto {
width: auto;
min-width: 170px;
max-width: 100%;
padding-inline: clamp(1.25rem, 3vw, 2rem);
}
/* Hover « lumière-matière » : chaque variante émet son propre halo (défini
plus bas) + une arête claire en haut, comme la lumière qui accroche un
objet. Même grammaire que le halo ambre des cartes (offres/composantes).
Gaté pointeur fin — pas de hover collant au tap (charte §6). */
@media (hover: hover) {
.pn-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
}
.pn-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pn-btn:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
box-shadow: none;
}
.pn-btn:disabled,
.pn-btn[aria-disabled=true] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.pn-btn {
transition: none;
}
.pn-btn:hover,
.pn-btn:active {
transform: none;
}
}
/* --- Variantes (mapping CertiPro → thème sombre) --- */
/* Primaire — jaune école (équivalent CTA fort) */
.pn-btn--primary {
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
border: 1px solid transparent;
}
@media (hover: hover) {
.pn-btn--primary:hover {
background: var(--color-goldenrod);
color: var(--color-onyx);
box-shadow: 0 0 12px rgba(255, 195, 0, 0.45), 0 0 36px rgba(255, 195, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
}
.pn-btn--primary:active {
background: var(--color-dark-goldenrod);
color: var(--color-onyx);
box-shadow: 0 0 8px rgba(255, 195, 0, 0.3), 0 0 20px rgba(255, 195, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Clair — texte foncé sur fond clair (équivalent cta-white) */
.pn-btn--surface {
background: var(--color-blanc);
color: var(--color-onyx);
border: 1px solid transparent;
}
@media (hover: hover) {
.pn-btn--surface:hover {
background: var(--color-white-smoke);
color: var(--color-onyx);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 32px rgba(255, 255, 255, 0.16), 0 8px 22px rgba(0, 0, 0, 0.45);
}
}
.pn-btn--surface:active {
background: var(--color-texte-muted);
color: var(--color-onyx);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Accent secondaire — carbone (équivalent cta-blue) */
.pn-btn--accent {
background: transparent;
color: var(--color-blanc);
border: 1px solid rgba(255, 255, 255, 0.28);
}
@media (hover: hover) {
.pn-btn--accent:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.45);
color: var(--color-blanc);
}
}
.pn-btn--accent:active {
background: rgba(255, 255, 255, 0.1);
}
.pn-preanalyse-door {
margin: 1rem auto 0;
max-width: 46ch;
font-size: 0.9375rem;
color: var(--color-texte-muted);
}
.pn-preanalyse-door a {
color: var(--color-blanc);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pn-preanalyse-door a:hover {
text-decoration: none;
}
/* Cuivre / accent chaud (équivalent cta-rouge foncé, sans rouge Certi) */
.pn-btn--accent-warm {
background: var(--color-copper);
color: var(--color-blanc);
border: 1px solid transparent;
}
@media (hover: hover) {
.pn-btn--accent-warm:hover {
background: var(--color-goldenrod);
color: var(--color-onyx);
box-shadow: 0 0 12px rgba(255, 195, 0, 0.4), 0 0 36px rgba(255, 195, 0, 0.25), 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
}
.pn-btn--accent-warm:active {
background: var(--color-dark-goldenrod);
color: var(--color-onyx);
box-shadow: 0 0 14px rgba(255, 195, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Secondaire discret */
.pn-btn--secondary {
background: var(--color-graphite);
color: var(--color-blanc);
border: 1px solid transparent;
}
@media (hover: hover) {
.pn-btn--secondary:hover {
background: var(--color-carbon-black);
color: var(--color-school-bus-yellow);
border-color: rgba(255, 195, 0, 0.35);
box-shadow: 0 0 18px rgba(255, 195, 0, 0.15), 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
}
.pn-btn--secondary:active {
background: var(--color-onyx);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Lien / ghost — pas de bloc fixe */
.pn-btn--ghost {
display: inline;
width: auto;
height: auto;
min-height: 0;
padding: 0.5rem 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-school-bus-yellow);
background: transparent;
border: 0;
border-radius: 0;
text-transform: none;
white-space: normal;
box-shadow: none;
}
@media (hover: hover) {
.pn-btn--ghost:hover {
transform: none;
color: var(--color-goldenrod);
text-decoration: underline;
box-shadow: none;
}
}
.pn-btn--ghost:active {
transform: none;
opacity: 0.9;
}
.pn-btn--ghost:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
/* Tailles typo optionnelles (classes utilitaires CertiPro) */
.pn-btn--lg {
font-weight: 600;
font-size: 20px;
line-height: 36px;
}
.pn-btn--md {
font-weight: 700;
font-size: 18px;
line-height: 30px;
}
.pn-btn--sm {
font-weight: 600;
font-size: 16px;
line-height: 22px;
}
/* Format mobile — uniformisation des boutons, calquée sur le CTA « Faire
analyser mon site » de l'accueil (retour Jeff 2026-07-19) :
- police +1px (min 17px) et graisse bold pour TOUS les boutons (sauf les
liens-fantômes --ghost : retours d'étape, refus cookies, liens de carte) ;
- pleine largeur + centrage pour les CTA autonomes. Les boutons --auto
(paires côte à côte, nav de steppers) gardent leur largeur pour ne pas
casser leur disposition — ils reçoivent quand même la police/graisse. */
@media (max-width: 767px) {
.pn-btn:not(.pn-btn--ghost) {
font-size: clamp(1.0625rem, 4.5vw, 1.3125rem);
font-weight: 700;
line-height: 1.3;
}
.pn-btn:not(.pn-btn--ghost):not(.pn-btn--auto) {
width: 100%;
}
}
/* Abstracts (tokens + forwards) */
.pn-joindre-form__input.is-invalid,
.pn-analyse-form__input.is-invalid,
.pn-analyse-form__textarea.is-invalid {
border-color: #e8806f;
box-shadow: 0 0 0 3px rgba(232, 128, 111, 0.16);
}
.pn-joindre-form__input.is-valid,
.pn-analyse-form__input.is-valid,
.pn-analyse-form__textarea.is-valid {
border-color: rgba(114, 187, 148, 0.6);
}
.pn-field-error {
margin: 0.4rem 0 0;
font-size: 0.8125rem;
line-height: 1.45;
color: #e8806f;
}
.pn-field-error[hidden] {
display: none;
}
.pn-field-error::before {
content: "";
display: inline-block;
width: 0.4rem;
height: 0.4rem;
margin-right: 0.45rem;
border-radius: 50%;
background: #e8806f;
vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
.pn-joindre-form__input,
.pn-analyse-form__input,
.pn-analyse-form__textarea {
transition: border-color 180ms ease, box-shadow 180ms ease;
}
}
/* Abstracts (tokens + forwards) */
/* Variantes héritées Certi-Pro — ralliées au système halo + arête
(équivalences : cta-blue ≈ primary, cta-white ≈ surface,
cta-rougeFonce ≈ accent). */
.pn-btn--cta-blue {
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
@media (hover: hover) {
.pn-btn--cta-blue:hover {
background: var(--color-goldenrod);
color: var(--color-onyx);
box-shadow: 0 0 12px rgba(255, 195, 0, 0.45), 0 0 36px rgba(255, 195, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
}
.pn-btn--cta-blue:active {
background: var(--color-dark-goldenrod);
color: var(--color-onyx);
}
.pn-btn--cta-white {
background: var(--color-blanc);
color: var(--color-onyx);
}
@media (hover: hover) {
.pn-btn--cta-white:hover {
background: var(--color-white-smoke);
color: var(--color-onyx);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 32px rgba(255, 255, 255, 0.16), 0 8px 22px rgba(0, 0, 0, 0.45);
}
}
.pn-btn--cta-white:active {
background: var(--color-texte-muted);
color: var(--color-onyx);
}
.pn-btn--cta-rougeFonce {
background: var(--color-graphite);
color: var(--color-blanc);
}
@media (hover: hover) {
.pn-btn--cta-rougeFonce:hover {
background: var(--color-graphite);
color: var(--color-blanc);
box-shadow: 0 0 18px rgba(255, 255, 255, 0.1), 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
}
.pn-btn--cta-rougeFonce:active {
background: var(--color-carbon-black);
}
/* ==========================================================================
TUTOS & INFOS — HUB
========================================================================== */
/* ==========================================================================
Base
========================================================================== */
.pn-tutos-infos-page {
background: var(--color-white-smoke);
}
.pn-tutos-hub {
padding-bottom: 56px;
}
.pn-tutos-hub__top {
display: grid;
gap: 16px;
margin-top: 22px;
}
.pn-tutos-hub__news-column {
display: grid;
gap: 14px;
}
.pn-band--hub-title {
background: var(--color-carbon-black);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 0;
padding-block: 1rem;
}
.pn-tutos-hub__band-inner {
min-width: 0;
}
.pn-tutos-hub__hub-title {
margin: 0;
padding: 0;
font-family: var(--font-ostra);
font-weight: 400;
font-size: clamp(1.35rem, 2.8vw, 2rem);
line-height: 1.2;
text-align: left;
color: var(--color-blanc);
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-variant-ligatures: common-ligatures contextual;
}
@media (min-width: 768px) {
.pn-tutos-hub__band-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: center;
}
.pn-tutos-hub__band-inner .pn-tutos-hub__hub-title {
grid-column: 1;
}
}
@media (min-width: 1024px) {
.pn-tutos-hub__band-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
}
}
.pn-tutos-hub__feature-media {
display: none;
margin: 0;
border-radius: 6px;
aspect-ratio: 16/9;
overflow: hidden;
}
.pn-tutos-hub__feature-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
Intro
========================================================================== */
.pn-tutos-hub__intro {
display: grid;
gap: 14px;
margin-top: 18px;
}
.pn-tutos-hub__eyebrow {
background: var(--color-carbon-black);
}
.pn-tutos-hub__h2 {
margin: 0;
padding: 0.75rem 0;
text-align: center;
color: var(--color-blanc);
}
.pn-tutos-hub__break {
display: inline;
}
@media (max-width: 400px) {
.pn-tutos-hub__break {
display: block;
}
}
@media (min-width: 768px) {
.pn-tutos-hub__h2 {
padding: 8px;
font-size: 24px;
}
}
/* ==========================================================================
Accordion
========================================================================== */
.pn-tutos-hub__accordion {
width: fit-content;
min-width: 0;
}
.pn-tutos-hub__accordion-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: clamp(170px, 52vw, 238px);
min-height: 36px;
padding: 7px 12px;
border-radius: 5px;
background: var(--color-carbon-black);
color: var(--color-blanc);
font-family: var(--font-slake);
font-size: 14px;
font-weight: 600;
line-height: 16px;
cursor: pointer;
list-style: none;
border: 1px solid transparent;
transition: border-radius 180ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
.pn-tutos-hub__accordion:not([open]) .pn-tutos-hub__accordion-trigger:hover {
background: var(--color-white-smoke);
color: var(--color-carbon-black);
border-color: transparent;
font-weight: 700;
}
}
.pn-tutos-hub__accordion-trigger:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}
.pn-tutos-hub__accordion-trigger::-webkit-details-marker {
display: none;
}
.pn-tutos-hub__accordion-trigger::marker {
content: "";
}
.pn-tutos-hub__accordion-arrow {
width: 18px;
height: auto;
flex-shrink: 0;
filter: brightness(0) invert(1);
transform: rotate(0deg);
transition: transform 180ms ease;
}
.pn-tutos-hub__accordion[open] .pn-tutos-hub__accordion-arrow {
transform: rotate(90deg);
}
.pn-tutos-hub__accordion[open] .pn-tutos-hub__accordion-trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: rgba(8, 62, 125, 0.18);
background: linear-gradient(180deg, rgba(43, 53, 80, 0.98), rgba(43, 53, 80, 0.92));
font-weight: 700;
}
.pn-tutos-hub__accordion-panel {
display: grid;
gap: 0;
margin-top: 0;
padding: 8px 10px;
border-radius: 5px;
border: 1px solid rgba(8, 62, 125, 0.18);
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.96));
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.pn-tutos-hub__accordion-panel a {
display: block;
padding: 9px 8px;
color: var(--color-texte);
font-family: var(--font-slake);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
font-variant: normal;
font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
font-variant-ligatures: none;
text-rendering: auto;
border-radius: 4px;
transition: background-color 180ms ease, color 180ms ease;
}
.pn-tutos-hub__accordion-panel a + a {
border-top: 1px solid rgba(8, 62, 125, 0.18);
}
@media (hover: hover) and (pointer: fine) {
.pn-tutos-hub__accordion-panel a:not(.is-active):not([aria-current=true]):hover {
background: rgba(43, 53, 80, 0.06);
color: var(--color-carbon-black);
}
}
.pn-tutos-hub__accordion-panel a.is-active,
.pn-tutos-hub__accordion-panel a[aria-current=true] {
pointer-events: none;
cursor: default;
}
.pn-tutos-hub__filters-row {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: clamp(0.25rem, 3vw, 0.5rem);
}
@media (min-width: 400px) {
.pn-tutos-hub__filters-row {
gap: 0.5rem;
}
}
.pn-tutos-hub__filters-left {
display: grid;
gap: 8px;
}
.pn-tutos-hub__filters-offset {
margin-top: 0.5rem;
}
@media (min-width: 400px) {
.pn-tutos-hub__filters-offset {
margin-top: 0.75rem;
}
}
.pn-tutos-hub__reset {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(170px, 52vw, 238px);
min-height: 36px;
padding: 6px 12px;
margin: 0;
border: 1px solid transparent;
border-radius: 5px;
background: var(--color-white-smoke);
color: var(--color-carbon-black);
font: inherit;
font-size: 14px;
text-decoration: none;
cursor: pointer;
appearance: none;
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
.pn-tutos-hub__reset:hover {
background: var(--color-carbon-black);
color: var(--color-blanc);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}
}
.pn-tutos-hub__reset:active {
background: rgba(43, 53, 80, 0.92);
color: var(--color-blanc);
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}
.pn-tutos-hub__radios {
margin: 0;
padding: 2px 6px 0 0;
border: 0;
display: grid;
gap: 7px;
}
.pn-tutos-hub__radio-item {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--color-texte);
font-size: 14px;
line-height: 16px;
font-variant: small-caps;
white-space: nowrap;
}
.pn-tutos-hub__radio-item input {
margin: 0;
accent-color: var(--color-school-bus-yellow);
cursor: pointer;
}
.pn-tutos-hub__radio-item input[type=radio]:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
/* ==========================================================================
News
========================================================================== */
.pn-tutos-news {
margin-top: 0;
}
.pn-tutos-news__title {
margin-left: 4px;
margin-bottom: 10px;
color: var(--color-texte);
font-size: 14px;
line-height: 20px;
}
.pn-tutos-news__cards {
display: grid;
gap: 10px;
}
.pn-tutos-news-card {
padding: 16px 12px;
border-radius: 5px;
background: var(--color-white-smoke);
transition: transform 220ms ease, box-shadow 240ms ease, background-color 240ms ease;
}
.pn-tutos-news-card__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
list-style: none;
}
.pn-tutos-news-card__trigger::-webkit-details-marker {
display: none;
}
.pn-tutos-news-card__trigger::marker {
content: "";
}
.pn-tutos-news-card__trigger h3 {
margin: 0;
}
@media (min-width: 1024px) {
.pn-tutos-news-card__trigger h3 {
font-size: 16px;
}
}
.pn-tutos-news-card__arrow {
width: 16px;
height: auto;
flex-shrink: 0;
transform: rotate(0deg);
transition: transform 180ms ease;
}
.pn-tutos-news-card[open] .pn-tutos-news-card__arrow {
transform: rotate(90deg);
}
.pn-tutos-news-card__content {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 8px;
}
.pn-tutos-news-card__rdv {
margin-top: 18px;
margin-bottom: 6px;
align-self: flex-end;
}
@media (max-width: 767px) {
.pn-tutos-news-card__content .pn-tutos-news-card__rdv {
margin-top: 16px;
margin-bottom: 10px;
}
.pn-tutos-news-card__rdv .pn-tutos-news-card__rdv-btn.pn-btn {
padding-block: 8px;
}
}
/* Compact : surcharge les tailles fixes .pn-btn (y compris >=768px) */
.pn-tutos-news-card__rdv-btn.pn-btn {
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
justify-content: center;
padding-block: 5px;
padding-inline: 20px;
font-size: 11px;
line-height: 14px;
font-weight: 600;
box-shadow: none;
}
/* Bouton compact : halo réduit à son échelle, gaté (système 2026-07-03). */
@media (hover: hover) {
.pn-tutos-news-card__rdv-btn.pn-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(255, 195, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
}
.pn-tutos-news-card__rdv-btn.pn-btn:active {
transform: translateY(0);
box-shadow: 0 0 6px rgba(255, 195, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
.pn-tutos-news-card__rdv-btn.pn-btn {
width: auto;
height: auto;
padding-block: 5px;
padding-inline: 20px;
font-size: 11px;
line-height: 14px;
}
}
@media (min-width: 1024px) {
.pn-tutos-news-card__rdv-btn.pn-btn {
width: auto;
height: auto;
padding-block: 6px;
padding-inline: 22px;
font-size: 11px;
line-height: 14px;
}
}
.pn-tutos-news-card h3 {
margin-bottom: 4px;
color: var(--color-texte);
font-size: 14px;
line-height: 20px;
}
.pn-tutos-news-card p {
margin: 0;
color: var(--color-texte-muted);
font-size: 14px;
line-height: 20px;
}
@media (hover: hover) and (pointer: fine) {
.pn-tutos-news-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}
}
.pn-tutos-news-card:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}
.pn-tutos-news-card[open]:focus-within {
box-shadow: 0 0 0 3px rgba(43, 53, 80, 0.22), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.pn-tutos-news-card__trigger:focus-visible {
outline: 2px solid rgba(43, 53, 80, 0.45);
outline-offset: 3px;
border-radius: 3px;
}
/* ==========================================================================
Radio CTA
========================================================================== */
.pn-tutos-hub__radio {
display: flex;
justify-content: flex-start;
margin-top: 8px;
}
.pn-tutos-hub__radio .pn-btn {
width: 100%;
max-width: 275px;
font-weight: 700;
font-size: 13px;
line-height: 16px;
}
/* ==========================================================================
Articles
========================================================================== */
.pn-tutos-articles {
margin-top: 20px;
}
.pn-tutos-articles__pager {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 14px;
color: var(--color-texte);
font-size: 12px;
line-height: 16px;
}
.pn-tutos-articles__grid {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding-bottom: 8px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pn-tutos-articles__grid::-webkit-scrollbar {
display: none;
}
.pn-tutos-card {
display: flex;
flex-direction: column;
flex: 0 0 min(86vw, 320px);
width: min(86vw, 320px);
min-height: 480px;
scroll-snap-align: start;
overflow: hidden;
border-radius: 5px;
background: var(--color-blanc);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.pn-tutos-card__media {
position: relative;
margin: 10px 10px 0;
border-radius: 5px;
height: 0;
padding-top: 56.25%; /* 16:9 strict ratio */
overflow: hidden;
background: linear-gradient(45deg, rgba(220, 220, 220, 0.45) 25%, transparent 25%), linear-gradient(-45deg, rgba(220, 220, 220, 0.45) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(220, 220, 220, 0.45) 75%), linear-gradient(-45deg, transparent 75%, rgba(220, 220, 220, 0.45) 75%);
background-size: 18px 18px;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
background-color: var(--color-white-smoke);
}
.pn-tutos-card__media-frame {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 5px;
}
.pn-tutos-card__media-image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}
.pn-tutos-card__media--placeholder {
position: relative;
display: block;
background: linear-gradient(180deg, rgba(242, 243, 244, 0.95), rgba(250, 250, 250, 0.98));
}
/* Zone 16:9 réelle créée par padding-top du parent ; on centre le logo CP dans cet espace sur tous formats. */
.pn-tutos-card__media-placeholder-graphic {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.pn-tutos-card__media-placeholder-icon {
display: block;
width: 68px;
height: auto;
max-width: clamp(52px, 18vw, 68px);
opacity: 0.22;
filter: grayscale(100%);
}
.pn-tutos-card__media-placeholder-label {
position: absolute;
left: 10px;
bottom: 8px;
color: rgba(37, 60, 63, 0.72);
font-size: 11px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pn-tutos-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
padding: 16px 14px 18px;
}
.pn-tutos-card__meta {
margin-bottom: 0;
color: var(--color-texte);
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-transform: uppercase;
}
@media (max-width: 767px) {
.pn-tutos-card__meta {
font-size: 15px;
line-height: 21px;
}
}
.pn-tutos-card__meta {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 48px;
}
.pn-tutos-card__tags {
display: grid;
gap: 6px;
margin-bottom: 0;
min-height: 38px;
}
.pn-tutos-card__tag {
position: relative;
padding-left: 18px;
color: var(--color-texte);
font-size: 12px;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pn-tutos-card__tag::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 9px;
height: 9px;
border: 2px solid var(--color-school-bus-yellow);
border-radius: 50%;
background: transparent;
}
.pn-tutos-card__body p:not(.pn-tutos-card__meta) {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 100px;
margin-top: 0;
margin-bottom: 0;
color: var(--color-texte-muted);
font-size: 13px;
line-height: 20px;
}
.pn-tutos-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: auto;
}
.pn-tutos-card__video-btn {
margin: 0;
}
.pn-tutos-card__link {
width: 140px;
height: 34px;
margin-top: 0;
margin-left: 0;
font-size: 11px;
line-height: 14px;
}
.pn-tutos-card__link:hover,
.pn-tutos-card__link:active {
transform: none;
box-shadow: none;
}
.pn-tutos-card__link:hover {
background: var(--color-white-smoke);
color: var(--color-carbon-black);
border-color: rgba(43, 53, 80, 0.35);
}
.pn-tutos-card__link:active {
background: var(--color-graphite);
}
.pn-tutos-hub__accordion-trigger:focus-visible,
.pn-tutos-hub__reset:focus-visible,
.pn-tutos-card__link:focus-visible {
outline: 2px solid rgba(43, 53, 80, 0.45);
outline-offset: 3px;
}
.pn-tutos-articles__empty {
margin: 0;
color: var(--color-texte);
}
.pn-tutos-articles__pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.pn-tutos-articles__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid rgba(43, 53, 80, 0.3);
color: var(--color-carbon-black);
background: var(--color-white-smoke);
text-decoration: none;
}
.pn-tutos-articles__pagination .page-numbers.current {
background: var(--color-carbon-black);
color: var(--color-blanc);
border-color: transparent;
}
@media (max-width: 1023px) {
.pn-tutos-card__body p:not(.pn-tutos-card__meta) {
margin-top: 14px;
}
}
/* ==========================================================================
Responsive
========================================================================== */
@media (min-width: 768px) {
.pn-tutos-hub__accordion-trigger,
.pn-tutos-hub__reset {
width: 238px;
}
.pn-tutos-hub__accordion-trigger span {
white-space: nowrap;
}
.pn-tutos-hub__top {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 20px;
}
.pn-tutos-hub__feature-media {
display: block;
}
.pn-tutos-hub__intro {
margin-top: 20px;
}
.pn-tutos-hub__radio {
justify-content: flex-start;
margin-top: 10px;
}
.pn-tutos-hub__radio .pn-btn {
max-width: 100%;
}
.pn-tutos-articles__pager {
display: none;
}
.pn-tutos-articles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
overflow: visible;
padding-bottom: 0;
scroll-snap-type: none;
}
.pn-tutos-card {
min-height: 480px;
flex: initial;
width: auto;
flex-direction: column;
scroll-snap-align: unset;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.pn-tutos-card {
min-height: 450px;
}
}
@media (min-width: 1024px) {
.pn-tutos-hub__feature-media {
margin-top: 0.5rem;
}
.pn-tutos-hub__news-column {
margin-top: 0.75rem;
}
.pn-tutos-hub__top {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
}
.pn-tutos-hub__news-column {
gap: 10px;
}
.pn-tutos-hub__radio {
margin-top: 10px;
}
.pn-tutos-card__body p:not(.pn-tutos-card__meta) {
margin-top: 8px;
}
.pn-tutos-card__meta {
font-size: 13px;
line-height: 18px;
min-height: 54px;
}
}
/* ==========================================================================
HUB BLOG — ADAPTATION DARK THEME (PROPULSION NUMERIQUE)
========================================================================== */
.pn-tutos-infos-page {
background: var(--color-onyx);
color: var(--color-texte);
}
.pn-tutos-news__title,
.pn-tutos-card__meta,
.pn-tutos-articles__empty {
color: var(--color-blanc);
}
.pn-tutos-news-card,
.pn-tutos-card {
background: var(--color-carbon-black);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.pn-tutos-news-card p,
.pn-tutos-card__body p:not(.pn-tutos-card__meta) {
color: var(--color-texte-muted);
}
.pn-tutos-news-card__arrow,
.pn-tutos-hub__accordion-arrow {
filter: brightness(0) invert(1);
}
.pn-tutos-hub__accordion-trigger {
background: var(--color-carbon-black);
color: var(--color-blanc);
border-color: rgba(255, 255, 255, 0.12);
}
.pn-tutos-hub__accordion-panel {
background: var(--color-graphite);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.22);
}
.pn-tutos-hub__accordion-panel a {
color: var(--color-texte);
}
.pn-tutos-hub__accordion-panel a + a {
border-top-color: rgba(255, 255, 255, 0.12);
}
.pn-tutos-hub__accordion-panel a.is-active,
.pn-tutos-hub__accordion-panel a[aria-current=true] {
color: var(--color-school-bus-yellow);
}
.pn-tutos-hub__reset {
background: var(--color-graphite);
color: var(--color-blanc);
border-color: rgba(255, 255, 255, 0.15);
}
.pn-tutos-hub__reset:hover {
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
.pn-tutos-hub__radio-item {
color: var(--color-texte);
}
.pn-tutos-hub__radio-item:has(input:checked) {
color: var(--color-school-bus-yellow);
}
.pn-tutos-card__tag {
color: var(--color-white-smoke);
}
.pn-tutos-card__tag::before {
border-color: var(--color-school-bus-yellow);
}
.pn-tutos-card__media {
background-color: var(--color-graphite);
}
.pn-tutos-card__media--placeholder {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.pn-tutos-card__media-placeholder-label {
color: rgba(255, 255, 255, 0.6);
}
.pn-tutos-card__link.pn-btn--cta-blue {
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
@media (hover: hover) {
.pn-tutos-card__link.pn-btn--cta-blue:hover {
background: var(--color-goldenrod);
color: var(--color-onyx);
}
}
.pn-tutos-articles__pagination .page-numbers {
background: var(--color-graphite);
color: var(--color-blanc);
border-color: rgba(255, 255, 255, 0.15);
}
.pn-tutos-articles__pagination .page-numbers.current {
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
.pn-forfait-modal__overlay {
background: rgba(0, 0, 0, 0.78);
}
.pn-forfait-modal__dialog {
background: var(--color-carbon-black);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--color-texte);
}
.pn-forfait-modal__title {
color: var(--color-blanc);
}
/* Abstracts (tokens + forwards) */
.pn-preuve {
margin: 0;
max-width: 100%;
}
.pn-preuve__frame {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.pn-preuve button.pn-preuve__frame {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
text-align: inherit;
cursor: pointer;
}
.pn-preuve__img {
display: block;
width: 100%;
height: auto;
}
.pn-preuve__caption {
margin-top: 0.75rem;
font-size: 0.82rem;
line-height: 1.5;
color: var(--color-texte-muted);
text-align: center;
}
.pn-preuve--flottant .pn-preuve__frame {
border: 1px solid var(--color-bordure-subtile);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.pn-preuve--navigateur .pn-preuve__frame {
border: 1px solid var(--color-bordure-forte);
border-radius: 10px;
padding-top: 34px;
background: var(--color-graphite);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.3);
}
.pn-preuve--navigateur .pn-preuve__frame::before {
content: "";
position: absolute;
top: 13px;
left: 15px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #ff5f57;
box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}
.pn-preuve--annote .pn-preuve__frame {
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
}
@media (hover: hover) {
.pn-preuve--zoomable .pn-preuve__frame:hover .pn-preuve__img {
transform: scale(1.04);
}
.pn-preuve--zoomable .pn-preuve__frame:hover .pn-preuve__zoom {
transform: scale(1.08);
border-color: var(--color-amber);
}
}
.pn-preuve--zoomable .pn-preuve__frame:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-preuve--zoomable .pn-preuve__img {
transition: transform 220ms ease;
}
.pn-preuve__zoom {
position: absolute;
right: 0.9rem;
bottom: 0.9rem;
display: grid;
place-items: center;
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
background: rgba(10, 10, 10, 0.8);
border: 2.5px solid var(--color-amber);
color: var(--color-amber);
box-shadow: 0 0 0 5px rgba(255, 195, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.4);
transition: transform 160ms ease, border-color 160ms ease;
}
.pn-preuve__zoom svg {
width: 1.6rem;
height: 1.6rem;
}
.pn-preuve--placeholder .pn-preuve__frame {
background: rgba(255, 255, 255, 0.02);
border: 1px dashed var(--color-bordure-forte);
box-shadow: none;
}
.pn-preuve__ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 180px;
padding: clamp(1.5rem, 4vw, 2.5rem);
text-align: center;
}
.pn-preuve__ph-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.7rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
border: 1px solid rgba(255, 195, 0, 0.4);
border-radius: 999px;
}
.pn-preuve__ph-alt {
max-width: 42ch;
font-size: 0.85rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-preuve--navigateur.pn-preuve--placeholder .pn-preuve__frame {
background: rgba(255, 255, 255, 0.02);
}
/* Abstracts (tokens + forwards) */
.pn-media-lightbox {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2.5rem);
}
.pn-media-lightbox[hidden] {
display: none;
}
.pn-media-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
opacity: 0;
transition: opacity 260ms ease;
}
.pn-media-lightbox__box {
position: relative;
margin: 0;
max-width: min(1000px, 100%);
max-height: 90vh;
display: flex;
flex-direction: column;
gap: 0.75rem;
opacity: 0;
transform: translateY(8px) scale(0.98);
transition: opacity 260ms ease, transform 260ms ease;
}
.pn-media-lightbox.is-open .pn-media-lightbox__overlay {
opacity: 1;
}
.pn-media-lightbox.is-open .pn-media-lightbox__box {
opacity: 1;
transform: none;
}
.pn-media-lightbox__close {
position: absolute;
top: -0.6rem;
right: -0.6rem;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--color-carbon-black);
color: var(--color-blanc);
cursor: pointer;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.pn-media-lightbox__close svg {
width: 20px;
height: 20px;
}
.pn-media-lightbox__close:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-media-lightbox__stage {
display: flex;
align-items: center;
justify-content: center;
width: min(1000px, 92vw);
height: min(72vh, 640px);
border-radius: 12px;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
overflow: hidden;
}
.pn-media-lightbox__img, .pn-media-lightbox__video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.pn-media-lightbox__caption {
margin: 0;
text-align: center;
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-media-lightbox__caption[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.pn-media-lightbox__overlay,
.pn-media-lightbox__box {
transition: none;
}
}
.pn-comp-type__media {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1rem;
}
.pn-comp-type__thumb {
display: flex;
flex-direction: column;
width: 118px;
padding: 0;
border: 1px solid var(--color-bordure-subtile);
border-radius: 10px;
overflow: hidden;
background: var(--color-carbon-black);
cursor: pointer;
text-align: center;
transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pn-comp-type__thumb-media {
position: relative;
display: block;
aspect-ratio: 16/10;
overflow: hidden;
}
.pn-comp-type__thumb-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 220ms ease;
}
.pn-comp-type__thumb-label {
display: block;
padding: 0.3rem 0.4rem 0.35rem;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-amber);
border-top: 1px solid var(--color-bordure-subtile);
background: rgba(255, 255, 255, 0.02);
}
.pn-comp-type__thumb--video .pn-comp-type__thumb-media::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-left: 12px solid rgba(255, 255, 255, 0.92);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
}
.pn-comp-type__thumb:not(.pn-comp-type__thumb--video):not(.pn-comp-type__thumb--ph) .pn-comp-type__thumb-media::after {
content: "";
position: absolute;
right: 0.3rem;
bottom: 0.3rem;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: no-repeat center/0.62rem url('data:image/svg+xml;utf8,'), rgba(10, 10, 10, 0.72);
border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (hover: hover) {
.pn-comp-type__thumb:hover {
border-color: var(--color-amber);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.pn-comp-type__thumb:hover .pn-comp-type__thumb-media img {
transform: scale(1.06);
}
}
.pn-comp-type__thumb:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-comp-type__thumb--ph {
cursor: default;
border-style: dashed;
}
.pn-comp-type__thumb--ph .pn-comp-type__thumb-media {
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.02);
}
.pn-comp-type__thumb--ph .pn-comp-type__thumb-media::before {
content: "⋯";
font-size: 1.1rem;
color: var(--color-texte-muted);
}
.pn-comp-type__thumb--ph .pn-comp-type__thumb-label {
color: var(--color-texte-muted);
}
@media (prefers-reduced-motion: reduce) {
.pn-comp-type__thumb,
.pn-comp-type__thumb-media img {
transition: none;
}
}
@media (max-width: 767px) {
.pn-sc-modal .pn-comp-type__thumb {
width: 100%;
}
.pn-sc-modal .pn-comp-type__thumb .pn-comp-type__thumb-media {
aspect-ratio: auto;
}
.pn-sc-modal .pn-comp-type__thumb .pn-comp-type__thumb-media img {
height: auto;
}
}
/* Abstracts (tokens + forwards) */
.pn-cookie-banner {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 1200;
background: var(--color-carbon-black);
border-top: 1px solid var(--color-bordure-subtile);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
padding: 1.5rem 1rem;
}
.pn-cookie-banner[hidden] {
display: none;
}
@media (max-width: 767px) {
.pn-cookie-banner {
padding: 0.75rem 1rem;
}
.pn-cookie-banner .pn-cookie-banner__inner {
gap: 0.75rem;
}
.pn-cookie-banner .pn-cookie-banner__status {
margin-bottom: 0.15rem;
font-size: 0.8rem;
}
.pn-cookie-banner .pn-cookie-banner__text {
font-size: 0.85rem;
line-height: 1.45;
}
}
.pn-cookie-banner__inner {
max-width: 60rem;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.pn-cookie-banner__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
}
.pn-cookie-banner__status {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--color-goldenrod);
}
.pn-cookie-banner__text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-texte);
}
.pn-cookie-banner__link {
color: var(--color-goldenrod);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pn-cookie-banner__link:hover, .pn-cookie-banner__link:focus-visible {
color: var(--color-amber);
}
.pn-cookie-banner__actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.pn-cookie-banner__btn {
min-width: 7rem;
}
/* Layout */
/* Abstracts (tokens + forwards) */
@keyframes pn-logo-shimmer {
from {
background-position: 0% center;
}
to {
background-position: 200% center;
}
}
.site-header {
position: relative;
top: auto;
z-index: 100;
background: var(--color-onyx);
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.055;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 120px 120px;
}
.site-header__inner {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2rem;
max-width: 80rem;
margin-inline: auto;
}
.site-branding {
min-width: 0;
flex: 1;
}
.site-branding__link {
text-decoration: none;
color: var(--color-school-bus-yellow);
}
.site-branding__link:hover,
.site-branding__link:focus-visible {
text-decoration: none;
}
.site-branding__link:hover .site-branding__title,
.site-branding__link:focus-visible .site-branding__title {
animation: pn-logo-shimmer 2.8s ease-in-out 1;
filter: drop-shadow(0 0 22px rgba(255, 195, 0, 0.22));
}
.site-branding__link:hover .site-branding__mark-svg,
.site-branding__link:focus-visible .site-branding__mark-svg {
filter: drop-shadow(0 0 14px rgba(255, 195, 0, 0.45));
transform: translateX(1px);
}
.site-branding__lockup {
display: inline-block;
}
.site-branding__line-row {
display: inline-flex;
align-items: center;
gap: clamp(0.5rem, 1.4vw, 0.85rem);
}
.site-branding__line-row--second {
margin-top: 0.12em;
margin-left: 1.5em;
}
.site-branding__mark {
flex-shrink: 0;
display: flex;
align-items: center;
}
.site-branding__mark-svg {
display: block;
width: clamp(18px, 5.2vw, 24.44px);
height: auto;
margin-bottom: 5px;
transition: filter 320ms ease, transform 320ms ease;
filter: drop-shadow(0 0 10px rgba(255, 195, 0, 0.32));
}
/**
* Ostra Centra — capitales : préserver les glyphes & options OpenType du fichier.
* (éviter letter-spacing excessif, qui casse souvent les formes « spéciales ».)
*/
.site-branding__title {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
font-family: var(--font-ostra);
font-weight: 400;
text-transform: uppercase;
background-image: linear-gradient(118deg, #ffe566 0%, var(--color-school-bus-yellow) 20%, #c8804a 36%, #ffe082 50%, var(--color-school-bus-yellow) 66%, #d4a045 80%, var(--color-school-bus-yellow) 100%);
background-size: 200% 100%;
background-position: 18% center;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 14px rgba(255, 195, 0, 0.11));
transition: filter 320ms ease;
}
.site-branding__line {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-rendering: optimizeLegibility;
letter-spacing: 0.05em;
}
/* Taille max demandée sur la première ligne ; la deuxième suit la même échelle en visuel */
.site-branding__line--first,
.site-branding__line--only,
.site-branding__line--second {
display: block;
line-height: 1;
font-size: clamp(1.5rem, 7.5vw, 1.875rem);
}
.site-branding__line--second {
margin: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
.site-branding__line--first,
.site-branding__line--only,
.site-branding__line--second {
font-size: clamp(1.8rem, 5.5vw, 2.8125rem);
}
.site-branding__mark-svg {
width: clamp(22px, 2.8vw, 30px);
}
}
@media (min-width: 1024px) {
.site-branding__line--first,
.site-branding__line--only,
.site-branding__line--second {
font-size: clamp(2.8125rem, 2.5vw, 3.125rem);
}
.site-branding__mark-svg {
width: clamp(26px, 2.2vw, 32px);
}
}
@media (min-width: 1301px) {
.site-branding__line--first,
.site-branding__line--only,
.site-branding__line--second {
font-size: clamp(2.8125rem, 2.8vw, 3.125rem);
}
}
.site-branding__title--split .site-branding__line--first {
margin-bottom: 0.08em;
}
.site-branding__lockup--panel .site-branding__mark-svg {
width: 20px;
}
.site-branding__lockup--panel .site-branding__line-row--second {
margin-left: 1.35em;
margin-top: 0.1em;
}
.site-branding__lockup--panel .site-branding__line--first,
.site-branding__lockup--panel .site-branding__line--only,
.site-branding__lockup--panel .site-branding__line--second {
font-size: 1.125rem;
}
@media (prefers-reduced-motion: reduce) {
.site-branding__link:hover .site-branding__title,
.site-branding__link:focus-visible .site-branding__title {
animation: none;
}
.site-branding__link:hover .site-branding__mark-svg,
.site-branding__link:focus-visible .site-branding__mark-svg {
transform: none;
}
}
.site-header__end {
/* Flex (pas grid) : évite des largeurs de colonne « instables » où le lien
passe à 2 lignes quand le bouton est en premier → faux « gros trou ». */
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
align-self: flex-start;
flex-shrink: 0;
gap: 0.75rem;
position: relative;
}
.site-header__end .site-header__blog-link {
display: block !important;
color: var(--color-school-bus-yellow);
font-family: var(--font-ostra) !important;
font-size: clamp(1.25rem, 2.6vw, 1.6rem);
line-height: 1;
text-decoration: none;
text-transform: uppercase;
text-align: end;
white-space: nowrap;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1;
text-rendering: optimizeLegibility;
}
.site-header__blog-link:hover,
.site-header__blog-link:focus-visible {
color: var(--color-school-bus-yellow);
text-decoration: none;
opacity: 0.92;
}
.site-header__menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.5rem;
border: 0;
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--color-blanc);
cursor: pointer;
line-height: 0;
border-radius: 10px;
flex-shrink: 0;
/* SVG racine : overflow hidden par défaut → rognage des arrondis / antialiasing en bord de viewBox */
overflow: visible;
}
.site-header__menu-toggle:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
/* Icône hamburger SVG inline (currentColor) : rendu identique sur toutes les
pages, aucun filtre ni blend dépendant du contexte d'empilement. */
.site-header__menu-icon {
display: block;
width: 45px;
height: 45px;
flex-shrink: 0;
}
.site-branding__logo--wp .custom-logo-link {
display: inline-block;
line-height: 0;
}
.site-branding__logo--wp .custom-logo {
display: block;
height: auto;
max-height: 2.75rem;
width: auto;
filter: brightness(0) invert(1);
}
@media (max-width: 767px) {
.site-header__inner {
padding-right: calc(36px + 1rem + 1.5rem);
}
.site-header__end {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 300;
gap: 0.5rem;
}
.site-header__end .site-header__blog-link {
display: none !important;
}
.site-header__menu-icon {
width: 36px;
height: 36px;
}
}
/* Layout header tablette */
@media (min-width: 768px) and (max-width: 1023px) {
.site-header__inner {
align-items: flex-start;
padding-bottom: 2rem;
padding-right: calc(50px + 1rem + 1.5rem);
}
.site-branding,
.site-header__end {
margin-top: 1.5rem;
margin-top: -0.5rem;
}
.site-header__menu-icon {
width: 45px;
height: 45px;
}
.site-header__end .site-header__blog-link {
font-size: 1.25rem;
}
}
/* Hamburger fixe en haut à droite, header scrollable */
@media (min-width: 768px) and (max-width: 1023px) {
.site-header__end {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 300;
gap: 0.5rem;
align-items: flex-end;
}
.site-header__end .site-header__blog-link {
display: none !important;
}
}
@media (min-width: 1024px) {
.site-header {
position: relative;
top: auto;
}
.site-header__inner {
align-items: flex-start;
}
.site-branding {
margin-top: 1rem;
}
.site-header__end {
margin-top: 0;
}
/* Place publique : −2 px + −10 % à partir du laptop / grand écran */
.site-header__end .site-header__blog-link {
font-size: calc(clamp(1.125rem, 2.34vw, 1.44rem) - 2px);
}
}
@media (min-width: 1301px) {
.site-header__inner {
max-width: 88rem;
padding-block: 2rem;
padding-inline: 3.5rem;
}
.site-branding {
margin-top: 2rem;
}
.site-header__end {
margin-top: 1.5rem;
}
}
@media (min-width: 1600px) {
.site-header__inner {
max-width: min(100rem, 94vw);
padding-inline: 0.75rem;
gap: 0.75rem;
}
}
/* Abstracts (tokens + forwards) */
/* ==========================================================================
PIED DE PAGE — « signature 4 zones », vocabulaire de la navigation :
assise carbone distincte, arête lumineuse ambre en tête, losanges de
rubrique, liens à barre jaune + glissement (comme le panneau nav).
========================================================================== */
.site-footer {
position: relative;
margin-top: auto;
background: var(--color-carbon-black);
color: var(--color-texte-muted);
font-size: 0.9375rem;
/* Arête lumineuse pleine largeur — la lumière accroche le bord du socle. */
}
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 195, 0, 0.35) 22%, rgba(255, 195, 0, 0.35) 78%, transparent);
}
.site-footer__inner {
max-width: 80rem;
margin-inline: auto;
padding: clamp(3rem, 7vw, 4.75rem) 1.5rem clamp(1.5rem, 3vw, 2rem);
}
/* --- Grille des 4 zones --- */
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: clamp(2.25rem, 5vw, 3rem);
/* Tablette : la marque prend toute la largeur (bandeau), les trois
colonnes de liens s'alignent dessous — jamais de colonne orpheline. */
}
@media (min-width: 640px) and (max-width: 1023px) {
.site-footer__grid {
grid-template-columns: repeat(3, 1fr);
row-gap: 2.75rem;
}
.site-footer__grid .site-footer__brand {
grid-column: 1/-1;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: minmax(250px, 1.35fr) repeat(3, 1fr);
gap: clamp(2rem, 4vw, 4.5rem);
}
}
/* --- Zone marque --- */
.site-footer__brand-link {
display: inline-block;
text-decoration: none;
color: var(--color-blanc);
}
/* Wordmark réutilisé — taille footer FIXE à tous les points de rupture.
⚠️ Les tailles vivent sur les LIGNES (__line--*), pas sur __title : le
header les définit en clamp() viewport + media queries ; la spécificité
.site-footer .x (0,2,0) l'emporte partout. */
.site-footer .site-branding__line--first,
.site-footer .site-branding__line--only,
.site-footer .site-branding__line--second {
font-size: 1.375rem;
}
.site-footer .site-branding__mark-svg {
width: 17px;
margin-bottom: 3px;
}
.site-footer .site-branding__line-row--second {
margin-left: 1.1em;
}
.site-footer__tagline {
margin: 1rem 0 0;
max-width: 26ch;
line-height: 1.6;
color: var(--color-texte);
}
.site-footer__place {
margin: 0.75rem 0 0;
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--color-texte-muted);
opacity: 0.7;
}
/* --- Rubriques — losange ambre (motif du formulaire de devis) --- */
.site-footer__heading {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1rem;
font-family: var(--font-slake);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-blanc);
}
.site-footer__heading::before {
content: "";
width: 6px;
height: 6px;
flex-shrink: 0;
background: var(--color-school-bus-yellow);
transform: rotate(45deg);
box-shadow: 0 0 8px rgba(255, 195, 0, 0.5);
}
/* --- Liens — même geste que le panneau nav : barre jaune + glissement --- */
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.site-footer__list a {
position: relative;
display: inline-block;
padding-left: 14px;
color: var(--color-texte-muted);
text-decoration: none;
transition: color 160ms ease, transform 160ms ease;
}
.site-footer__list a::before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
background: var(--color-school-bus-yellow);
transform: scaleY(0);
transform-origin: center;
transition: transform 160ms ease;
}
.site-footer__list a:focus-visible {
color: var(--color-blanc);
transform: translateX(2px);
}
.site-footer__list a:focus-visible::before {
transform: scaleY(1);
}
@media (hover: hover) {
.site-footer__list a:hover {
color: var(--color-blanc);
transform: translateX(4px);
}
.site-footer__list a:hover::before {
transform: scaleY(1);
}
}
/* Sous-liste — second niveau d'une colonne (familles, coordonnées) :
séparée par un filet subtil, ton plus bas que la liste principale. */
.site-footer__sublist {
list-style: none;
margin: 1rem 0 0;
padding: 0.75rem 0 0;
border-top: 1px solid var(--color-bordure-subtile);
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.875rem;
}
.site-footer__sublist a {
color: var(--color-texte-muted);
text-decoration: none;
opacity: 0.85;
transition: color 160ms ease, opacity 160ms ease;
}
.site-footer__sublist a:hover, .site-footer__sublist a:focus-visible {
color: var(--color-school-bus-yellow);
opacity: 1;
}
/* Coordonnées — jaune accent (retour Jeff 2026-07-19, remplace l'orange du
2026-07-03). Au survol : soulignement, puisque la couleur ne change plus. */
.site-footer__sublist--accent a {
color: var(--color-school-bus-yellow);
font-weight: 500;
opacity: 1;
}
.site-footer__sublist--accent a:hover, .site-footer__sublist--accent a:focus-visible {
color: var(--color-school-bus-yellow);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Bande légale --- */
.site-footer__legal-band {
position: relative;
margin-top: clamp(2.5rem, 6vw, 3.5rem);
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1.5rem;
font-size: 0.875rem;
border-top: 1px solid var(--color-bordure-subtile);
}
.site-footer__copyright {
margin: 0;
color: var(--color-texte-muted);
}
.site-footer__legal {
margin: 0;
}
.site-footer__legal-link {
color: var(--color-texte-muted);
text-decoration: none;
}
.site-footer__legal-link:hover, .site-footer__legal-link:focus-visible {
color: var(--color-school-bus-yellow);
}
.site-footer__legal-sep {
margin-inline: 0.4em;
opacity: 0.5;
}
/* Responsable Loi 25 — pleine largeur, discret. */
.site-footer__rprp {
margin: 0;
flex-basis: 100%;
font-size: 0.8rem;
color: var(--color-texte-muted);
opacity: 0.7;
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.site-footer__list a,
.site-footer__list a::before {
transition: none;
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
transform: none;
}
}
/* Abstracts (tokens + forwards) */
/**
* Colonne principale + pages intérieures
*/
.pn-main {
flex: 1;
min-height: 40vh;
}
.pn-page {
max-width: 48rem;
margin-inline: auto;
padding: clamp(2rem, 5vw, 3rem) 1.5rem;
}
.pn-page__header {
margin-bottom: 2rem;
}
.pn-page__title {
margin: 0;
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
font-weight: 700;
color: var(--color-blanc);
letter-spacing: -0.02em;
}
.pn-page__content {
color: var(--color-texte);
}
.pn-theme--dark {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Abstracts (tokens + forwards) */
/**
* Conteneur horizontal — calques repris de CertiPro (largeurs max + gouttière mobile).
* Préfixe : .pn-container
*/
.pn-container {
margin-inline: auto;
/* Gouttière TOUJOURS portée par le padding (et non par un max-width
soustrait) : elle survit à toute redéfinition de max-width par un
enfant. box-sizing: border-box (reset) → le padding est inclus dans
max-width, donc le max-width est compensé de +3rem pour préserver la
largeur de contenu historique (744px / 1000px). */
padding-inline: 1rem;
}
@media (min-width: 360px) {
.pn-container {
padding-inline: 1.5rem;
}
}
@media (min-width: 768px) {
.pn-container {
max-width: calc(744px + 3rem);
}
}
@media (min-width: 1024px) {
.pn-container {
max-width: calc(1000px + 3rem);
}
}
@media (min-width: 1301px) {
.pn-container {
max-width: calc(1000px + 3rem);
}
}
/* Abstracts (tokens + forwards) */
/**
* Sections structurelles — rythmes repris de CertiPro (.pn-section, modificateurs).
* .pn-band : bandeau pleine largeur (à utiliser quand le gabarit HTML l’inclut).
*/
.pn-section {
/* Volontairement vide : wrapper sémantique (sans padding vertical implicite). */
}
/* =========================
SECTION — CHAPTER RHYTHM
========================= */
.pn-section.pn-section--chapter {
padding-block: 0;
}
.pn-section.pn-section--chapter > .pn-band {
margin-bottom: 45px;
}
.pn-section.pn-section--chapter > .pn-container.pn-section__content {
margin-bottom: 55px;
}
@media (min-width: 768px) {
.pn-section.pn-section--chapter > .pn-band {
margin-bottom: 100px;
}
.pn-section.pn-section--chapter > .pn-container.pn-section__content {
margin-bottom: 120px;
}
}
@media (min-width: 1024px) {
.pn-section.pn-section--chapter > .pn-band {
margin-bottom: 120px;
}
.pn-section.pn-section--chapter > .pn-container.pn-section__content {
margin-bottom: 140px;
}
}
/* =========================
SECTION — TILES
========================= */
.pn-section--tiles {
margin-bottom: 48px;
}
@media (min-width: 768px) {
.pn-section--tiles {
margin-bottom: 64px;
}
}
@media (min-width: 1024px) {
.pn-section--tiles {
margin-bottom: 80px;
}
}
/* Pages */
/* Abstracts (tokens + forwards) */
/* Dégagement du header sticky — uniquement pour l'ancre du chevron héros */
#pn-content-start {
scroll-margin-top: calc(var(--header-h, 100px) + 0.75rem);
}
@media (min-width: 1024px) {
#pn-content-start {
scroll-margin-top: 0;
}
}
/*
* Sections snap : scroll-margin-top = 0 toujours.
* Le header sticky est dans le flux normal → les offsetTop sont déjà corrects.
* Un scroll-margin-top non nul décale le point d'accroche du snap et crée
* l'effet de scroll bloqué / mal positionné signalé plusieurs fois.
*/
#pn-section-approche,
#pn-section-approche-2,
#pn-section-investment,
#pn-section-niveaux,
#pn-section-niveau-propulsion,
#pn-section-composantes,
#pn-section-avant {
scroll-margin-top: 0;
}
@keyframes pn-scroll-pulse {
0%, 100% {
opacity: 0.3;
transform: rotate(45deg) translate(0, 0);
}
50% {
opacity: 0.7;
transform: rotate(45deg) translate(3px, 3px);
}
}
@keyframes pn-scroll-pulse-up {
0%, 100% {
opacity: 0.3;
transform: rotate(225deg) translate(0, 0);
}
50% {
opacity: 0.7;
transform: rotate(225deg) translate(-3px, -3px);
}
}
.pn-section__scroll-up {
position: relative;
z-index: 1;
display: block;
width: 1rem;
height: 1rem;
border-right: 1.5px solid rgba(255, 255, 255, 0.35);
border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
transform: rotate(225deg);
margin: clamp(1.25rem, 3vw, 2rem) auto 0;
animation: pn-scroll-pulse-up 2.5s ease-in-out infinite;
}
.pn-section__scroll-up:hover {
border-color: var(--color-school-bus-yellow);
opacity: 1;
}
@media (max-width: 767px) {
.pn-section__scroll-up {
display: none;
}
}
.pn-hero {
position: relative;
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
background: var(--color-onyx);
}
.pn-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 90% 55% at 5% 0%, rgba(255, 195, 0, 0.09) 0%, rgba(255, 195, 0, 0.025) 40%, transparent 65%), radial-gradient(ellipse 130% 130% at 50% 55%, rgba(255, 195, 0, 0.015) 0%, transparent 100%), radial-gradient(circle, rgba(255, 255, 255, 0.048) 1px, rgba(255, 255, 255, 0.006) 2px, transparent 3px);
background-size: auto, auto, 14px 14px;
}
.pn-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
.pn-hero__inner {
position: relative;
z-index: 1;
flex: 1;
margin-inline: auto;
padding-top: clamp(2rem, 12vh, 6rem);
padding-bottom: clamp(2rem, 6vh, 4rem);
padding-inline: 1rem;
}
@media (min-width: 360px) {
.pn-hero__inner {
max-width: calc(100% - 3rem);
padding-inline: 0;
}
}
@media (min-width: 1024px) {
.pn-hero__inner {
max-width: 44rem;
}
}
@media (min-width: 1301px) {
.pn-hero__inner {
padding-top: clamp(3.5rem, 22vh, 14rem);
padding-bottom: clamp(2rem, 7vh, 5rem);
}
}
@media (min-width: 1600px) {
.pn-hero__inner {
padding-top: clamp(5.7rem, 18vh, 18rem);
padding-bottom: clamp(2.4rem, 8.4vh, 6rem);
}
}
.pn-hero__scroll {
position: relative;
z-index: 1;
display: block;
width: 1rem;
height: 1rem;
border-right: 1.5px solid rgba(255, 255, 255, 0.35);
border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
transform: rotate(45deg);
margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
animation: pn-scroll-pulse 2.5s ease-in-out infinite;
}
.pn-hero__scroll:hover {
border-color: var(--color-school-bus-yellow);
opacity: 1;
}
.pn-hero__kicker {
margin: 0 0 1rem;
font-family: var(--font-slake);
font-size: clamp(0.9375rem, 2.75vw, 1.125rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-hero__title {
margin: 0 0 1rem;
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
color: var(--color-blanc);
letter-spacing: -0.02em;
}
.pn-hero__lead {
margin: 0 0 2rem;
font-size: 1.125rem;
line-height: 1.55;
color: var(--color-texte-muted);
max-width: 40ch;
}
.pn-hero__lead-phrase {
display: block;
}
.pn-hero__lead-accent {
display: block;
font-size: 1.2em;
font-weight: 600;
color: var(--color-amber);
}
.pn-hero__cta {
margin: 0;
}
/* Très grands écrans (1600px+) : texte, air du bloc et chevron +20 % — bouton .pn-btn inchangé */
@media (min-width: 1600px) {
.pn-hero__kicker {
font-size: clamp(1.125rem, 3.3vw, 1.35rem);
margin-bottom: 1.2rem;
}
.pn-hero__title {
font-size: clamp(2.1rem, 5.4vw, 3.3rem);
margin-bottom: 1.2rem;
}
.pn-hero__lead {
font-size: 1.35rem;
margin-bottom: 2.4rem;
}
.pn-hero__scroll {
width: 1.2rem;
height: 1.2rem;
border-right-width: 1.8px;
border-bottom-width: 1.8px;
margin: 0 auto clamp(1.8rem, 4.8vw, 3rem);
}
}
.pn-home__editorial {
max-width: 48rem;
margin-inline: auto;
padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}
/* Laptop / petit desktop 1024–1300px : hero plus compact */
@media (min-width: 1024px) and (max-width: 1300px) {
.pn-hero__inner {
padding-bottom: clamp(1rem, 3vh, 2rem);
}
.pn-hero__kicker {
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.pn-hero__title {
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
margin-bottom: 0.75rem;
}
.pn-hero__lead {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.pn-hero {
min-height: 0;
}
}
/* Abstracts (tokens + forwards) */
.pn-home-section {
padding-block: var(--section-padding);
}
.pn-home-section--sm {
padding-block: var(--section-padding-sm);
}
.pn-home-section--band {
background-color: var(--color-carbon-black);
}
.pn-section-header {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.pn-section-header__title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0;
text-transform: none;
}
.pn-section-header__lead {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
max-width: 55ch;
}
.pn-callout {
font-size: clamp(1.125rem, 2.75vw, 1.5rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-school-bus-yellow);
margin: clamp(1.5rem, 4vw, 2.5rem) 0;
border: none;
padding: 0;
font-style: normal;
max-width: 52ch;
}
.pn-section-probleme {
scroll-snap-align: start;
position: relative;
overflow: hidden;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-section-probleme::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 55% 45% at 88% 38%, rgba(192, 92, 44, 0.09) 0%, transparent 68%), radial-gradient(ellipse 40% 35% at 12% 72%, rgba(255, 195, 0, 0.06) 0%, transparent 70%);
}
.pn-section-probleme.pn-home-section {
/* Moins de padding vertical que les autres sections pour tenir dans 100svh */
padding-block: clamp(1rem, 3.5svh, 2.25rem);
}
.pn-section-probleme .pn-container {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.pn-section-probleme .pn-probleme {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
gap: clamp(1.5rem, 4svh, 2.75rem);
min-height: 0;
}
.pn-accent--copper {
color: var(--color-copper);
}
.pn-accent--amber {
color: var(--color-amber);
}
.pn-newline {
display: block;
}
@media (min-width: 768px) {
.pn-newline--md {
display: block;
}
}
.pn-probleme__stage {
display: grid;
gap: clamp(1.25rem, 3.5vw, 2rem);
align-items: start;
min-height: 0;
}
@media (min-width: 1024px) {
.pn-probleme__stage {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
}
.pn-probleme__copy {
display: flex;
flex-direction: column;
gap: clamp(0.875rem, 2svh, 1.5rem);
/* Descend les accroches sous le label / au niveau de la 1re ligne du tableau */
margin-top: clamp(0.5rem, 2svh, 1.5rem);
}
@media (min-width: 1024px) {
.pn-probleme__copy {
margin-top: clamp(1rem, 3svh, 2rem);
}
}
.pn-probleme__aside {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.35rem);
min-width: 0;
}
.pn-probleme__leads {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(0.4rem, 1svh, 0.625rem);
}
.pn-probleme__leads li {
margin: 0;
padding-left: 0;
font-size: clamp(1.25rem, 3.25vw, 1.875rem);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--color-blanc);
}
.pn-probleme__label {
margin: 0;
}
@media (min-width: 1024px) {
.pn-section-probleme .pn-probleme__label,
.pn-section-approche .pn-approche-bloc__label,
.pn-section-investment .pn-label,
.pn-section-niveaux .pn-section-header .pn-label,
.pn-section-composantes .pn-section-header .pn-label,
.pn-section-avant .pn-cta-principal__label {
font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
letter-spacing: 0.14em;
}
}
@media (min-width: 1301px) {
.pn-section-probleme .pn-probleme__label,
.pn-section-approche .pn-approche-bloc__label,
.pn-section-investment .pn-label,
.pn-section-niveaux .pn-section-header .pn-label,
.pn-section-composantes .pn-section-header .pn-label,
.pn-section-avant .pn-cta-principal__label {
font-size: clamp(1rem, 1.2vw, 1.1875rem);
letter-spacing: 0.13em;
}
}
.pn-probleme-absence {
list-style: none;
margin: 0;
padding: clamp(0.875rem, 2vw, 1.25rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.625rem, 1.75vw, 1rem) clamp(0.75rem, 2vw, 1.25rem);
background: rgba(26, 26, 26, 0.55);
border: 1px solid var(--color-bordure-forte);
border-radius: 6px;
box-sizing: border-box;
width: 100%;
/* Mobile/tablette : carte contenue plutôt qu'étalée sur toute la largeur */
max-width: 30rem;
}
.pn-probleme-absence__context {
grid-column: 1/-1;
margin: 0 0 0.25rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
color: var(--color-texte-muted);
}
.pn-probleme-absence__item {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.pn-probleme-absence__value {
display: block;
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-texte-muted);
}
.pn-probleme-absence__value--zero {
color: var(--color-amber);
}
.pn-probleme-absence__name {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.32;
color: var(--color-texte-muted);
}
.pn-probleme__pivot {
font-size: clamp(1.375rem, 4vw, 1.75rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
margin: 0;
padding-top: 0;
max-width: none;
}
.pn-probleme__pivot-setup {
color: rgba(232, 232, 228, 0.75);
}
/* Tablette+ : setup muted / punchline grande — hiérarchie A/B */
@media (min-width: 768px) {
.pn-probleme__pivot {
font-size: clamp(1.375rem, 2vw, 1.625rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.01em;
}
.pn-probleme__pivot .pn-accent--amber {
font-size: clamp(1.625rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
margin-top: clamp(0.5rem, 1.5svh, 0.875rem);
}
}
/* Grand écran : contenu compact pour rester lisible dans 100svh */
@media (min-width: 1024px) {
.pn-section-probleme.pn-home-section {
padding-block: clamp(0.875rem, 2.75svh, 1.75rem);
}
.pn-section-probleme .pn-probleme {
gap: clamp(1.25rem, 3svh, 2rem);
}
.pn-section-probleme .pn-probleme__leads li {
font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
line-height: 1.24;
}
.pn-section-probleme .pn-probleme__aside {
align-self: start;
align-items: flex-end;
gap: clamp(0.875rem, 2svh, 1.125rem);
}
.pn-section-probleme .pn-probleme-absence__context {
font-size: 0.8125rem;
letter-spacing: 0.13em;
margin-bottom: 0.25rem;
}
.pn-section-probleme .pn-probleme-absence__value {
font-size: clamp(1.125rem, 1.85vw, 1.4375rem);
}
.pn-section-probleme .pn-probleme-absence__name {
font-size: 0.875rem;
line-height: 1.34;
}
.pn-section-probleme .pn-probleme-absence {
padding: clamp(1rem, 1.75vw, 1.25rem);
gap: clamp(0.625rem, 1.25vw, 0.875rem) clamp(0.875rem, 1.5vw, 1.125rem);
border-radius: 6px;
max-width: 22rem;
}
.pn-section-probleme .pn-probleme__pivot {
font-size: clamp(1.4375rem, 2.1vw, 1.75rem);
line-height: 1.4;
}
.pn-section-probleme .pn-probleme__pivot .pn-accent--amber {
font-size: clamp(1.875rem, 4.5vw, 3rem);
margin-top: clamp(0.625rem, 1.75svh, 1rem);
}
}
@media (min-width: 1301px) {
.pn-section-probleme.pn-home-section {
padding-block: clamp(1rem, 3.25svh, 2.125rem);
}
.pn-section-probleme .pn-probleme__stage {
gap: clamp(2rem, 4.5vw, 3.5rem);
}
.pn-section-probleme .pn-probleme__leads li {
font-size: clamp(1.1875rem, 2.35vw, 1.5625rem);
line-height: 1.26;
}
.pn-section-probleme .pn-probleme-absence {
max-width: 24rem;
}
.pn-section-probleme .pn-probleme-absence__context {
font-size: 0.875rem;
}
.pn-section-probleme .pn-probleme-absence__value {
font-size: clamp(1.1875rem, 2vw, 1.5rem);
}
.pn-section-probleme .pn-probleme-absence__name {
font-size: 0.9375rem;
}
.pn-section-probleme .pn-probleme__pivot {
font-size: clamp(1.5rem, 2.25vw, 1.875rem);
line-height: 1.4;
}
.pn-section-probleme .pn-probleme__pivot .pn-accent--amber {
font-size: clamp(2rem, 4.75vw, 3.125rem);
line-height: 1.1;
}
}
@media (min-width: 1024px) {
html:has(.pn-main--home) {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
}
@media (min-width: 768px) {
html:has(.pn-main--approche) {
scroll-snap-type: y mandatory;
}
}
/* Mobile + tablette : sans snap document (évite le scroll « coincé ») */
@media (max-width: 1023px) {
html:has(.pn-main--home) {
scroll-snap-type: none;
}
}
/* Desktop — sections pleine hauteur : ancrage net au scroll */
@media (min-width: 1024px) {
.pn-main--home .pn-section-probleme,
.pn-main--home .pn-section-approche.pn-home-section,
.pn-main--home .pn-section-approche-2.pn-home-section,
.pn-main--home .pn-section-investment.pn-home-section,
.pn-main--home .pn-section-niveaux,
.pn-main--home .pn-section-niveau-propulsion,
.pn-main--home .pn-section-composantes.pn-home-section,
.pn-main--home .pn-section-analyse.pn-home-section {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* Même principe que .pn-section-probleme : pleine hauteur + contenu centré (vertical + horizontal) */
.pn-section-approche.pn-home-section,
.pn-section-approche-2.pn-home-section {
scroll-snap-align: start;
padding-block: 0;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-section-approche.pn-home-section .pn-container,
.pn-section-approche-2.pn-home-section .pn-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
@media (max-width: 1023px) {
.pn-section-approche.pn-home-section,
.pn-section-approche-2.pn-home-section {
padding-block: var(--section-padding-sm);
}
.pn-section-approche.pn-home-section .pn-container,
.pn-section-approche-2.pn-home-section .pn-container {
flex: none;
display: block;
}
}
@media (max-width: 1023px) {
.pn-section-approche-2.pn-home-section {
border-top: 1px solid var(--color-bordure-subtile);
}
}
.pn-section-approche.pn-home-section {
position: relative;
overflow: hidden;
}
.pn-section-approche.pn-home-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 55% 45% at 14% 40%, rgba(255, 195, 0, 0.08) 0%, transparent 68%), radial-gradient(ellipse 40% 35% at 86% 70%, rgba(192, 92, 44, 0.05) 0%, transparent 70%);
}
.pn-section-approche.pn-home-section .pn-container {
position: relative;
z-index: 1;
}
.pn-approche {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
@media (max-width: 1023px) {
.pn-approche {
flex: none;
justify-content: flex-start;
}
}
.pn-approche__stage {
display: grid;
gap: clamp(1.25rem, 3.5vw, 2rem);
align-items: start;
min-height: 0;
}
@media (min-width: 1024px) {
.pn-approche__stage {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
}
.pn-approche__copy {
display: flex;
flex-direction: column;
max-width: none;
margin-inline: 0;
padding-block: 0;
}
@media (min-width: 1024px) {
.pn-approche__copy {
padding-block: clamp(1rem, 4svh, 2.5rem);
}
}
.pn-approche__copy .pn-approche-bloc__label {
margin-bottom: 0;
}
.pn-approche__copy .pn-approche-bloc__label::after {
content: "";
display: block;
width: min(8rem, 32%);
height: 1px;
margin-top: clamp(0.75rem, 2svh, 1.25rem);
background: linear-gradient(90deg, rgba(255, 195, 0, 0.45), transparent);
}
.pn-approche__copy .pn-approche-bloc__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
line-height: 1.14;
letter-spacing: -0.025em;
margin-top: clamp(0.75rem, 2svh, 1rem);
margin-bottom: clamp(1rem, 2.5svh, 1.75rem);
}
.pn-approche__copy p:not(.pn-approche-bloc__eyebrow) {
font-size: clamp(1.0625rem, 2.25vw, 1.1875rem);
line-height: 1.68;
max-width: none;
}
.pn-approche__copy .pn-accent--amber {
font-size: 1.2em;
font-weight: 600;
}
.pn-approche-installe {
display: flex;
flex-direction: column;
width: 100%;
}
.pn-approche-installe__lead {
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
font-family: var(--font-slake);
font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
line-height: 1;
}
.pn-approche-installe__lead::after {
content: "";
display: block;
width: 100%;
height: 1px;
margin-top: clamp(0.875rem, 2vw, 1.25rem);
background: linear-gradient(90deg, rgba(255, 195, 0, 0.4), var(--color-bordure-subtile) 55%, transparent);
}
.pn-approche-installe__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.pn-approche-installe__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: clamp(0.875rem, 2vw, 1.5rem);
padding-block: clamp(0.9375rem, 2.25vw, 1.375rem);
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-approche-installe__item:first-child {
border-top: none;
padding-top: 0;
}
.pn-approche-installe__item:last-child {
padding-bottom: 0;
}
.pn-approche-installe__chevron {
display: block;
width: 0.3125rem;
height: 0.3125rem;
border-right: 1.5px solid var(--color-school-bus-yellow);
border-top: 1.5px solid var(--color-school-bus-yellow);
transform: rotate(45deg);
flex-shrink: 0;
margin-top: 0.5em;
}
.pn-approche-installe__text {
display: flex;
flex-direction: column;
gap: 0.3125rem;
min-width: 0;
}
.pn-approche-installe__name {
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-blanc);
}
.pn-approche-installe__desc {
font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-section-approche-2.pn-home-section .pn-approche-blocs {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(1.5rem, 4vw, 2.5rem);
min-height: 0;
width: 100%;
}
@media (max-width: 1023px) {
.pn-section-approche-2.pn-home-section .pn-approche-blocs {
flex: none;
justify-content: flex-start;
gap: clamp(1.25rem, 3.5vw, 2rem);
}
}
.pn-approche-blocs {
display: flex;
flex-direction: column;
gap: 0;
}
.pn-approche-blocs .pn-approche-bloc--citation {
margin-top: 0;
padding-top: clamp(1rem, 3vw, 1.5rem);
border-top: 1px solid var(--color-bordure-subtile);
}
@media (min-width: 1024px) {
.pn-approche-blocs .pn-approche-bloc--citation {
margin-top: 0;
padding-top: 0;
border-top: none;
}
}
@media (max-width: 1023px) {
.pn-section-approche-2 .pn-approche-bloc--2 {
padding-block: 0;
}
.pn-approche-bloc--citation {
max-width: none;
margin-inline: 0;
}
}
.pn-partenariat-duo {
display: flex;
align-items: center;
gap: clamp(1.25rem, 3vw, 2rem);
flex-wrap: wrap;
}
.pn-partenariat-duo .pn-callout {
flex: 1 1 auto;
margin: 0;
}
.pn-collab-visual {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 575px) {
.pn-collab-visual {
flex-basis: 100%;
justify-content: flex-start;
}
}
.pn-collab-visual__svg {
width: clamp(80px, 12vw, 118px);
height: auto;
display: block;
overflow: visible;
}
.pn-collab-visual__svg .pn-collab-visual__path--vous {
stroke-dasharray: 145;
stroke-dashoffset: 145;
}
.pn-collab-visual__svg .pn-collab-visual__path--pn {
stroke-dasharray: 145;
stroke-dashoffset: 145;
}
.pn-collab-visual__svg .pn-collab-visual__dot {
opacity: 0;
transform-origin: 100px 112px;
transform: scale(0);
}
.pn-collab-visual__svg .pn-collab-visual__glow {
opacity: 0;
}
.pn-collab-visual__svg.is-visible .pn-collab-visual__path--vous {
animation: pn-collab-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
}
.pn-collab-visual__svg.is-visible .pn-collab-visual__path--pn {
animation: pn-collab-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}
.pn-collab-visual__svg.is-visible .pn-collab-visual__dot {
animation: pn-collab-dot 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}
.pn-collab-visual__svg.is-visible .pn-collab-visual__glow {
animation: pn-collab-glow 0.6s ease-out 1s forwards;
}
@keyframes pn-collab-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes pn-collab-dot {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pn-collab-glow {
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-collab-visual__svg .pn-collab-visual__path--vous,
.pn-collab-visual__svg .pn-collab-visual__path--pn {
stroke-dashoffset: 0;
}
.pn-collab-visual__svg .pn-collab-visual__dot {
opacity: 1;
transform: scale(1);
}
.pn-collab-visual__svg .pn-collab-visual__glow {
opacity: 1;
}
.pn-collab-visual__svg.is-visible .pn-collab-visual__path--vous,
.pn-collab-visual__svg.is-visible .pn-collab-visual__path--pn,
.pn-collab-visual__svg.is-visible .pn-collab-visual__dot,
.pn-collab-visual__svg.is-visible .pn-collab-visual__glow {
animation: none;
}
}
.pn-approche-bloc {
max-width: 64ch;
margin-inline: auto;
width: 100%;
/* Bloc 2 « Partenaires » : centré par le flex parent de la section (pas de min-height propre) */
}
.pn-approche-bloc--2 {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding-block: clamp(1rem, 4svh, 2.5rem);
}
.pn-approche-bloc--1 {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.pn-approche-bloc__label {
display: block;
margin-bottom: 1rem;
}
.pn-approche-bloc__eyebrow {
font-family: var(--font-slake);
font-size: clamp(0.8125rem, 1.45vw, 0.9375rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
margin: 0 0 0.75rem;
line-height: 1.35;
max-width: 42ch;
}
.pn-approche-bloc__title {
font-size: clamp(1.375rem, 3.25vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
text-transform: none;
font-variant-caps: normal;
}
.pn-approche-bloc__title--sub {
font-size: clamp(1.25rem, 2.75vw, 1.75rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--color-blanc);
margin: 0 0 2rem;
text-transform: none;
font-variant-caps: normal;
}
.pn-approche-bloc p:not(.pn-approche-bloc__eyebrow) {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 1.5rem;
max-width: 62ch;
}
.pn-approche-bloc p:not(.pn-approche-bloc__eyebrow):last-child {
margin-bottom: 0;
}
.pn-approche-bloc {
/* Première phrase après le titre de section */
}
.pn-approche-bloc h2 + p:not(.pn-approche-bloc__eyebrow) {
color: var(--color-blanc);
}
.pn-approche-bloc--citation {
border-left: 2px solid var(--color-amber);
padding-left: 2rem;
max-width: 50ch;
}
.pn-approche-bloc--citation p {
font-size: 0.9375rem;
font-style: italic;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
}
.pn-approche-bloc--challenge p {
font-style: normal;
font-size: 1rem;
color: var(--color-texte);
margin: 0;
}
.pn-approche-bloc--challenge .pn-challenge-punch {
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
color: var(--color-blanc);
letter-spacing: -0.02em;
line-height: 1.1;
margin-top: 0.75rem;
}
@media (min-width: 1024px) {
.pn-section-approche .pn-approche__copy {
padding-block: clamp(1rem, 4svh, 2rem);
}
.pn-section-approche .pn-approche__copy .pn-approche-bloc__title {
font-size: clamp(1.5rem, 3.25vw, 2.35rem);
margin-top: 1.5rem;
margin-bottom: clamp(0.875rem, 2svh, 1.5rem);
}
.pn-section-approche .pn-approche__copy p:not(.pn-approche-bloc__eyebrow) {
font-size: 1.0625rem;
line-height: 1.65;
}
.pn-section-approche-2 .pn-approche-blocs {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr);
gap: clamp(1.75rem, 3.5vw, 3rem);
align-items: center;
}
.pn-approche-blocs .pn-approche-bloc--citation {
margin-top: 0;
align-self: center;
max-width: none;
}
.pn-approche-bloc--2 {
padding-block: clamp(1.25rem, 5svh, 3.25rem);
}
.pn-approche-bloc--2 .pn-approche-bloc__eyebrow,
.pn-approche-bloc--2 p.pn-approche-bloc__eyebrow {
font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
margin-bottom: 1rem;
letter-spacing: 0.11em;
}
.pn-approche-bloc--2 .pn-approche-bloc__title {
font-size: clamp(1.65rem, 3.5vw, 2.5rem);
margin-bottom: clamp(1.25rem, 2.75vw, 2.25rem);
}
.pn-approche-bloc--2 p:not(.pn-callout):not(.pn-approche-bloc__eyebrow) {
font-size: 1.125rem;
line-height: 1.68;
}
.pn-approche-bloc--2 .pn-accent--amber {
font-size: 1.2em;
font-weight: 600;
}
}
.pn-investment {
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 1024px) {
.pn-investment {
grid-template-columns: 1fr 2fr;
align-items: center;
gap: clamp(2.5rem, 4vw, 4rem);
}
}
.pn-investment__col-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-investment__bridge {
font-size: clamp(1rem, 1.75vw, 1.25rem);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--color-amber);
margin: 0;
}
.pn-investment__statement {
font-size: clamp(2rem, 5.5vw, 3.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--color-blanc);
margin: 0;
}
.pn-investment__diagram {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 420px;
margin-inline: auto;
}
@media (min-width: 768px) {
.pn-investment__diagram {
max-width: 560px;
}
}
@media (min-width: 1024px) {
.pn-investment__diagram {
max-width: none;
margin-inline: 0;
}
}
/* Mobile : gouttière resserrée à 15px pour laisser le cercle et ses textes
occuper le maximum d'espace disponible sans déborder. */
@media (max-width: 767px) {
.pn-section-investment .pn-container {
padding-inline: 15px;
}
.pn-investment__diagram {
max-width: none;
}
.pn-investment__statement {
font-size: clamp(2.25rem, 9vw, 3rem);
}
.pn-investment__bridge {
font-size: clamp(1.0625rem, 4vw, 1.25rem);
}
}
.pn-cycle-svg {
width: 100%;
height: auto;
display: block;
font-family: var(--font-slake);
}
.pn-investment__poles {
display: none;
}
@media (max-width: 767px) {
.pn-cycle-svg .pn-cyc-lg {
font-size: 37px;
}
.pn-cycle-svg .pn-cyc-md {
font-size: 35px;
}
.pn-cycle-svg .pn-cyc-ctr {
font-size: 30px;
}
.pn-cycle-svg .pn-cyc-sm {
font-size: 28px;
}
.pn-cycle-svg .pn-cyc-pole--1 {
transform: translate(6px, -88px);
}
.pn-cycle-svg .pn-cyc-pole--3 {
transform: translate(-16px, -88px);
}
.pn-cycle-svg .pn-cyc-pole--2 {
transform: translate(0, 18px);
}
.pn-cycle-svg .pn-cyc-sub {
transform: translate(0, 14px);
}
}
@media (min-width: 768px) {
.pn-cycle-svg .pn-cyc-pole--1,
.pn-cycle-svg .pn-cyc-pole--3 {
transform: translate(0, -22px);
}
}
.pn-investment__pole {
position: relative;
padding-left: 1.25rem;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-texte);
}
.pn-investment__pole::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--color-school-bus-yellow);
}
.pn-section-investment {
scroll-snap-align: start;
}
.pn-section-investment.pn-home-section {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-section-investment .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
@media (min-width: 1024px) {
.pn-investment__statement {
font-size: clamp(1.75rem, 4.25vw, 3rem);
line-height: 1.25;
}
}
@keyframes pn-niveaux-chevron-bounce {
0%, 100% {
opacity: 0.35;
transform: translateY(0);
}
50% {
opacity: 0.85;
transform: translateY(6px);
}
}
@keyframes pn-niveaux-bridge-pulse {
0%, 100% {
opacity: 0.4;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(4px);
}
}
@keyframes pn-propulsion-shimmer {
0% {
background-position: 180% center;
}
100% {
background-position: -80% center;
}
}
@keyframes pn-teaser-chevron-bounce {
0%, 100% {
opacity: 0.3;
transform: translateY(0) rotate(45deg);
}
50% {
opacity: 0.72;
transform: translateY(5px) rotate(45deg);
}
}
.pn-section-header--niveaux-desktop {
display: none;
}
.pn-section-header--niveaux-mobile {
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.pn-section-niveaux {
scroll-snap-align: start;
padding-block: 0;
}
.pn-section-niveau-propulsion {
scroll-snap-align: start;
}
.pn-niveaux-layout {
display: flex;
flex-direction: column;
gap: 0;
}
.pn-niveaux-bridge,
.pn-niveaux-teaser {
display: none;
}
.pn-niveau-pane {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.pn-niveau-pane__head {
flex-shrink: 0;
}
.pn-niveau-pane__label {
display: block;
margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.pn-niveau-pane__title {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 600;
line-height: 1.3;
color: var(--color-blanc);
margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
text-transform: none;
font-variant-caps: normal;
letter-spacing: -0.01em;
}
.pn-niveau-pane__content p {
font-size: 1rem;
line-height: 1.75;
color: var(--color-texte);
margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
max-width: 52ch;
}
.pn-niveau-pane__content p:last-child {
margin-bottom: 0;
}
.pn-niveau-pane__content p:first-of-type {
color: var(--color-blanc);
}
.pn-niveau-pane__content .pn-accent--amber {
font-size: 1.15em;
font-weight: 600;
}
.pn-niveau-pane__content .pn-niveau-pane__list {
list-style: none;
padding: 0;
margin: clamp(0.75rem, 2vw, 1rem) 0 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-niveau-pane__content .pn-niveau-pane__list li {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-texte);
padding-left: 1.125rem;
position: relative;
}
.pn-niveau-pane__content .pn-niveau-pane__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.3125rem;
height: 0.3125rem;
border-right: 1.5px solid var(--color-school-bus-yellow);
border-top: 1.5px solid var(--color-school-bus-yellow);
transform: rotate(45deg);
}
.pn-niveau-pane--fondation, .pn-niveau-pane--performance {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
padding-block: clamp(2.5rem, 8svh, 4.5rem);
}
.pn-niveau-pane--fondation {
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-niveau-pane--performance {
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-niveau-pane--propulsion .pn-niveau-pane__content strong {
color: var(--color-school-bus-yellow);
font-weight: inherit;
}
.pn-niveau-pane--propulsion .pn-niveau-pane__title {
font-size: clamp(2.25rem, 9vw, 5.5rem);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
margin-bottom: clamp(0.25rem, 0.6vw, 0.5rem);
line-height: 1;
text-shadow: 0 0 60px rgba(255, 195, 0, 0.35);
}
.pn-niveau-pane--propulsion .pn-niveau-pane__content {
max-width: 42rem;
}
.pn-niveau-pane--propulsion .pn-niveau-pane__content p {
max-width: none;
font-size: clamp(1.0625rem, 2.25vw, 1.25rem);
line-height: 1.75;
}
.pn-section-niveau-propulsion {
position: relative;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-block: 0;
overflow: hidden;
background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255, 195, 0, 0.04) 0%, transparent 65%), var(--color-carbon-black);
}
.pn-section-niveau-propulsion::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(255, 195, 0, 0.03) 50%, transparent 100%);
pointer-events: none;
}
.pn-section-niveau-propulsion::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(70%, 28rem);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 195, 0, 0.18), transparent);
pointer-events: none;
}
.pn-section-niveau-propulsion .pn-container {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
padding-block: clamp(3rem, 10svh, 6rem);
}
.pn-section-niveau-propulsion .pn-niveau-pane--propulsion {
flex: 0 1 auto;
justify-content: center;
align-items: center;
text-align: center;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-block: 0;
min-height: 0;
}
@media (min-width: 768px) {
.pn-section-header--niveaux-desktop {
display: flex;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pn-section-header--niveaux-mobile {
display: none;
}
.pn-section-niveaux {
min-height: 0;
display: flex;
flex-direction: column;
padding-block: clamp(3rem, 8svh, 5.5rem);
}
.pn-section-niveaux .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
padding-block: 0;
}
.pn-niveaux-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: stretch;
flex: 1;
min-height: 0;
}
.pn-niveaux-bridge {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 0.75rem;
align-self: center;
min-height: 100%;
}
.pn-niveaux-bridge__arrow {
display: block;
width: 1.25rem;
height: 1.25rem;
border-right: 2px solid rgba(255, 195, 0, 0.55);
border-bottom: 2px solid rgba(255, 195, 0, 0.55);
transform: rotate(-45deg);
animation: pn-niveaux-bridge-pulse 2.2s ease-in-out infinite;
}
.pn-niveaux-teaser {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-top: clamp(2.5rem, 5svh, 4rem);
flex-shrink: 0;
}
.pn-niveaux-teaser__eyebrow {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 195, 0, 0.55);
}
.pn-niveaux-teaser__word {
margin: 0;
font-size: clamp(0.9375rem, 1.8vw, 1.25rem);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
background: linear-gradient(90deg, rgba(255, 195, 0, 0.35) 0%, rgba(255, 195, 0, 0.9) 35%, #fff 50%, rgba(255, 195, 0, 0.9) 65%, rgba(255, 195, 0, 0.35) 100%);
background-size: 220% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: pn-propulsion-shimmer 4s linear infinite;
}
.pn-niveaux-teaser__chevron {
display: block;
width: 0.75rem;
height: 0.75rem;
border-right: 1.5px solid rgba(255, 195, 0, 0.5);
border-bottom: 1.5px solid rgba(255, 195, 0, 0.5);
transform: rotate(45deg);
animation: pn-teaser-chevron-bounce 2s ease-in-out infinite;
}
.pn-niveau-pane {
justify-content: flex-start;
height: 100%;
}
.pn-niveau-pane--fondation, .pn-niveau-pane--performance {
min-height: 0;
scroll-snap-align: unset;
scroll-snap-stop: normal;
padding: clamp(2rem, 3.5vw, 3rem);
border: 1px solid var(--color-bordure-subtile);
border-radius: 8px;
background: var(--color-carbon-black);
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-niveau-pane--fondation {
border-color: var(--color-bordure-forte);
}
.pn-niveau-pane--performance {
border-color: rgba(255, 195, 0, 0.2);
}
.pn-niveau-pane__content p {
font-size: 0.9375rem;
line-height: 1.75;
}
}
@media (min-width: 1024px) {
.pn-niveau-pane--fondation, .pn-niveau-pane--performance {
padding: clamp(2.25rem, 3.75vw, 3.5rem);
}
.pn-niveau-pane__content p {
font-size: 1rem;
line-height: 1.78;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-niveaux-teaser__word {
animation: none;
}
.pn-niveaux-teaser__chevron {
animation: none;
opacity: 0.5;
}
}
.pn-section-composantes {
scroll-snap-align: start;
}
.pn-section-composantes.pn-home-section {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-section-composantes .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.pn-section-composantes .pn-section-header {
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.pn-section-composantes .pn-section-header__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
}
.pn-section-composantes .pn-hero__scroll {
flex-shrink: 0;
}
.pn-composantes-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.pn-composantes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.pn-composantes-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-composante-card {
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 6px;
padding: clamp(1rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pn-composante-card__num {
font-size: clamp(0.875rem, 2vw, 1.125rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--color-school-bus-yellow);
line-height: 1;
}
.pn-composante-card__title {
font-size: clamp(1rem, 2vw, 1.1875rem);
font-weight: 600;
line-height: 1.3;
color: var(--color-amber);
margin: 0;
text-transform: none;
font-variant-caps: normal;
letter-spacing: -0.01em;
}
.pn-composante-card__body {
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-texte);
margin: 0;
flex: 1;
}
.pn-composante-card--more {
background: transparent;
border-style: dashed;
border-color: var(--color-bordure-forte);
text-decoration: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
min-height: 140px;
color: var(--color-texte-muted);
transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
@media (min-width: 768px) {
.pn-composante-card--more {
min-height: auto;
}
}
.pn-composante-card--more:hover {
border-color: var(--color-school-bus-yellow);
color: var(--color-blanc);
box-shadow: none;
transform: none;
}
.pn-composante-card--more .pn-composante-card__more-label {
font-size: 0.9375rem;
font-weight: 500;
}
@media (max-width: 767px) {
.pn-composante-card--more .pn-composante-card__more-label {
font-size: 1.0625rem;
}
}
.pn-composante-card--more .pn-composante-card__more-arrow {
font-size: 1.25rem;
flex-shrink: 0;
transition: transform 200ms ease;
}
.pn-composante-card--more:hover .pn-composante-card__more-arrow {
transform: translateX(5px);
}
.pn-section-analyse {
scroll-snap-align: start;
position: relative;
overflow: hidden;
background-color: var(--color-onyx);
}
.pn-section-analyse::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 75% 60% at 50% 45%, rgba(255, 195, 0, 0.07) 0%, transparent 65%);
}
.pn-section-analyse::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(55%, 22rem);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 195, 0, 0.45), transparent);
pointer-events: none;
}
.pn-section-analyse.pn-home-section {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-section-analyse .pn-container {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.pn-analyse-final {
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 1024px) {
.pn-analyse-final {
flex-direction: row;
align-items: center;
gap: clamp(4rem, 8vw, 7rem);
}
}
.pn-analyse-final__copy {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-analyse-final__copy p {
font-size: clamp(1rem, 1.75vw, 1.125rem);
line-height: 1.72;
color: var(--color-texte);
margin: 0;
}
.pn-analyse-final__copy .pn-analyse-final__phrase {
display: block;
}
.pn-analyse-final__copy .pn-analyse-final__statement {
display: block;
font-size: clamp(1.0625rem, 2vw, 1.25rem);
line-height: 1.6;
margin-top: 0.25rem;
}
.pn-analyse-final__label {
display: block;
}
.pn-analyse-final__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--color-blanc);
margin: 0;
padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
.pn-analyse-final__action {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1024px) {
.pn-analyse-final__action {
flex: 0 0 auto;
min-width: 18rem;
max-width: 22rem;
padding-left: clamp(2.5rem, 5vw, 4rem);
border-left: 1px solid var(--color-bordure-forte);
}
}
@media (max-width: 1023px) {
.pn-analyse-final__action .pn-btn {
width: 100%;
font-size: clamp(1.0625rem, 4.5vw, 1.3125rem);
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
}
}
.pn-analyse-final__callout {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--color-blanc);
margin: 0;
}
@media (min-width: 1024px) {
.pn-section-analyse.pn-home-section {
padding-block: clamp(3rem, 8svh, 5.5rem);
}
}
.pn-cta-principal {
max-width: 52ch;
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid var(--color-bordure-subtile);
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
}
.pn-cta-principal__label {
display: block;
margin-bottom: 1rem;
}
.pn-cta-principal__intro {
font-size: clamp(1.375rem, 3.5vw, 2rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 1.5rem;
}
.pn-cta-principal__body {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 1.5rem;
}
.pn-cta-principal__body:last-child {
margin-bottom: 0;
}
.pn-cta-principal__callout {
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-school-bus-yellow);
margin: 0 0 2rem;
padding-block: 1rem;
border-block: 1px solid var(--color-bordure-subtile);
}
.pn-text-amber {
color: var(--color-amber);
}
.pn-analyse-box {
max-width: 60ch;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-analyse-box__title {
font-size: clamp(1.375rem, 3.5vw, 2rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
}
.pn-analyse-box p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0;
}
@media (min-width: 1024px) {
.pn-analyse-box p {
line-height: 1.82;
}
}
.pn-analyse-box__callout {
font-size: 1.0625rem !important;
font-weight: 600 !important;
color: var(--color-blanc) !important;
letter-spacing: -0.01em;
}
.pn-analyse-box__cta {
margin-top: 0.75rem;
}
@media (max-width: 1023px) {
.pn-section-probleme,
.pn-section-approche.pn-home-section,
.pn-section-approche-2.pn-home-section,
.pn-section-investment.pn-home-section,
.pn-section-composantes.pn-home-section,
.pn-section-analyse.pn-home-section {
min-height: 0;
scroll-snap-align: none;
display: block;
}
.pn-section-niveaux,
.pn-section-niveau-propulsion {
display: block;
}
.pn-approche-bloc--1,
.pn-approche-bloc--2 {
min-height: 0;
}
}
/* Mobile : niveaux 1 & 2 en flux continu ; snap vers Propulsion (niveau 3) */
@media (max-width: 767px) {
html:has(.pn-main--home) {
scroll-snap-type: y proximity;
}
.pn-section-niveaux {
scroll-snap-align: none;
}
.pn-niveau-pane--fondation,
.pn-niveau-pane--performance {
min-height: 0;
scroll-snap-align: none;
scroll-snap-stop: normal;
padding-block: clamp(2rem, 6vw, 3rem);
}
.pn-section-niveau-propulsion {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
/* Restaure le centrage vertical : le passage à display:block plus haut
(bloc mobile+tablette) casse le flex:1 du .pn-container, qui perd
son ancrage justify-content:center et colle le texte en haut. */
display: flex;
flex-direction: column;
}
/* Plus d'air entre les sections empilées : ces trois sections gardaient
un padding-block calibré pour tenir dans un 100svh désormais abandonné
en mobile (display:block ci-dessus), ce qui serre les transitions. */
.pn-section-probleme,
.pn-section-approche.pn-home-section,
.pn-section-approche-2.pn-home-section {
padding-block: clamp(2.25rem, 8vw, 3rem);
}
}
/* Tablette : propulsion en section 100svh ; niveaux aérés */
@media (min-width: 768px) and (max-width: 1023px) {
html:has(.pn-main--home) {
scroll-snap-type: y proximity;
}
.pn-section-niveau-propulsion {
min-height: 100vh;
min-height: 100svh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* Abstracts (tokens + forwards) */
#pn-approche-hero,
#pn-approche-c1,
#pn-approche-pivot,
#pn-approche-situation,
#pn-approche-perdu,
#pn-approche-chemin,
#pn-approche-cta {
scroll-margin-top: 0;
}
@media (min-width: 768px) {
.pn-approche-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.pn-approche-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
}
.pn-approche-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(192, 92, 44, 0.06) 0%, rgba(192, 92, 44, 0.02) 40%, transparent 65%), radial-gradient(ellipse 120% 120% at 50% 50%, rgba(192, 92, 44, 0.05) 0%, rgba(255, 195, 0, 0.03) 45%, transparent 100%), radial-gradient(ellipse at 50% 55%, transparent 18%, rgba(255, 255, 255, 0.03) 19%, transparent 20%, transparent 32%, rgba(255, 255, 255, 0.025) 33%, transparent 34%, transparent 46%, rgba(255, 255, 255, 0.025) 47%, transparent 48%, transparent 60%, rgba(255, 255, 255, 0.02) 61%, transparent 62%, transparent 74%, rgba(255, 255, 255, 0.015) 75%, transparent 76%);
background-size: auto;
}
.pn-approche-hero__inner {
position: relative;
z-index: 1;
max-width: 52rem;
width: 100%;
padding-inline: 1rem;
}
.pn-approche-hero__kicker {
margin: 0 0 1rem;
font-size: clamp(0.875rem, 2.25vw, 1rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-approche-hero__title {
margin: 0 0 1.5rem;
font-size: clamp(1.875rem, 4.75vw, 3.125rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--color-blanc);
}
.pn-approche-hero__title em {
font-style: normal;
color: var(--color-amber);
}
.pn-approche-hero__lead {
margin: 0 auto 2rem;
font-size: clamp(1rem, 2.5vw, 1.1875rem);
line-height: 1.6;
color: var(--color-texte-muted);
max-width: 44ch;
}
.pn-approche-br {
display: none;
}
@media (min-width: 475px) and (max-width: 767px) {
.pn-approche-br--mobile,
.pn-approche-br--tablet {
display: inline;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.pn-approche-br--tablet {
display: inline;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
.pn-approche-hero__title {
font-size: clamp(1.875rem, 4.25vw, 2.75rem);
}
}
@media (min-width: 1024px) {
.pn-approche-hero__inner {
max-width: 55rem;
}
.pn-approche-hero__title {
font-size: clamp(1.5rem, 3.8vw, 2.5rem);
}
}
@media (min-width: 1301px) and (max-width: 1599px) {
.pn-approche-hero__inner {
max-width: 56em;
}
}
@media (min-width: 1600px) {
.pn-approche-hero__kicker {
font-size: clamp(1rem, 2.75vw, 1.2rem);
}
.pn-approche-hero__title {
font-size: clamp(1.8rem, 4.56vw, 3rem);
}
.pn-approche-hero__lead {
font-size: clamp(1.1875rem, 3vw, 1.425rem);
}
}
@media (min-width: 1600px) {
.pn-approche-hero__inner {
max-width: 70rem;
}
}
.pn-approche-section {
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-block: clamp(1.25rem, 3.5svh, 2.5rem);
}
.pn-approche-section--band {
background-color: var(--color-carbon-black);
}
.pn-approche-section > .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.pn-approche-croyances-nav {
display: none;
}
@media (min-width: 768px) {
.pn-approche-croyances-nav {
display: flex;
margin-bottom: 2rem;
}
}
.pn-approche-croyances-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0.75rem 0 0.5rem;
background: transparent;
border: none;
border-bottom: 2px solid var(--color-bordure-subtile);
color: var(--color-texte-muted);
font-family: var(--font-slake);
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
.pn-approche-croyances-tab.is-active {
border-bottom-color: var(--color-amber);
color: var(--color-amber);
}
.pn-approche-croyances-tab__word {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
}
.pn-approche-croyances-tab__num {
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.pn-approche-croyance {
display: block;
}
.pn-approche-croyance + .pn-approche-croyance {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-approche-croyance__header {
position: relative;
cursor: pointer;
padding-right: 2.75rem;
-webkit-tap-highlight-color: transparent;
}
.pn-approche-croyance__header:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 4px;
border-radius: 4px;
}
.pn-approche-croyance__chevron {
position: absolute;
top: 0.1em;
right: 0.15rem;
width: 1.15rem;
height: 1.15rem;
transition: transform 200ms ease;
}
.pn-approche-croyance__chevron::before {
content: "";
position: absolute;
top: 15%;
left: 20%;
width: 0.62rem;
height: 0.62rem;
border-right: 2px solid var(--color-amber);
border-bottom: 2px solid var(--color-amber);
transform: rotate(45deg);
}
.pn-approche-croyance.is-open .pn-approche-croyance__chevron {
transform: rotate(180deg);
}
.pn-approche-croyance__body {
display: block;
margin-top: 1rem;
}
.pn-approche-croyance:not(.is-open) .pn-approche-croyance__body {
display: none;
}
.pn-approche-croyance__number {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.pn-approche-croyance__num-index, .pn-approche-croyance__num-word {
font-size: clamp(1.25rem, 2.75vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-amber);
line-height: 1;
}
.pn-approche-croyance__num-word {
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pn-approche-croyance h2 {
font-size: clamp(1.25rem, 2.75vw, 2rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 1rem;
}
.pn-approche-croyance h3 {
font-size: clamp(1.0625rem, 2.25vw, 1.5rem);
font-weight: 700;
font-variant-caps: all-small-caps;
line-height: 1.25;
letter-spacing: 0.04em;
color: var(--color-blanc);
margin: 2rem 0 0.75rem;
}
.pn-approche-croyance p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 0.75rem;
}
.pn-approche-croyance p:last-child {
margin-bottom: 0;
}
.pn-approche-garde {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
}
.pn-approche-garde li {
position: relative;
padding: 0.7rem 0 0.7rem 1.6rem;
border-top: 1px solid var(--color-bordure-subtile);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-approche-garde li:last-child {
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-approche-garde li::before {
content: "✕";
position: absolute;
left: 0;
top: 0.7rem;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.6;
color: var(--color-amber);
}
.pn-approche-garde strong {
color: var(--color-blanc);
font-weight: 600;
}
.pn-approche-equation {
margin: 1.5rem 0 0;
}
.pn-approche-equation__lead {
font-size: 1rem;
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 0.9rem;
}
.pn-approche-equation__rows {
display: grid;
grid-template-columns: auto auto auto 1fr;
align-items: baseline;
gap: 0.7rem 0.6rem;
margin-bottom: 1.5rem;
font-size: 1.0625rem;
line-height: 1.35;
}
.pn-approche-equation__row {
display: contents;
}
.pn-approche-equation__op {
color: var(--color-amber);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pn-approche-equation__in {
color: var(--color-texte-muted);
white-space: nowrap;
}
.pn-approche-equation__out {
color: var(--color-texte);
}
.pn-approche-equation__out--win {
color: var(--color-blanc);
font-weight: 600;
}
@media (max-width: 767px) {
.pn-approche-equation__rows {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-approche-equation__row {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.5rem;
row-gap: 0.5rem;
align-items: baseline;
}
.pn-approche-equation__op {
grid-row: 1;
grid-column: 1;
}
.pn-approche-equation__in {
grid-row: 1;
grid-column: 2;
white-space: normal;
}
.pn-approche-equation__op--to {
grid-row: 2;
grid-column: 2;
justify-self: start;
transform: rotate(90deg);
}
.pn-approche-equation__out {
grid-row: 3;
grid-column: 2;
}
}
.pn-approche-absences {
list-style: none;
margin: 1.25rem 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.pn-approche-absences li {
position: relative;
padding-left: 1.75rem;
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
color: var(--color-blanc);
}
.pn-approche-absences li::before {
content: "";
position: absolute;
left: 0;
top: 0.4rem;
width: 0.7rem;
height: 0.7rem;
border: 1.5px solid var(--color-amber);
border-radius: 50%;
}
.pn-approche-croyance__verdict {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
font-weight: 600;
line-height: 1.4;
color: var(--color-blanc) !important;
margin-top: 1.25rem !important;
}
.pn-approche-croyance__verdict--accent {
font-size: clamp(1.25rem, 2.6vw, 1.625rem);
}
.pn-approche-verdict__line {
display: block;
}
.pn-approche-verdict__line--hl {
margin-top: 0.15em;
color: var(--color-school-bus-yellow) !important;
}
@media (min-width: 768px) {
.pn-approche-croyance {
display: none;
}
.pn-approche-croyance + .pn-approche-croyance {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.pn-approche-croyance.is-active {
display: block;
}
.pn-approche-croyance.is-active .pn-approche-croyance__body {
display: block;
}
.pn-approche-croyance__chevron {
display: none;
}
.pn-approche-croyance__header {
cursor: default;
padding-right: 0;
}
.pn-approche-croyance__body {
margin-top: 0;
}
}
.pn-approche-pivot {
display: grid;
gap: clamp(1.75rem, 4.5vw, 2.5rem);
}
.pn-approche-pivot__head {
max-width: 34ch;
}
.pn-approche-pivot__eyebrow {
margin-bottom: 1rem;
}
.pn-approche-pivot__title {
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--color-blanc);
margin: 0 0 1.25rem;
}
.pn-approche-pivot__title em {
font-style: normal;
color: var(--color-amber);
}
.pn-approche-pivot__lead {
font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-texte);
margin: 0;
}
.pn-approche-pivot__viz {
margin: 0;
min-width: 0;
}
.pn-approche-pivot__kicker {
font-size: clamp(1.0625rem, 2.5vw, 1.375rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-blanc);
margin: 0;
padding-top: clamp(1rem, 3vw, 1.5rem);
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-approche-pivot__kicker em {
font-style: normal;
color: var(--color-amber);
}
.pn-breakeven {
margin: 0;
padding: clamp(0.5rem, 1.5vw, 0.9rem);
background: rgba(10, 10, 10, 0.45);
border: 1px solid var(--color-bordure-forte);
border-radius: 14px;
}
.pn-breakeven__svg {
display: block;
width: 100%;
height: auto;
}
.pn-breakeven__caption {
margin: clamp(0.75rem, 2vw, 1.125rem) 0 0;
padding-top: clamp(0.75rem, 2vw, 1.125rem);
border-top: 1px solid var(--color-bordure-subtile);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-breakeven__caption em {
font-style: normal;
color: var(--color-texte);
}
@media (min-width: 1024px) {
.pn-approche-pivot {
max-width: 62rem;
margin-inline: auto;
grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
grid-template-areas: "head viz" "kicker viz";
align-items: start;
column-gap: clamp(1.75rem, 3vw, 3rem);
row-gap: clamp(1.5rem, 3vw, 2rem);
}
.pn-approche-pivot__head {
grid-area: head;
max-width: none;
}
.pn-approche-pivot__viz {
grid-area: viz;
align-self: center;
}
.pn-approche-pivot__kicker {
grid-area: kicker;
align-self: start;
}
}
.pn-situation {
width: 100%;
max-width: 56rem;
margin-inline: auto;
}
.pn-situation__head {
margin-bottom: clamp(1.1rem, 3.5svh, 1.85rem);
}
.pn-situation__title {
font-size: clamp(1.5rem, 3.4vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--color-blanc);
margin: 0.75rem 0 0.6rem;
}
.pn-situation__title em {
font-style: normal;
color: var(--color-amber);
}
.pn-situation__lead {
max-width: 62ch;
font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
line-height: 1.5;
color: var(--color-texte-muted);
margin: 0;
}
.pn-situation__match {
display: grid;
grid-template-columns: 1fr;
gap: clamp(0.85rem, 2.5vw, 1.15rem);
}
@media (min-width: 768px) {
.pn-situation__match {
grid-template-columns: 1fr auto 1fr;
gap: clamp(0.75rem, 2vw, 1.4rem);
align-items: stretch;
}
}
.pn-situation__side {
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
padding: clamp(0.85rem, 2vw, 1.25rem);
background: rgba(10, 10, 10, 0.35);
}
.pn-situation__side--a {
border-color: rgba(232, 232, 228, 0.22);
}
.pn-situation__side--b {
border-color: rgba(255, 195, 0, 0.4);
background: linear-gradient(180deg, rgba(255, 195, 0, 0.06), rgba(255, 195, 0, 0) 60%), rgba(10, 10, 10, 0.35);
box-shadow: 0 0 0 1px rgba(255, 195, 0, 0.07), 0 12px 30px -28px rgba(255, 195, 0, 0.45);
}
.pn-situation__tag {
display: block;
font-family: var(--font-slake);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: clamp(0.7rem, 1.5vw, 0.95rem);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-bordure-subtile);
color: rgba(232, 232, 228, 0.75);
}
.pn-situation__side--b .pn-situation__tag {
color: var(--color-school-bus-yellow);
}
.pn-situation__meter {
margin-bottom: clamp(0.7rem, 1.5vw, 0.95rem);
}
.pn-situation__dots {
display: flex;
flex-wrap: wrap;
gap: clamp(0.3rem, 1vw, 0.45rem);
margin-bottom: 0.4rem;
}
.pn-situation__dots i {
inline-size: clamp(0.65rem, 1.5vw, 0.8rem);
block-size: clamp(0.65rem, 1.5vw, 0.8rem);
border-radius: 50%;
border: 1.25px solid rgba(232, 232, 228, 0.28);
}
.pn-situation__dots i.is-on {
border-color: transparent;
background: var(--color-school-bus-yellow);
box-shadow: 0 0 8px rgba(255, 195, 0, 0.5);
}
.pn-situation__side--a .pn-situation__dots i.is-on {
background: rgba(255, 195, 0, 0.7);
box-shadow: 0 0 6px rgba(255, 195, 0, 0.3);
}
.pn-situation__meter-label {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(232, 232, 228, 0.5);
}
.pn-situation__verdict {
font-size: clamp(1rem, 1.8vw, 1.125rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--color-blanc);
margin: 0 0 clamp(0.7rem, 1.5vw, 0.95rem);
}
.pn-situation__verdict em {
font-style: normal;
color: var(--color-school-bus-yellow);
}
.pn-situation__side--a .pn-situation__verdict {
color: var(--color-texte);
}
.pn-situation__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
.pn-situation__list li {
position: relative;
padding-left: 1.35rem;
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-texte);
}
.pn-situation__side--a .pn-situation__list li {
color: var(--color-texte);
}
.pn-situation__side--a .pn-situation__list li::before {
content: "×";
position: absolute;
left: 0;
top: 0;
color: rgba(232, 232, 228, 0.55);
}
.pn-situation__side--b .pn-situation__list li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.38em;
inline-size: 0.4rem;
block-size: 0.4rem;
border-right: 2px solid var(--color-amber);
border-bottom: 2px solid var(--color-amber);
transform: rotate(-45deg);
}
.pn-situation__vs {
display: flex;
align-items: center;
justify-content: center;
}
.pn-situation__vs span {
display: grid;
place-items: center;
inline-size: 1.85rem;
block-size: 1.85rem;
border: 1px solid var(--color-bordure-subtile);
border-radius: 50%;
font-family: var(--font-slake);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(232, 232, 228, 0.5);
background: var(--color-carbon-black);
}
.pn-situation__closing {
margin: clamp(1.1rem, 3svh, 1.75rem) auto 0;
max-width: 52ch;
text-align: center;
font-size: clamp(1rem, 1.9vw, 1.1875rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-blanc);
}
.pn-situation__closing em {
font-style: normal;
color: var(--color-amber);
}
.pn-approche-perdu-content {
max-width: 58ch;
margin-inline: auto;
}
.pn-approche-perdu-content h2 {
font-size: clamp(2.5rem, 6vw, 4.75rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-blanc);
margin: 0 0 2rem;
}
.pn-approche-perdu-content p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 1rem;
}
.pn-approche-perdu-content p:last-child {
margin-bottom: 0;
}
.pn-approche-perdu-content em {
font-style: normal;
color: var(--color-amber);
}
.pn-approche-perdu-content .pn-approche-fiche {
margin: 1.75rem 0;
padding: 1.4rem 1.6rem;
border: 1px solid var(--color-bordure-forte);
border-left: 3px solid var(--color-amber);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
}
.pn-approche-perdu-content .pn-approche-fiche__role {
margin: 0 0 1rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-approche-perdu-content .pn-approche-fiche__duties {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
}
.pn-approche-perdu-content .pn-approche-fiche__duties li {
position: relative;
padding-left: 1.6rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-texte);
}
.pn-approche-perdu-content .pn-approche-fiche__duties li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--color-amber);
font-weight: 700;
}
.pn-approche-perdu-content .pn-approche-fiche__hours {
margin: 1.1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--color-bordure-subtile);
font-size: 0.9375rem;
color: var(--color-texte-muted);
}
.pn-approche-perdu-content .pn-approche-fiche__hours span {
color: var(--color-blanc);
font-weight: 600;
margin-right: 0.4rem;
}
.pn-approche-perdu-content .pn-approche-perdu-content__close {
margin-top: 1.5rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-approche-perdu-content__body > p:first-child {
color: var(--color-school-bus-yellow);
font-size: 1.1875rem;
}
@media (min-width: 1024px) {
.pn-approche-perdu-content__body > p:first-child {
font-size: 1.125rem;
}
}
@media (min-width: 768px) {
.pn-approche-perdu-content {
display: flex;
flex-direction: row;
align-items: start;
gap: clamp(2rem, 3.5vw, 5rem);
max-width: none;
margin-inline: 0;
}
.pn-approche-perdu-content__title {
flex: 0 0 36%;
}
.pn-approche-perdu-content__body {
flex: 1;
padding-top: 0.5rem;
}
.pn-approche-perdu-content h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.25rem);
}
.pn-approche-perdu-content p {
font-size: 1rem;
line-height: 1.65;
}
}
@media (min-width: 1024px) {
.pn-approche-perdu-content {
gap: clamp(2.5rem, 4vw, 6rem);
}
.pn-approche-perdu-content__title {
flex: 0 0 38%;
}
.pn-approche-perdu-content h2 {
font-size: clamp(2.5rem, 6vw, 4.75rem);
}
}
.pn-approche-chemin-section {
scroll-snap-align: start;
scroll-snap-stop: always;
padding-block: clamp(3rem, 8svh, 6rem);
}
.pn-approche-chemin {
max-width: 54rem;
margin-inline: auto;
}
.pn-approche-chemin__header {
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.pn-approche-chemin__header h2 {
font-size: clamp(1.5rem, 3.75vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
}
.pn-approche-chemin__header p {
font-size: 1rem;
color: var(--color-texte-muted);
font-style: italic;
margin: 0;
}
.pn-approche-chemin__steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.pn-approche-chemin__steps {
grid-template-columns: 1fr 1fr;
gap: 2rem clamp(2.5rem, 5vw, 5rem);
}
}
@media (min-width: 1301px) {
.pn-approche-chemin__steps {
grid-template-columns: 1fr 1fr 1fr;
}
}
.pn-approche-chemin__step {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-approche-chemin__step-num {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-approche-chemin__step-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-blanc);
margin: 0;
}
.pn-approche-chemin__step-desc {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
}
.pn-approche-chemin__climb {
display: block;
margin: 0 auto clamp(1.5rem, 4vw, 3rem);
max-width: 46rem;
}
.pn-approche-chemin__climb-svg {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 767px) {
.pn-approche-chemin__steps {
position: relative;
padding-left: 3rem;
}
.pn-approche-chemin__steps::before {
content: "";
position: absolute;
left: 0.875rem;
top: 0.875rem;
bottom: 0.875rem;
width: 2px;
background: linear-gradient(to bottom, var(--color-amber) 0%, rgba(192, 92, 44, 0.25) 100%);
}
.pn-approche-chemin__step {
position: relative;
padding-bottom: 2.25rem;
gap: 0.25rem;
}
.pn-approche-chemin__step:last-child {
padding-bottom: 0;
}
.pn-approche-chemin__step-num {
position: absolute;
left: -3rem;
top: 0;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-onyx);
border: 2px solid var(--color-amber);
border-radius: 50%;
font-size: 0.5625rem;
font-weight: 700;
color: var(--color-amber);
letter-spacing: 0.04em;
z-index: 1;
}
}
.pn-approche-cta {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 52ch;
margin-inline: auto;
}
.pn-approche-cta__intro .pn-label {
display: block;
margin-bottom: 1.5rem;
font-size: 1rem;
letter-spacing: 0.14em;
}
.pn-approche-cta__title {
font-size: clamp(1.625rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0;
}
.pn-approche-cta__body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-approche-cta__lead {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0;
}
.pn-approche-cta__own {
font-size: clamp(1.25rem, 3vw, 1.625rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--color-blanc);
margin: 0;
}
.pn-approche-cta__plan {
border: 1px solid var(--color-bordure-forte);
border-top: 2px solid var(--color-amber);
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
padding: 1.35rem 1.6rem;
}
.pn-approche-cta__plan-label {
margin: 0 0 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-approche-cta__plan-list {
list-style: none;
margin: 0;
padding: 0;
}
.pn-approche-cta__plan-list li {
position: relative;
padding: 0.7rem 0 0.7rem 1rem;
font-size: 1.0625rem;
line-height: 1.45;
color: var(--color-blanc);
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-approche-cta__plan-list li:last-child {
padding-bottom: 0;
}
.pn-approche-cta__plan-list li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 1.05em;
background: var(--color-amber);
border-radius: 1px;
}
.pn-approche-cta__action {
margin: 0;
}
@media (min-width: 768px) {
.pn-approche-cta .pn-preanalyse-door {
margin-inline: 0;
}
.pn-approche-cta .pn-preanalyse-door a {
display: block;
width: fit-content;
margin-top: 0.25rem;
}
}
@media (min-width: 1024px) {
.pn-approche-cta {
flex-direction: row;
align-items: start;
gap: clamp(3rem, 6vw, 6rem);
max-width: 68rem;
margin-inline: 0;
padding-inline-start: clamp(1rem, 2.5vw, 2rem);
}
.pn-approche-cta__intro {
flex: 0 0 38%;
}
.pn-approche-cta__body {
flex: 1;
}
}
@media (min-width: 768px) {
html:has(.pn-main--approche) .site-header {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
@media (min-width: 1301px) {
.pn-approche-perdu-content {
max-width: 72rem;
margin-inline: auto;
}
}
@media (min-width: 1024px) {
.pn-approche-chemin__step-num {
font-size: 0.9375rem;
}
.pn-approche-chemin__step-title {
font-size: 1.125rem;
}
}
@media (min-width: 1301px) {
.pn-approche-chemin__step-num {
font-size: 1rem;
}
.pn-approche-chemin__step-title {
font-size: 1.25rem;
}
.pn-approche-chemin__step-desc {
font-size: 1rem;
}
}
@media (min-width: 768px) {
html:has(.pn-main--approche) .site-footer {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
}
@media (max-width: 767px) {
.pn-approche-section {
min-height: 0;
scroll-snap-align: none;
display: block;
padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.pn-approche-chemin-section {
scroll-snap-align: none;
padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.pn-approche-hero {
min-height: 0;
padding-block: clamp(4rem, 12vw, 7rem);
}
}
/* Abstracts (tokens + forwards) */
#pn-offres-hero,
#pn-offres-situation,
#pn-offres-interventions,
#pn-offres-projets,
#pn-offres-analyse,
#pn-offres-cta {
scroll-margin-top: 0;
}
@media (min-width: 768px) {
.pn-offres-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.pn-offres-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
}
.pn-offres-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 120% 120% at 50% 50%, rgba(255, 195, 0, 0.06) 0%, rgba(192, 92, 44, 0.03) 50%, transparent 100%), repeating-linear-gradient(45deg, transparent 0px, transparent 24px, rgba(255, 255, 255, 0.03) 24px, rgba(255, 255, 255, 0.03) 25px);
background-size: auto;
}
.pn-offres-hero__inner {
position: relative;
z-index: 1;
max-width: 52rem;
width: 100%;
padding-inline: 1rem;
}
.pn-offres-hero__kicker {
margin: 0 0 1rem;
font-size: clamp(0.875rem, 2.25vw, 1rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-offres-hero__title {
margin: 0 0 1.5rem;
font-size: clamp(1.875rem, 4.75vw, 3.125rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--color-blanc);
}
.pn-offres-hero__title em {
font-style: normal;
color: var(--color-school-bus-yellow);
}
.pn-offres-hero__lead {
margin: 0 auto 2rem;
font-size: clamp(1rem, 2.5vw, 1.1875rem);
line-height: 1.6;
color: var(--color-texte-muted);
max-width: 46ch;
}
@media (min-width: 900px) and (max-width: 1023px) {
.pn-offres-hero__title {
font-size: clamp(1.875rem, 4.25vw, 2.75rem);
}
}
@media (min-width: 1024px) {
.pn-offres-hero__title {
font-size: clamp(1.5rem, 3.8vw, 2.5rem);
}
}
@media (min-width: 1600px) {
.pn-offres-hero__kicker {
font-size: clamp(1rem, 2.75vw, 1.2rem);
}
.pn-offres-hero__title {
font-size: clamp(1.8rem, 4.56vw, 3rem);
}
.pn-offres-hero__lead {
font-size: clamp(1.1875rem, 3vw, 1.425rem);
}
}
.pn-offres-section {
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-block: clamp(1.25rem, 3.5svh, 2.5rem);
}
.pn-offres-section--band {
background-color: var(--color-carbon-black);
}
.pn-offres-section > .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.pn-offres-sit-header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-offres-sit-header__title {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
text-transform: none;
}
.pn-offres-sit-header__hint {
margin: 0;
font-size: clamp(1rem, 2.25vw, 1.1875rem);
line-height: 1.55;
color: var(--color-school-bus-yellow);
font-weight: 500;
}
.pn-offres-situations {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pn-offres-sit {
display: flex;
flex-direction: column;
}
.pn-offres-sit__card {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
text-align: left;
padding: clamp(1.1rem, 2.5vw, 1.6rem);
padding-right: clamp(2.6rem, 5vw, 3.2rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-top: 3px solid var(--color-amber);
border-radius: 12px;
cursor: pointer;
color: var(--color-texte);
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, opacity 200ms ease;
}
@media (hover: hover) {
.pn-offres-sit__card:hover {
transform: translateY(-3px);
border-color: var(--color-amber);
box-shadow: 0 0 24px rgba(255, 195, 0, 0.06);
}
}
.pn-offres-sit__card:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-offres-sit__pick {
position: absolute;
top: clamp(1.1rem, 2.5vw, 1.6rem);
right: clamp(1.1rem, 2.5vw, 1.6rem);
width: 20px;
height: 20px;
border: 2px solid var(--color-bordure-forte);
border-radius: 50%;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.pn-offres-sit__pick::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--color-school-bus-yellow);
transform: scale(0);
transition: transform 200ms ease;
}
.pn-offres-situations:not(.has-selection) .pn-offres-sit__pick {
animation: pn-sit-pulse 2.2s ease-in-out infinite;
}
@keyframes pn-sit-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 195, 0, 0);
border-color: var(--color-bordure-forte);
}
50% {
box-shadow: 0 0 0 5px rgba(255, 195, 0, 0.08);
border-color: var(--color-amber);
}
}
@media (hover: hover) {
.pn-offres-sit__card:hover .pn-offres-sit__pick {
border-color: var(--color-school-bus-yellow);
}
}
.pn-offres-sit.is-selected .pn-offres-sit__pick {
border-color: var(--color-school-bus-yellow);
animation: none;
}
.pn-offres-sit.is-selected .pn-offres-sit__pick::after {
transform: scale(1);
}
.pn-offres-sit__icon {
display: inline-flex;
width: 40px;
height: 40px;
margin-bottom: 0.5rem;
color: var(--color-amber);
transition: transform 200ms ease, color 200ms ease;
}
.pn-offres-sit__icon svg {
width: 100%;
height: 100%;
}
.pn-offres-sit__etat {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-offres-sit__label {
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-blanc);
}
.pn-offres-sit__desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-offres-sit.is-selected .pn-offres-sit__card {
border-color: var(--color-school-bus-yellow);
border-top-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.04);
box-shadow: 0 0 40px rgba(255, 195, 0, 0.1);
transform: translateY(-3px);
}
.pn-offres-sit.is-selected .pn-offres-sit__icon {
transform: scale(1.06);
color: var(--color-school-bus-yellow);
}
.pn-offres-situations.has-selection .pn-offres-sit:not(.is-selected) .pn-offres-sit__card {
opacity: 0.5;
}
.pn-offres-sit__route {
margin: 1rem 0 0;
}
.pn-offres-situations.is-enhanced .pn-offres-sit__route {
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
}
.pn-offres-situations.is-enhanced .pn-offres-sit.is-selected .pn-offres-sit__route {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 260ms ease, transform 260ms ease, visibility 0s;
}
.pn-offres-sit__route a {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4em;
text-decoration: none;
font-size: 0.95rem;
}
.pn-offres-sit__route a:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-offres-sit__route-lead {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-offres-sit__route-cible {
font-weight: 600;
color: var(--color-school-bus-yellow);
border-bottom: 1px solid transparent;
transition: border-color 160ms ease;
}
.pn-offres-sit__route-arrow {
color: var(--color-school-bus-yellow);
transition: transform 160ms ease;
}
@media (hover: hover) {
.pn-offres-sit__route a:hover .pn-offres-sit__route-cible {
border-bottom-color: currentColor;
}
.pn-offres-sit__route a:hover .pn-offres-sit__route-arrow {
transform: translateX(3px);
}
}
@media (min-width: 768px) {
.pn-offres-situations {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
}
}
@media (prefers-reduced-motion: reduce) {
.pn-offres-sit__card,
.pn-offres-sit__icon,
.pn-offres-sit__pick,
.pn-offres-sit__pick::after,
.pn-offres-situations.is-enhanced .pn-offres-sit__route {
transition: none;
}
.pn-offres-situations:not(.has-selection) .pn-offres-sit__pick {
animation: none;
}
}
.pn-offres-interventions__header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-offres-interventions__header h2 {
font-size: clamp(1.375rem, 3.25vw, 2.125rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 1rem;
text-transform: none;
}
.pn-offres-interventions__header p {
font-size: 1rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
max-width: 58ch;
}
.pn-offres-interventions__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.pn-offres-interventions__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem clamp(2rem, 4vw, 4rem);
}
}
@media (min-width: 1024px) {
.pn-offres-interventions__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-offres-intervention {
border-left: 2px solid var(--color-amber);
padding-left: 1rem;
}
.pn-offres-intervention h3 {
font-size: 1rem;
font-weight: 600;
font-variant-caps: normal;
letter-spacing: 0.01em;
color: var(--color-blanc);
margin: 0 0 0.5rem;
line-height: 1.3;
text-transform: none;
}
.pn-offres-intervention p {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
}
.pn-offres-interventions__note {
margin-top: clamp(1.5rem, 4svh, 3rem);
font-size: 0.875rem;
font-style: italic;
color: var(--color-texte-muted);
}
.pn-offres-projets__header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-offres-projets__header h2 {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
text-transform: none;
}
.pn-offres-projets__bridge {
font-size: clamp(1rem, 2.25vw, 1.1875rem);
line-height: 1.55;
color: var(--color-school-bus-yellow);
margin: 0;
font-weight: 500;
}
.pn-offres-col-label {
display: block;
margin-bottom: 1.5rem;
}
.pn-offres-projets__cols {
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 6svh, 4rem);
}
.pn-offres-phases {
position: relative;
}
.pn-offres-phase {
display: flex;
gap: 1rem;
position: relative;
padding-bottom: 3rem;
}
.pn-offres-phase:last-child {
padding-bottom: 0;
}
.pn-offres-phases::before {
content: "";
position: absolute;
left: 0.875rem;
top: 1.75rem;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, var(--color-amber) 0%, rgba(192, 92, 44, 0.15) 100%);
}
.pn-offres-phase__num {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-onyx);
border: 2px solid var(--color-amber);
border-radius: 50%;
font-size: 0.625rem;
font-weight: 700;
color: var(--color-amber);
letter-spacing: 0.04em;
z-index: 1;
position: relative;
}
.pn-offres-phase__content {
padding-top: 0.125rem;
}
.pn-offres-phase__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 0.5rem;
line-height: 1.3;
}
.pn-offres-phase__desc {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
}
.pn-offres-niveaux {
display: flex;
flex-direction: column;
}
.pn-offres-niveaux-tabs {
display: flex;
border-bottom: 1px solid var(--color-bordure-subtile);
margin-bottom: 2rem;
}
.pn-offres-niveau-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0 0.5rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: var(--color-texte-muted);
font-family: var(--font-slake);
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
.pn-offres-niveau-tab.is-active {
border-bottom-color: var(--color-school-bus-yellow);
color: var(--color-school-bus-yellow);
}
.pn-offres-niveau-tab:hover:not(.is-active) {
color: var(--color-texte);
border-bottom-color: var(--color-bordure-forte);
}
.pn-offres-niveau-tab__dots {
font-size: 0.5rem;
letter-spacing: 0.15em;
line-height: 1;
color: inherit;
}
.pn-offres-niveau-tab__name {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
}
.pn-offres-niveau-panel {
display: none;
}
.pn-offres-niveau-panel.is-active {
display: block;
}
.pn-offres-niveau-panel__desc {
font-size: 1rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 1rem;
}
.pn-offres-niveau-panel__audience {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-texte-muted);
font-style: italic;
margin: 0;
}
.pn-offres-niveaux__note {
margin-top: 2rem;
font-size: 0.8125rem;
font-style: italic;
color: var(--color-texte-muted);
line-height: 1.6;
}
@media (min-width: 1024px) {
.pn-offres-projets__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: start;
max-width: none;
}
.pn-offres-phases::before {
background: var(--color-carbon-black);
background: linear-gradient(to bottom, var(--color-amber) 0%, rgba(192, 92, 44, 0.12) 100%);
}
.pn-offres-phase__num {
background: var(--color-onyx);
}
}
.pn-offres-analyse {
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 6svh, 4rem);
max-width: 52rem;
}
.pn-offres-analyse__title {
font-size: clamp(1.625rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 1rem 0 0;
text-transform: none;
}
.pn-offres-analyse__body p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0 0 1rem;
}
.pn-offres-analyse__body p:last-child {
margin-bottom: 0;
}
.pn-offres-analyse__mutuel {
font-size: 1.0625rem;
font-weight: 500;
color: var(--color-blanc);
font-style: normal !important;
}
.pn-offres-analyse__right {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.pn-offres-analyse__montant {
display: block;
font-size: clamp(3.5rem, 12vw, 6rem);
font-weight: 700;
color: var(--color-school-bus-yellow);
line-height: 1;
letter-spacing: -0.04em;
text-shadow: 0 0 80px rgba(255, 195, 0, 0.28);
}
.pn-offres-analyse__note {
display: block;
font-size: 1rem;
font-style: italic;
color: var(--color-texte-muted);
max-width: 28ch;
line-height: 1.55;
}
@media (min-width: 1024px) {
.pn-offres-analyse {
flex-direction: row;
align-items: center;
gap: clamp(3rem, 6vw, 6rem);
max-width: none;
}
.pn-offres-analyse__left {
flex: 0 0 55%;
}
.pn-offres-analyse__right {
flex: 1;
align-items: center;
text-align: center;
}
.pn-offres-analyse__note {
text-align: center;
max-width: 30ch;
}
}
.pn-offres-methode {
list-style: none;
margin: 0 0 clamp(2rem, 5svh, 3rem);
padding: 0;
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.pn-offres-methode {
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
}
}
.pn-offres-phase-mini {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 2px solid var(--color-bordure-subtile);
}
.pn-offres-phase-mini__num {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-amber);
}
.pn-offres-phase-mini__title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-offres-phase-mini__desc {
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-texte-muted);
}
.pn-offres-niveaux-offres {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-offres-niveau {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(1.25rem, 3vw, 1.85rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-left: 3px solid var(--color-amber);
border-radius: 12px;
}
.pn-offres-niveau__head {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.pn-offres-niveau__dots {
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--color-school-bus-yellow);
}
.pn-offres-niveau__name {
margin: 0;
font-size: clamp(1.25rem, 3vw, 1.6rem);
font-weight: 700;
color: var(--color-blanc);
}
.pn-offres-niveau__promise {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--color-school-bus-yellow);
font-weight: 500;
}
.pn-offres-niveau__list {
margin: 0 0 1rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.5rem;
}
.pn-offres-niveau__list li {
position: relative;
padding-left: 1.4rem;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-texte);
}
.pn-offres-niveau__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 7px;
height: 7px;
border-right: 2px solid var(--color-amber);
border-bottom: 2px solid var(--color-amber);
transform: rotate(45deg);
}
.pn-offres-niveau__outcome {
margin: auto 0 0;
padding-top: 0.75rem;
font-size: 0.9rem;
font-style: italic;
color: var(--color-texte-muted);
}
.pn-offres-niveau--2 {
border-left-color: var(--color-school-bus-yellow);
}
.pn-offres-niveau--3 {
border-left-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.03);
box-shadow: 0 0 40px rgba(255, 195, 0, 0.06);
}
@media (min-width: 1024px) {
.pn-offres-niveaux-offres {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 2.5vw, 2.5rem);
align-items: stretch;
}
.pn-offres-niveaux-offres .pn-offres-col-label,
.pn-offres-niveaux-offres .pn-offres-niveaux__note {
grid-column: 1/-1;
}
.pn-offres-niveau__promise {
min-height: 4.5em;
}
}
.pn-offres-services {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.pn-offres-services {
grid-template-columns: repeat(2, 1fr);
gap: 2rem clamp(2rem, 4vw, 3.5rem);
}
}
.pn-offres-service__icon {
display: inline-flex;
width: 40px;
height: 40px;
margin-bottom: 0.75rem;
color: var(--color-amber);
}
.pn-offres-service__icon svg {
width: 100%;
height: 100%;
}
.pn-offres-service__verb {
margin: 0 0 0.5rem;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-blanc);
}
.pn-offres-service__line {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-offres-analyse__voir {
margin: 1.5rem 0 0;
}
.pn-offres-analyse__grille-link {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0;
background: none;
border: 0;
color: var(--color-blanc);
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 160ms ease;
}
.pn-offres-analyse__grille-link::before {
content: "+";
display: inline-grid;
place-items: center;
width: 1.15em;
height: 1.15em;
border: 1.5px solid currentColor;
border-radius: 50%;
font-size: 0.85em;
line-height: 1;
text-decoration: none;
}
@media (hover: hover) {
.pn-offres-analyse__grille-link:hover {
color: var(--color-goldenrod);
}
}
.pn-offres-analyse__grille-link:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-offres-analyse__action {
margin: 0.75rem 0 0;
}
@media (max-width: 767px) {
.pn-offres-analyse__body {
margin-top: 0.75rem;
}
.pn-offres-analyse__action {
margin-top: 1.25rem;
}
}
@media (min-width: 768px) {
.pn-offres-hero,
.pn-offres-section {
scroll-snap-stop: normal;
}
}
@media (min-width: 1024px) {
html:has(.pn-main--offres) {
scroll-snap-type: y mandatory;
}
.pn-offres-hero,
.pn-offres-section {
scroll-snap-stop: always;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-offres-hero,
.pn-offres-section {
scroll-snap-align: none;
}
}
.pn-offres-catalogue__header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-offres-catalogue__header h2 {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 1rem;
text-transform: none;
}
.pn-offres-catalogue__header p {
font-size: 1rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
max-width: 60ch;
}
.pn-offres-familles {
list-style: none;
margin: 0 0 clamp(2rem, 5svh, 3rem);
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.pn-offres-familles {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
.pn-offres-famille {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon titre arrow" "icon ligne arrow";
align-items: center;
column-gap: 1rem;
row-gap: 0.15rem;
height: 100%;
padding: clamp(1.1rem, 2.5vw, 1.6rem);
padding-left: clamp(1.35rem, 2.75vw, 1.9rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
text-decoration: none;
overflow: hidden;
}
.pn-offres-famille::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 2rem;
background: var(--color-amber);
border-radius: 0 4px 4px 0;
opacity: 0.55;
transition: height 220ms ease, opacity 220ms ease;
}
.pn-offres-famille__icon {
grid-area: icon;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(255, 195, 0, 0.07);
border: 1px solid rgba(255, 195, 0, 0.16);
color: var(--color-amber);
transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
.pn-offres-famille__icon svg {
width: 24px;
height: 24px;
}
.pn-offres-famille__titre {
grid-area: titre;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.25;
color: var(--color-blanc);
}
.pn-offres-famille__ligne {
grid-area: ligne;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-offres-famille__arrow {
grid-area: arrow;
justify-self: end;
align-self: center;
font-size: 1.1rem;
color: var(--color-texte-muted);
transition: transform 200ms ease, color 200ms ease;
}
@media (hover: hover) {
.pn-offres-famille {
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.pn-offres-famille:hover {
transform: translateY(-3px);
border-color: rgba(255, 195, 0, 0.4);
box-shadow: 0 0 34px rgba(255, 195, 0, 0.09);
}
.pn-offres-famille:hover::before {
height: 3rem;
opacity: 1;
}
.pn-offres-famille:hover .pn-offres-famille__icon {
transform: scale(1.06);
background: rgba(255, 195, 0, 0.12);
border-color: rgba(255, 195, 0, 0.3);
}
.pn-offres-famille:hover .pn-offres-famille__arrow {
transform: translateX(4px);
color: var(--color-school-bus-yellow);
}
}
.pn-offres-famille:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-offres-catalogue__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 767px) {
.pn-offres-catalogue__actions {
flex-direction: column;
align-items: stretch;
}
.pn-offres-catalogue__actions .pn-btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-offres-famille,
.pn-offres-famille__icon,
.pn-offres-famille::before,
.pn-offres-famille__arrow {
transition: none;
}
}
.pn-offres-cta {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 52ch;
margin-inline: auto;
}
.pn-offres-cta .pn-label {
display: block;
margin-bottom: 1.5rem;
font-size: 1rem;
letter-spacing: 0.14em;
}
.pn-offres-cta__title {
font-size: clamp(1.625rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0;
text-transform: none;
}
.pn-offres-cta__body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-offres-cta__body p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0;
}
.pn-offres-cta__action {
margin: 0;
text-align: center;
}
@media (min-width: 1024px) {
.pn-offres-cta {
flex-direction: row;
align-items: start;
gap: clamp(3rem, 6vw, 6rem);
max-width: none;
margin-inline: 0;
}
.pn-offres-cta__intro {
flex: 0 0 40%;
}
.pn-offres-cta__body {
flex: 1;
}
}
@media (min-width: 768px) {
html:has(.pn-main--offres) .site-header {
scroll-snap-align: start;
scroll-snap-stop: always;
}
html:has(.pn-main--offres) .site-footer {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
}
@media (max-width: 767px) {
.pn-offres-hero {
min-height: 0;
padding-block: clamp(4rem, 12vw, 7rem);
}
.pn-offres-section {
min-height: 0;
scroll-snap-align: none;
display: block;
padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
}
/* Abstracts (tokens + forwards) */
#pn-ms-hero,
#pn-ms-presentation,
#pn-ms-plugins,
#pn-ms-tableau,
#pn-ms-cta,
#pn-ms-accordeons {
scroll-margin-top: 0;
}
@media (min-width: 768px) {
.pn-ms-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.pn-ms-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
}
.pn-ms-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 55% 40% at 50% 50%, rgba(255, 195, 0, 0.1) 0%, rgba(255, 195, 0, 0.04) 45%, transparent 65%), radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: auto, 14px 14px;
}
.pn-ms-hero__inner {
position: relative;
z-index: 1;
max-width: 60rem;
width: 100%;
padding-inline: 1rem;
}
.pn-ms-hero__kicker {
margin: 0 0 1.5rem;
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-ms-hero__title {
margin: 0 0 2rem;
font-size: clamp(3rem, 9vw, 7rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
background: linear-gradient(135deg, var(--color-blanc) 40%, var(--color-school-bus-yellow) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pn-ms-hero__lead {
display: flex;
flex-direction: column;
}
.pn-ms-hero__lead-line {
margin: 0;
line-height: 1.45;
}
.pn-ms-hero__lead-line--1 {
font-size: clamp(1rem, 2.25vw, 1.125rem);
color: var(--color-texte);
font-weight: 400;
margin-bottom: 0.5rem;
}
.pn-ms-hero__lead-line--2 {
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
color: var(--color-blanc);
font-weight: 500;
margin-bottom: 1.5rem;
}
.pn-ms-hero__lead-line--3 {
font-size: clamp(1.125rem, 2.75vw, 1.375rem);
color: var(--color-blanc);
font-weight: 700;
}
@media (min-width: 1024px) and (max-width: 1300px) {
.pn-ms-hero__lead-line--3 {
margin-top: -1rem;
}
.pn-ms-hero__title {
font-size: clamp(2.15rem, 6.5vw, 5rem);
}
.pn-ms-hero__inner {
transform: translateY(-1.5rem);
}
.pn-ms-hero .pn-hero__scroll {
position: absolute;
bottom: clamp(1.5rem, 3vh, 2.5rem);
left: 50%;
margin: 0;
transform: translateX(-50%) rotate(45deg);
}
}
@media (min-width: 768px) and (max-width: 1300px) {
.pn-ms-hero__kicker {
font-size: clamp(0.8rem, 2vw, 0.9rem);
}
.pn-ms-hero__title {
font-size: clamp(2.4rem, 7.2vw, 5.6rem);
}
.pn-ms-hero__lead-line--1 {
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}
.pn-ms-hero__lead-line--2 {
font-size: clamp(0.85rem, 2vw, 1rem);
}
.pn-ms-hero__lead-line--3 {
font-size: clamp(0.9rem, 2.2vw, 1.1rem);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.pn-ms-hero {
padding-block: clamp(2.85rem, 7.6svh, 5.7rem);
}
.pn-ms-hero__kicker {
margin-bottom: 1.425rem;
}
.pn-ms-hero__title {
margin-bottom: 1.9rem;
}
.pn-ms-hero__lead-line--2 {
margin-bottom: 1.4rem;
}
.pn-ms-hero__lead-line--3 {
margin-bottom: 2rem;
}
}
@media (max-width: 767px) {
.pn-ms-hero__kicker {
font-size: clamp(0.85rem, 2.1vw, 0.95rem);
}
.pn-ms-hero__title {
font-size: clamp(2.55rem, 7.65vw, 5.95rem);
}
.pn-ms-hero__lead-line--1 {
font-size: clamp(0.85rem, 1.9vw, 0.95rem);
}
.pn-ms-hero__lead-line--2 {
font-size: clamp(0.9rem, 2.1vw, 1.05rem);
}
.pn-ms-hero__lead-line--3 {
font-size: clamp(0.95rem, 2.3vw, 1.15rem);
}
}
@media (min-width: 1600px) {
.pn-ms-hero__kicker {
font-size: 1.25rem;
}
.pn-ms-hero__title {
font-size: clamp(5rem, 8vw, 8rem);
}
}
@media (min-width: 768px) {
.pn-ms-presentation {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.pn-ms-presentation {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: clamp(2.5rem, 6svh, 5rem);
background: var(--color-onyx);
position: relative;
}
.pn-ms-presentation__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 44rem;
padding-inline: 1rem;
}
@media (min-width: 768px) and (max-width: 1300px) {
.pn-ms-presentation__inner {
max-width: 62rem;
}
}
.pn-ms-presentation__title {
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
margin: 0 0 2rem;
}
@media (min-width: 1301px) {
.pn-ms-presentation__title {
font-size: clamp(1rem, 2.5vw, 1.375rem);
}
}
.pn-ms-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(1rem, 2.5svh, 1.75rem);
}
@media (min-width: 768px) and (max-width: 1300px) {
.pn-ms-features {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: clamp(1rem, 2.5svh, 1.75rem);
column-gap: clamp(2rem, 4vw, 3.5rem);
}
}
.pn-ms-feature {
padding-left: 1rem;
}
.pn-ms-feature__desc {
position: relative;
}
.pn-ms-feature__desc::before {
content: "";
position: absolute;
left: -1rem;
top: 0;
width: 1px;
height: 100%;
background: var(--color-amber);
}
.pn-ms-feature__title {
font-size: clamp(1.25rem, 3vw, 1.625rem);
font-weight: 700;
color: var(--color-blanc);
margin: 0 0 0.5rem;
line-height: 1.2;
}
.pn-ms-feature__desc {
font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
line-height: 1.55;
color: var(--color-texte-muted);
margin: 0;
}
@media (min-height: 600px) and (max-height: 900px) and (min-width: 768px) {
.pn-ms-features {
row-gap: 1rem;
column-gap: 2rem;
}
.pn-ms-feature__title {
font-size: 1.125rem;
}
.pn-ms-feature__desc {
font-size: 0.8rem;
}
}
.pn-ms-plugins {
background: var(--color-carbon-black);
padding-block: clamp(3rem, 8vw, 6rem);
}
.pn-ms-plugins__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--color-blanc);
margin: 0 0 2rem;
max-width: 42rem;
line-height: 1.25;
letter-spacing: -0.02em;
}
.pn-ms-plugins__body {
font-size: clamp(0.9375rem, 2vw, 1rem);
line-height: 1.65;
color: var(--color-texte);
max-width: 42rem;
margin: 0 0 0.75rem;
}
.pn-ms-plugins__body:last-of-type {
margin-bottom: 0;
}
.pn-ms-plugin-name {
color: var(--color-amber);
font-weight: 500;
}
.pn-ms-knocker {
margin-top: clamp(2rem, 5vw, 3.5rem);
padding-block: clamp(1.5rem, 4vw, 2.5rem);
border-top: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
}
.pn-ms-knocker__line {
margin: 0;
line-height: 1.25;
letter-spacing: -0.02em;
}
.pn-ms-knocker__line--1 {
font-size: clamp(1.5rem, 4vw, 2.75rem);
font-weight: 700;
color: var(--color-blanc);
margin-bottom: 0.75rem;
}
.pn-ms-knocker__line--2 {
font-size: clamp(1.75rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--color-school-bus-yellow);
}
.pn-ms-knocker__condition {
color: var(--color-texte);
}
@media (min-width: 768px) and (max-width: 1300px) {
.pn-ms-knocker__line--1 {
font-size: clamp(1.125rem, 3vw, 2.0625rem);
}
.pn-ms-knocker__line--2 {
font-size: clamp(1.3rem, 3.75vw, 2.625rem);
}
}
@media (min-width: 1301px) {
.pn-ms-knocker__line--2 {
font-size: clamp(1.4rem, 4vw, 2.8rem);
}
}
.pn-ms-tableau {
padding-block: clamp(3rem, 8vw, 6rem);
background: var(--color-onyx);
}
.pn-ms-tableau__title {
font-size: clamp(1.375rem, 3.5vw, 2rem);
font-weight: 700;
color: var(--color-blanc);
letter-spacing: -0.02em;
margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.pn-ms-table-mobile {
display: none;
}
@media (max-width: 767px) {
.pn-ms-table-desktop {
display: none;
}
.pn-ms-table-mobile {
display: flex;
flex-direction: column;
gap: 3rem;
}
}
.pn-ms-table {
width: 100%;
border-collapse: collapse;
font-size: clamp(0.875rem, 1.75vw, 1rem);
}
.pn-ms-table thead th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-texte-muted);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pn-ms-table thead th:first-child {
color: transparent;
}
.pn-ms-table thead th:nth-child(2) {
color: var(--color-blanc);
}
.pn-ms-table thead th:last-child {
color: var(--color-blanc);
}
.pn-ms-table tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pn-ms-table tbody tr:last-child {
border-bottom: none;
}
.pn-ms-table tbody th,
.pn-ms-table tbody td {
padding: 1rem;
text-align: left;
line-height: 1.5;
vertical-align: middle;
}
.pn-ms-table tbody th {
font-weight: 600;
color: var(--color-texte);
font-size: 0.9375rem;
}
.pn-ms-table__cell--neg {
color: var(--color-texte-muted);
font-size: 0.9375rem;
}
.pn-ms-table__cell--neg::before {
content: "✕ ";
color: rgba(255, 255, 255, 0.55);
font-size: 0.875em;
}
.pn-ms-table__cell--pos {
color: var(--color-school-bus-yellow);
font-weight: 600;
font-size: 0.9375rem;
}
.pn-ms-table__cell--pos::before {
content: "✓ ";
color: var(--color-school-bus-yellow);
font-size: 0.8em;
}
.pn-ms-table-desktop .pn-ms-table thead th:last-child {
background: rgba(255, 195, 0, 0.07);
}
.pn-ms-table-desktop .pn-ms-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.025);
}
.pn-ms-table-desktop .pn-ms-table tbody td:last-child {
background: rgba(255, 195, 0, 0.04);
}
.pn-ms-table-mobile .pn-ms-table {
table-layout: fixed;
width: 100%;
font-size: 0.8125rem;
}
.pn-ms-table-mobile .pn-ms-table thead th {
padding: 0.5rem 0.75rem;
font-size: 0.6875rem;
}
.pn-ms-table-mobile .pn-ms-table thead th:first-child {
width: 38%;
}
.pn-ms-table-mobile .pn-ms-table thead th:nth-child(2) {
width: 27%;
}
.pn-ms-table-mobile .pn-ms-table thead th:last-child {
width: 35%;
background: rgba(255, 195, 0, 0.07);
}
.pn-ms-table-mobile .pn-ms-table tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pn-ms-table-mobile .pn-ms-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.025);
}
.pn-ms-table-mobile .pn-ms-table tbody tr:last-child {
border-bottom: none;
}
.pn-ms-table-mobile .pn-ms-table tbody th, .pn-ms-table-mobile .pn-ms-table tbody td {
padding: 0.5rem 0.75rem;
word-break: break-word;
overflow-wrap: break-word;
}
.pn-ms-table-mobile .pn-ms-table tbody th {
font-size: 0.8rem;
}
.pn-ms-table-mobile .pn-ms-table tbody td {
font-size: 0.775rem;
}
.pn-ms-table-mobile .pn-ms-table tbody td:last-child {
background: rgba(255, 195, 0, 0.04);
}
@media (min-width: 1024px) and (max-width: 1300px) {
.pn-main--ms .pn-container {
max-width: min(920px, 100% - 80px);
}
.pn-ms-tableau {
padding-block: clamp(1.5rem, 4vw, 3rem);
}
.pn-ms-tableau__title {
margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.pn-ms-table thead th {
padding: 0.5rem 1rem;
}
.pn-ms-table tbody th,
.pn-ms-table tbody td {
padding: 0.75rem 1rem;
}
}
@media (min-width: 1301px) {
.pn-ms-table {
font-size: clamp(1.05rem, 2.1vw, 1.2rem);
}
.pn-ms-table thead th {
font-size: 0.975rem;
}
.pn-ms-table tbody th {
font-size: 1.125rem;
}
.pn-ms-table__cell--neg, .pn-ms-table__cell--pos {
font-size: 1.125rem;
}
}
.pn-ms-table-group__label {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-amber);
margin: 0 0 0.75rem;
}
.pn-ms-cta-section {
background: var(--color-carbon-black);
padding-block: clamp(5rem, 12vw, 9rem);
}
.pn-ms-cta {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 52ch;
margin-inline: auto;
}
@media (min-width: 1024px) {
.pn-ms-cta {
flex-direction: row;
align-items: start;
gap: clamp(3rem, 6vw, 6rem);
max-width: 68rem;
margin-inline: 0;
}
}
.pn-ms-cta__hook {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.pn-ms-cta__hook {
flex: 0 0 42%;
}
}
.pn-ms-cta__hook-line {
margin: 0;
line-height: 1.25;
letter-spacing: -0.02em;
}
.pn-ms-cta__hook-line--1 {
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
font-weight: 400;
color: var(--color-texte-muted);
}
.pn-ms-cta__hook-line--2 {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
color: var(--color-amber);
}
.pn-ms-cta__hook-brand {
color: var(--color-blanc);
}
.pn-ms-cta__body {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.pn-ms-cta__body {
flex: 1;
}
}
.pn-ms-cta__body p {
font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
line-height: 1.7;
color: var(--color-texte);
margin: 0;
}
.pn-ms-accordeons-section {
padding-block: clamp(3rem, 8vw, 6rem);
background: var(--color-onyx);
}
.pn-ms-accordeons-section__label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(232, 232, 228, 0.85);
text-align: center;
margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.pn-ms-accordeons {
max-width: 46rem;
margin-inline: auto;
display: flex;
flex-direction: column;
}
.pn-ms-accordeon {
border-left: 2px solid rgba(255, 255, 255, 0.08);
transition: border-color 200ms ease;
}
.pn-ms-accordeon.is-open, .pn-ms-accordeon:hover {
border-left-color: var(--color-school-bus-yellow);
}
.pn-ms-accordeon__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.5rem 1rem;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
text-align: left;
transition: background 180ms ease;
}
.pn-ms-accordeon__trigger:hover {
background: rgba(255, 255, 255, 0.02);
}
.pn-ms-accordeon.is-open .pn-ms-accordeon__trigger {
border-bottom-color: transparent;
}
.pn-ms-accordeon__trigger-text {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
font-weight: 600;
color: var(--color-blanc);
line-height: 1.4;
}
.pn-ms-accordeon__chevron {
flex-shrink: 0;
color: var(--color-school-bus-yellow);
transition: transform 280ms ease;
}
.pn-ms-accordeon.is-open .pn-ms-accordeon__chevron {
transform: rotate(180deg);
}
.pn-ms-accordeon__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 280ms ease;
}
.pn-ms-accordeon.is-open .pn-ms-accordeon__body {
grid-template-rows: 1fr;
}
.pn-ms-accordeon__content {
overflow: hidden;
padding-inline: 1rem;
padding-block: 0;
transition: padding-block 280ms ease;
}
.pn-ms-accordeon.is-open .pn-ms-accordeon__content {
padding-block: 1rem 2rem;
}
.pn-ms-accordeon__content p {
font-size: clamp(0.9375rem, 2vw, 1rem);
line-height: 1.7;
color: var(--color-texte-muted);
margin: 0 0 1rem;
}
.pn-ms-accordeon__content p:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
html:has(.pn-main--ms) .site-header {
scroll-snap-align: start;
scroll-snap-stop: always;
}
html:has(.pn-main--ms) .site-footer {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
}
@media (max-width: 767px) {
.pn-ms-hero,
.pn-ms-presentation {
min-height: 0;
scroll-snap-align: none;
padding-block: clamp(4rem, 12vw, 7rem);
}
}
.pn-ms-tableau__title-break {
display: none;
}
@media (max-width: 430px) {
.pn-ms-tableau__title-break {
display: block;
}
}
/* Abstracts (tokens + forwards) */
#pn-analyse-hero,
#pn-analyse-zones,
#pn-analyse-chemins,
#pn-analyse-contact,
#pn-analyse-preanalyse {
scroll-margin-top: 0;
}
#pn-analyse-form {
scroll-margin-top: calc(var(--header-h, 160px) + 1.5rem);
}
@media (min-width: 768px) {
.pn-analyse-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.pn-analyse-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
overflow: hidden;
}
.pn-analyse-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 70% 50% at 50% 105%, rgba(255, 195, 0, 0.07) 0%, rgba(255, 195, 0, 0.025) 45%, transparent 65%), radial-gradient(ellipse 130% 130% at 50% 50%, rgba(255, 195, 0, 0.028) 0%, transparent 100%), repeating-linear-gradient(0deg, transparent 0px, transparent 55px, rgba(255, 255, 255, 0.03) 55px, rgba(255, 255, 255, 0.03) 56px);
background-size: auto;
}
.pn-analyse-hero__inner {
position: relative;
z-index: 1;
max-width: 52rem;
width: 100%;
padding-inline: 1rem;
}
.pn-analyse-hero__kicker {
margin: 0 0 1rem;
font-size: clamp(0.875rem, 2.25vw, 1rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-analyse-hero__title {
margin: 0 0 1.5rem;
font-size: clamp(2.25rem, 6vw, 4.5rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.035em;
color: var(--color-blanc);
text-shadow: 0 0 55px rgba(255, 195, 0, 0.1);
}
.pn-analyse-hero__lead {
margin: 0 auto;
font-size: clamp(1rem, 2.5vw, 1.25rem);
line-height: 1.6;
color: var(--color-texte-muted);
max-width: 44ch;
}
.pn-analyse-hero__deliverable {
margin: clamp(1.75rem, 4svh, 2.5rem) auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 3vw, 1.25rem);
font-size: 0.8125rem;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-analyse-hero__deliverable::before, .pn-analyse-hero__deliverable::after {
content: "";
flex: 0 0 clamp(1.5rem, 6vw, 3rem);
height: 1px;
}
.pn-analyse-hero__deliverable::before {
background: linear-gradient(to right, transparent, rgba(255, 195, 0, 0.55));
}
.pn-analyse-hero__deliverable::after {
background: linear-gradient(to left, transparent, rgba(255, 195, 0, 0.55));
}
.pn-analyse-hero__deliverable strong {
color: var(--color-school-bus-yellow);
font-weight: 600;
}
@media (min-width: 1600px) {
.pn-analyse-hero__title {
font-size: clamp(3rem, 6vw, 5.5rem);
}
.pn-analyse-hero__lead {
font-size: clamp(1.125rem, 2.75vw, 1.4rem);
}
}
.pn-analyse-section {
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-block: clamp(1.25rem, 3.5svh, 2.5rem);
}
.pn-analyse-section--band {
background-color: var(--color-carbon-black);
}
.pn-analyse-section > .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.pn-analyse-zones__header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-analyse-zones__header h2 {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
text-transform: none;
}
.pn-analyse-zones__header p {
font-size: 1rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
max-width: 52ch;
}
.pn-analyse-piliers {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}
.pn-analyse-pilier {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: clamp(1.1rem, 3vw, 1.6rem);
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-analyse-pilier:last-child {
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-analyse-pilier__body {
flex: 1;
min-width: 0;
}
.pn-analyse-pilier__name {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.15rem;
}
.pn-analyse-pilier__q {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-amber);
margin: 0 0 0.35rem;
}
.pn-analyse-pilier__zones {
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-texte-muted);
margin: 0;
}
.pn-analyse-pilier__check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(2.75rem, 6vw, 3.5rem);
height: clamp(2.75rem, 6vw, 3.5rem);
border-radius: 14px;
background: rgba(63, 180, 119, 0.09);
border: 1px solid rgba(63, 180, 119, 0.45);
box-shadow: 0 0 28px rgba(63, 180, 119, 0.14);
}
.pn-analyse-pilier__check svg {
width: 56%;
height: 56%;
display: block;
}
.pn-analyse-zones__more {
margin-top: clamp(1.75rem, 4svh, 2.75rem);
}
.pn-analyse-grille-trigger {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.2rem;
background: transparent;
border: 1px solid var(--color-bordure-forte);
border-radius: 999px;
color: var(--color-blanc);
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: border-color 180ms ease, background 180ms ease;
}
.pn-analyse-grille-trigger:hover {
border-color: var(--color-amber);
background: rgba(255, 255, 255, 0.03);
}
.pn-analyse-grille-trigger:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-analyse-grille-trigger__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--color-amber);
color: var(--color-onyx);
font-size: 1rem;
line-height: 1;
}
@media (min-width: 768px) {
.pn-analyse-pilier__zones {
font-size: 0.9375rem;
}
}
.pn-analyse-grille-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2.5rem);
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease;
}
.pn-analyse-grille-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.pn-analyse-grille-modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.9);
cursor: pointer;
}
.pn-analyse-grille-modal__box {
position: relative;
z-index: 1;
width: 100%;
max-width: 880px;
max-height: 88vh;
display: flex;
flex-direction: column;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 10px;
overflow: hidden;
transform: translateY(12px);
transition: transform 280ms ease;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.pn-analyse-grille-modal.is-open .pn-analyse-grille-modal__box {
transform: translateY(0);
}
.pn-analyse-grille-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: none;
color: var(--color-texte-muted);
cursor: pointer;
transition: background 180ms ease, color 180ms ease;
}
.pn-analyse-grille-modal__close svg {
width: 18px;
height: 18px;
}
.pn-analyse-grille-modal__close:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--color-blanc);
}
.pn-analyse-grille-modal__close:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-analyse-grille-modal__scroll {
overflow-y: auto;
padding: clamp(1.75rem, 4vw, 3rem);
}
.pn-analyse-grille-modal__eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-amber);
margin: 0 0 0.5rem;
}
.pn-analyse-grille-modal__title {
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
}
.pn-analyse-grille__pilier {
padding-top: clamp(1.25rem, 3vw, 1.75rem);
margin-top: clamp(1.25rem, 3vw, 1.75rem);
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-analyse-grille__pilier:first-of-type {
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.pn-analyse-grille__pilier-name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4rem 0.75rem;
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
font-weight: 700;
color: var(--color-blanc);
margin: 0 0 0.75rem;
}
.pn-analyse-grille__pilier-num {
font-size: 0.875rem;
font-weight: 700;
color: var(--color-school-bus-yellow);
letter-spacing: 0.08em;
}
@media (max-width: 767px) {
.pn-analyse-grille__pilier-num {
font-size: 1.375rem;
}
}
.pn-analyse-grille__pilier-q {
flex-basis: 100%;
font-size: 1.0625rem;
font-weight: 400;
color: var(--color-amber);
}
.pn-analyse-grille__zones {
margin: 0;
display: grid;
gap: 1rem;
}
.pn-analyse-grille__zone dt {
font-size: 1rem;
font-weight: 600;
color: var(--color-blanc);
margin-bottom: 0.25rem;
}
.pn-analyse-grille__zone dd {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-analyse-grille__synthese {
margin-top: clamp(1.5rem, 4vw, 2.25rem);
padding: clamp(1.25rem, 3vw, 1.6rem);
border-radius: 8px;
background: rgba(255, 195, 0, 0.06);
border: 1px solid rgba(255, 195, 0, 0.22);
}
.pn-analyse-grille__synthese-title {
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
font-weight: 700;
color: var(--color-blanc);
margin: 0 0 0.5rem;
}
.pn-analyse-grille__synthese p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-texte);
}
.pn-analyse-chemins__title {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
text-transform: none;
}
.pn-analyse-chemins__intro {
font-size: clamp(1rem, 2.25vw, 1.125rem);
line-height: 1.6;
color: var(--color-texte-muted);
margin: 0 0 clamp(2rem, 5svh, 3.5rem);
max-width: 52ch;
}
.pn-analyse-chemins__cards {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.pn-analyse-chemin {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: clamp(1.5rem, 3.5vw, 2.25rem);
border-top: 3px solid transparent;
background: var(--color-carbon-black);
}
.pn-analyse-chemin .pn-btn {
align-self: stretch;
width: 100%;
margin-top: auto;
}
.pn-analyse-chemin--a {
border-top-color: var(--color-school-bus-yellow);
}
.pn-analyse-chemin--b {
border-top-color: var(--color-copper);
}
.pn-analyse-chemin__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.pn-analyse-chemin__label {
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-blanc);
line-height: 1.3;
margin: 0;
}
.pn-analyse-chemin__price {
flex-shrink: 0;
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
color: var(--color-school-bus-yellow);
line-height: 1;
letter-spacing: -0.02em;
}
.pn-analyse-chemin__badge {
flex-shrink: 0;
display: inline-block;
font-size: clamp(1.25rem, 3.4vw, 1.75rem);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--color-copper);
line-height: 1;
}
.pn-analyse-chemin__desc {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-texte);
margin: 0;
}
@media (max-width: 767px) {
.pn-analyse-chemin .pn-btn {
align-self: stretch;
width: 100%;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 44px;
padding-block: 0.5rem;
text-align: center;
}
}
@media (min-width: 768px) {
.pn-analyse-chemins__cards {
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
}
}
.pn-analyse-contact {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6svh, 4rem);
}
.pn-analyse-contact__info .pn-label {
display: block;
margin-bottom: 1.5rem;
}
.pn-analyse-contact__prix-bloc {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: clamp(2rem, 5svh, 3rem);
}
.pn-analyse-contact__montant {
display: block;
font-size: clamp(3rem, 10vw, 5.5rem);
font-weight: 700;
color: var(--color-school-bus-yellow);
line-height: 1;
letter-spacing: -0.04em;
text-shadow: 0 0 60px rgba(255, 195, 0, 0.22);
}
.pn-analyse-contact__note-prix {
display: block;
font-size: 0.9375rem;
font-style: italic;
color: var(--color-texte-muted);
line-height: 1.55;
max-width: 28ch;
}
.pn-analyse-contact__etapes {
--pn-analyse-step-size: clamp(2rem, 5vw, 2.375rem);
--pn-analyse-step-inset: clamp(0.75rem, 2vw, 0.875rem);
--pn-analyse-step-track: calc(var(--pn-analyse-step-size) + var(--pn-analyse-step-inset));
position: relative;
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 3.5vw, 1.75rem);
margin-bottom: clamp(1.5rem, 4vw, 2rem);
padding-left: var(--pn-analyse-step-track);
}
.pn-analyse-contact__etapes::before {
content: "";
position: absolute;
left: calc(var(--pn-analyse-step-size) / 2 - 1px);
top: calc(var(--pn-analyse-step-size) / 2);
bottom: calc(var(--pn-analyse-step-size) / 4);
width: 2px;
background: linear-gradient(to bottom, var(--color-amber) 0%, rgba(192, 92, 44, 0.15) 100%);
}
.pn-analyse-contact__etape {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
}
.pn-analyse-contact__etape-num {
position: absolute;
left: calc(-1 * var(--pn-analyse-step-track));
top: 0.125em;
flex-shrink: 0;
width: var(--pn-analyse-step-size);
height: var(--pn-analyse-step-size);
display: flex;
align-items: center;
justify-content: center;
background: var(--color-carbon-black);
border: 2px solid var(--color-amber);
border-radius: 50%;
font-family: var(--font-slake);
font-size: clamp(0.75rem, 2.4vw, 0.875rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-amber);
letter-spacing: 0.03em;
line-height: 1;
z-index: 1;
}
.pn-analyse-contact__etape-title {
font-size: clamp(0.9375rem, 2.1vw, 1.0625rem);
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 0.25rem;
line-height: 1.35;
}
.pn-analyse-contact__etape-desc {
font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
}
.pn-analyse-contact__mutuel {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-texte);
font-style: italic;
line-height: 1.55;
margin: 0;
}
.pn-analyse-contact__form-col {
display: flex;
flex-direction: column;
}
.pn-analyse-contact__form-title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 2rem;
text-transform: none;
}
.pn-analyse-contact__success {
padding: 2rem;
border-left: 3px solid var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.05);
}
.pn-analyse-contact__success-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 0.75rem;
}
.pn-analyse-contact__success p:last-child {
font-size: 0.9375rem;
color: var(--color-texte-muted);
margin: 0;
line-height: 1.6;
}
.pn-analyse-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-analyse-form__error {
font-size: 0.9375rem;
color: #e05252;
margin: 0 0 0.75rem;
line-height: 1.5;
}
.pn-analyse-form__row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-analyse-form__label {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-texte-muted);
letter-spacing: 0.02em;
line-height: 1.3;
}
.pn-analyse-form__req {
color: var(--color-school-bus-yellow);
}
.pn-analyse-form__opt {
font-weight: 400;
font-size: 0.8125rem;
color: var(--color-texte-muted);
margin-left: 0.25rem;
opacity: 0.7;
}
.pn-analyse-form__hint {
font-size: 0.8125rem;
color: var(--color-texte-muted);
margin: 0.35rem 0 0;
line-height: 1.45;
}
.pn-analyse-form__choices {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.2rem;
}
.pn-analyse-form__choice {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--color-texte);
cursor: pointer;
}
.pn-analyse-form__choice input[type=radio] {
accent-color: var(--color-school-bus-yellow);
width: 1rem;
height: 1rem;
}
.pn-analyse-form__input,
.pn-analyse-form__textarea {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-bordure-forte);
border-radius: 4px;
padding: 0.625rem 0.75rem;
font-family: var(--font-slake);
font-size: 1rem;
color: var(--color-texte);
transition: border-color 180ms ease, background 180ms ease;
width: 100%;
appearance: none;
}
.pn-analyse-form__input::placeholder,
.pn-analyse-form__textarea::placeholder {
color: rgba(232, 232, 228, 0.3);
}
.pn-analyse-form__input:focus,
.pn-analyse-form__textarea:focus {
outline: none;
border-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.04);
}
.pn-analyse-form__textarea {
resize: vertical;
min-height: 6rem;
line-height: 1.6;
}
.pn-analyse-form__submit {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-top: 0.75rem;
}
@media (max-width: 400px) {
.pn-analyse-form__submit {
align-items: stretch;
}
.pn-analyse-form__submit .pn-btn {
width: 100%;
}
}
.pn-analyse-form__note {
font-size: 0.8125rem;
color: var(--color-texte-muted);
margin: 0;
line-height: 1.5;
}
.pn-analyse-form__note + .pn-analyse-form__note {
margin-top: 0.5rem;
}
@media (min-width: 1024px) {
.pn-analyse-contact {
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: start;
}
}
.pn-analyse-preanalyse__header {
margin-bottom: clamp(2rem, 5svh, 3.5rem);
}
.pn-analyse-preanalyse__header .pn-label {
display: block;
margin-bottom: 1.5rem;
}
.pn-analyse-preanalyse__header h2 {
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-blanc);
margin: 0 0 0.75rem;
text-transform: none;
}
.pn-analyse-preanalyse__header p {
font-size: 1rem;
line-height: 1.65;
color: var(--color-texte-muted);
margin: 0;
max-width: 52ch;
}
.pn-analyse-preanalyse__cta {
margin-top: clamp(1.5rem, 4svh, 2.5rem);
}
.pn-analyse-preanalyse__cta .pn-btn {
width: auto;
max-width: 100%;
height: auto;
min-height: 40px;
padding-block: 0.65rem;
padding-inline: clamp(1.5rem, 4vw, 2.5rem);
white-space: normal;
text-align: center;
}
@media (min-width: 768px) {
html:has(.pn-main--analyse) .site-header {
scroll-snap-align: start;
scroll-snap-stop: always;
}
html:has(.pn-main--analyse) .site-footer {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
}
@media (max-width: 767px) {
.pn-analyse-hero {
min-height: 0;
padding-block: clamp(4rem, 12vw, 7rem);
}
.pn-analyse-section {
min-height: 0;
scroll-snap-align: none;
display: block;
padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
}
.pn-main--analyse .pn-devis-steps--compact {
--pn-diamond: clamp(46px, 12vw, 58px);
--pn-steps-gap: clamp(0.75rem, 3.5vw, 1.25rem);
max-width: 480px;
}
.pn-main--analyse .pn-devis-steps--compact .pn-devis-step__diamond {
width: var(--pn-diamond);
height: var(--pn-diamond);
font-size: clamp(1.05rem, 3.4vw, 1.3rem);
}
.pn-main--analyse .pn-devis-steps--compact .pn-devis-step__diamond::before {
inset: 4px;
border-width: 2.5px;
border-radius: 9px;
}
.pn-main--analyse .pn-devis-steps--compact .pn-devis-step.is-active .pn-devis-step__diamond {
font-size: clamp(1.25rem, 4vw, 1.5rem);
}
.pn-main--analyse .pn-devis-steps--compact .pn-devis-step__label {
font-size: clamp(0.85rem, 2.7vw, 1rem);
line-height: 1.3;
}
.pn-main--analyse .pn-devis-steps--compact .pn-devis-step:not(:last-child)::after {
top: calc(var(--pn-diamond) / 2);
left: calc(50% + var(--pn-diamond) / 2 + 6px);
width: calc(100% + var(--pn-steps-gap) - var(--pn-diamond) - 12px);
height: 2.5px;
}
/* Abstracts (tokens + forwards) */
.pn-main--preanalyse {
background: var(--color-onyx);
}
.pn-preanalyse [hidden] {
display: none !important;
}
.pn-preanalyse-shell {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
align-items: flex-start;
padding-block: clamp(2.5rem, 7svh, 5.5rem);
position: relative;
overflow: hidden;
}
.pn-preanalyse-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 60% 45% at 50% -5%, rgba(255, 195, 0, 0.07) 0%, rgba(255, 195, 0, 0.02) 45%, transparent 65%), repeating-linear-gradient(0deg, transparent 0px, transparent 55px, rgba(255, 255, 255, 0.022) 55px, rgba(255, 255, 255, 0.022) 56px);
}
.pn-preanalyse-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
margin-inline: auto;
}
.pn-preanalyse-intro {
text-align: center;
margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.pn-preanalyse-intro__kicker {
font-size: 0.8125rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
margin-bottom: 0.75rem;
}
.pn-preanalyse-intro__title {
font-size: clamp(1.75rem, 4.5vw, 2.6rem);
line-height: 1.12;
color: var(--color-blanc);
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.pn-preanalyse-intro__title {
white-space: nowrap;
letter-spacing: -0.02em;
font-size: clamp(1.5rem, 2.35vw, 1.875rem);
}
}
.pn-preanalyse-intro__lead {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-texte-muted);
max-width: 48ch;
margin-inline: auto;
}
@media (min-width: 768px) {
.pn-preanalyse-intro__lead {
max-width: 50ch;
}
}
.pn-preanalyse-progress {
margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.pn-preanalyse-progress__bar {
height: 3px;
width: 100%;
background: var(--color-bordure-subtile);
border-radius: 999px;
overflow: hidden;
}
.pn-preanalyse-progress__fill {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--color-school-bus-yellow) 0%, var(--color-copper) 100%);
box-shadow: 0 0 12px rgba(255, 195, 0, 0.35);
transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pn-preanalyse-progress__label {
margin-top: 0.6rem;
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: var(--color-texte-muted);
text-align: right;
}
.pn-preanalyse-q {
opacity: 0;
transform: translateY(10px);
transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pn-preanalyse-q.is-in {
opacity: 1;
transform: none;
}
.pn-preanalyse-q__title {
font-size: clamp(1.25rem, 3vw, 1.6rem);
line-height: 1.3;
color: var(--color-blanc);
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
@media (prefers-reduced-motion: reduce) {
.pn-preanalyse-q {
transition: none;
opacity: 1;
transform: none;
}
}
.pn-preanalyse-choices {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.pn-preanalyse-choice {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
text-align: left;
padding: clamp(0.875rem, 2.5vw, 1.125rem) clamp(1rem, 3vw, 1.35rem);
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
color: var(--color-texte);
font-size: 1rem;
line-height: 1.4;
cursor: pointer;
transition: border-color 200ms ease, background-color 200ms ease, transform 140ms ease, box-shadow 220ms ease;
}
.pn-preanalyse-choice::before {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--color-bordure-forte);
background: var(--color-onyx);
transition: border-color 200ms ease, background-color 200ms ease, box-shadow 220ms ease;
}
.pn-preanalyse-choice:hover {
border-color: rgba(255, 195, 0, 0.4);
background: var(--color-graphite);
transform: translateY(-1px);
}
.pn-preanalyse-choice:focus-visible {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.2);
}
.pn-preanalyse-choice.is-selected {
border-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.06);
box-shadow: 0 0 0 1px rgba(255, 195, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.pn-preanalyse-choice.is-selected::before {
border-color: var(--color-school-bus-yellow);
background: var(--color-school-bus-yellow);
box-shadow: 0 0 14px rgba(255, 195, 0, 0.5), inset 0 0 0 3px var(--color-onyx);
}
.pn-preanalyse-choice__label {
flex: 1;
}
.pn-preanalyse-other {
margin-top: 0.25rem;
}
.pn-preanalyse-other__input {
width: 100%;
padding: 0.875rem 1.1rem;
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
color: var(--color-texte);
font-size: 1rem;
font-family: inherit;
}
.pn-preanalyse-other__input:focus-visible {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.pn-preanalyse-text__input {
width: 100%;
padding: 1rem 1.2rem;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
color: var(--color-texte);
font-size: 1rem;
line-height: 1.6;
font-family: inherit;
resize: vertical;
min-height: 7rem;
}
.pn-preanalyse-text__input::placeholder {
color: rgba(232, 232, 228, 0.4);
}
.pn-preanalyse-text__input:focus-visible {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.pn-preanalyse-text__hint {
margin-top: 0.6rem;
font-size: 0.8125rem;
color: var(--color-texte-muted);
}
.pn-preanalyse-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.pn-preanalyse-nav__back {
margin-right: auto;
}
.pn-preanalyse-nav__next {
margin-left: auto;
}
.pn-preanalyse-trap {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pn-preanalyse-loading {
min-height: 40svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.75rem;
}
.pn-preanalyse-loading__pulse {
width: 56px;
height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 195, 0, 0.9) 0%, rgba(255, 195, 0, 0.1) 60%, transparent 72%);
box-shadow: 0 0 30px rgba(255, 195, 0, 0.4);
animation: pn-preanalyse-pulse 1.6s ease-in-out infinite;
}
.pn-preanalyse-loading__message {
font-size: clamp(1.05rem, 2.4vw, 1.3rem);
color: var(--color-texte);
max-width: 36ch;
transition: opacity 280ms ease;
background: linear-gradient(90deg, var(--color-school-bus-yellow) 0%, var(--color-copper) 50%, var(--color-school-bus-yellow) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: pn-preanalyse-shimmer 4s linear infinite;
}
@keyframes pn-preanalyse-pulse {
0%, 100% {
transform: scale(0.85);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes pn-preanalyse-shimmer {
to {
background-position: 200% center;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-preanalyse-loading__pulse {
animation: none;
}
.pn-preanalyse-loading__message {
animation: none;
-webkit-text-fill-color: currentColor;
}
}
.pn-preanalyse-results {
display: flex;
flex-direction: column;
gap: clamp(1rem, 3vw, 1.5rem);
font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
font-variant-ligatures: none;
}
.pn-preanalyse-results__note {
font-size: 0.8125rem;
color: var(--color-texte-muted);
text-align: center;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--color-bordure-forte);
border-radius: 10px;
}
.pn-preanalyse-block {
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 16px;
padding: clamp(1.25rem, 3.5vw, 1.85rem);
}
.pn-preanalyse-block__kicker {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
margin: 0 0 0.4rem;
}
.pn-preanalyse-block__title {
font-size: clamp(1.1rem, 2.6vw, 1.35rem);
color: var(--color-blanc);
margin-bottom: 0.75rem;
}
.pn-preanalyse-block__body {
color: var(--color-texte);
line-height: 1.65;
}
.pn-preanalyse-block__body strong {
color: var(--color-school-bus-yellow);
font-weight: 600;
}
.pn-preanalyse-block__paragraph {
margin: 0 0 0.85rem;
}
.pn-preanalyse-block__paragraph:last-child {
margin-bottom: 0;
}
.pn-preanalyse-block__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.pn-preanalyse-block__list li {
position: relative;
padding-left: 1.5rem;
color: var(--color-texte);
line-height: 1.6;
}
.pn-preanalyse-block__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-copper);
}
.pn-preanalyse-block__list--ordered {
counter-reset: pn-liste-ordonnee;
}
.pn-preanalyse-block__list--ordered li {
counter-increment: pn-liste-ordonnee;
}
.pn-preanalyse-block__list--ordered li::before {
content: counter(pn-liste-ordonnee) ".";
top: 0;
width: auto;
height: auto;
border-radius: 0;
background: none;
color: var(--color-copper);
font-weight: 600;
}
.pn-preanalyse-fixed {
background: linear-gradient(180deg, rgba(255, 195, 0, 0.06) 0%, rgba(255, 195, 0, 0.015) 100%);
border: 1px solid rgba(255, 195, 0, 0.3);
border-radius: 16px;
padding: clamp(1.4rem, 3.5vw, 2rem);
}
.pn-preanalyse-fixed__title {
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
color: var(--color-blanc);
margin-bottom: 0.85rem;
}
.pn-preanalyse-fixed__intro {
color: var(--color-texte);
line-height: 1.6;
margin: 0 0 1rem;
}
.pn-preanalyse-fixed__outro {
color: var(--color-texte-muted);
line-height: 1.6;
font-size: 0.9375rem;
margin: 1rem 0 0;
}
.pn-preanalyse-fixed__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pn-preanalyse-fixed__list li {
position: relative;
padding-left: 1.6rem;
color: var(--color-texte);
line-height: 1.6;
}
.pn-preanalyse-fixed__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-school-bus-yellow);
box-shadow: 0 0 10px rgba(255, 195, 0, 0.5);
}
.pn-preanalyse-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
margin-top: clamp(0.5rem, 2vw, 1rem);
}
.pn-preanalyse-cta .pn-btn--primary {
width: auto;
height: auto;
padding-block: 0.9rem;
padding-inline: 2.25rem;
white-space: normal;
}
.pn-preanalyse-cta .pn-preanalyse-print,
.pn-preanalyse-cta .pn-preanalyse-restart {
color: var(--color-texte-muted);
}
@media (hover: hover) {
.pn-preanalyse-cta .pn-preanalyse-print:hover,
.pn-preanalyse-cta .pn-preanalyse-restart:hover {
color: var(--color-texte);
}
}
.pn-preanalyse-error {
text-align: center;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.pn-preanalyse-error p {
color: var(--color-texte);
}
.pn-preanalyse-noscript {
text-align: center;
color: var(--color-texte-muted);
padding: 2rem 0;
}
.pn-preanalyse-noscript a {
color: var(--color-school-bus-yellow);
}
.pn-preanalyse-results__timestamp {
display: none;
}
.pn-preanalyse-print-header {
display: none;
}
@media print {
html body .site-header,
html body .site-footer,
html body header[data-header],
html body footer,
.site-header,
.site-footer,
header[data-header],
footer,
.pn-preanalyse-intro,
.pn-preanalyse-progress,
.pn-preanalyse-form,
.pn-preanalyse-loading,
.pn-preanalyse-error,
.pn-preanalyse-cta,
.pn-preanalyse-print,
.pn-preanalyse-results__note {
display: none !important;
}
body,
.pn-main--preanalyse,
.pn-preanalyse-shell,
.pn-preanalyse-container {
background: #fff !important;
color: #111 !important;
}
.pn-preanalyse-shell::before {
display: none !important;
}
.pn-preanalyse-print-header {
display: block !important;
width: 100vw;
margin-left: calc(50% - 50vw);
padding-inline: 2rem;
margin-bottom: 1.5rem;
}
.pn-preanalyse-print-header__brand {
margin: 0 0 0.4rem;
font-size: 1.25rem;
font-weight: 700;
color: #000 !important;
white-space: nowrap;
}
.pn-preanalyse-print-header__title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: #000 !important;
}
.pn-preanalyse-results__timestamp {
display: block !important;
font-size: 0.8125rem;
color: #555 !important;
margin-bottom: 1rem;
}
.pn-preanalyse-block,
.pn-preanalyse-fixed {
background: #fff !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
color: #111 !important;
break-inside: avoid;
page-break-inside: avoid;
}
.pn-preanalyse-block__title,
.pn-preanalyse-fixed__title {
color: #000 !important;
}
.pn-preanalyse-block__kicker {
color: #b87333 !important;
}
.pn-preanalyse-block__body,
.pn-preanalyse-block__list li,
.pn-preanalyse-fixed__list li,
.pn-preanalyse-fixed__intro,
.pn-preanalyse-fixed__outro {
color: #222 !important;
}
.pn-preanalyse-block__list li::before,
.pn-preanalyse-fixed__list li::before {
background: #b87333 !important;
box-shadow: none !important;
}
.pn-preanalyse-block__list--ordered li::before {
background: none !important;
color: #b87333 !important;
}
}
.pn-preanalyse-suite {
margin-top: clamp(3rem, 8vw, 4.5rem);
padding: clamp(1.75rem, 5vw, 2.75rem);
border: 1px solid var(--color-bordure-subtile);
border-top: 3px solid var(--color-amber);
border-radius: 14px;
background: rgba(255, 195, 0, 0.03);
}
.pn-preanalyse-suite[hidden] {
display: none;
}
.pn-preanalyse-suite__kicker {
margin: 0 0 0.75rem;
}
.pn-preanalyse-suite__title {
margin: 0 0 1.5rem;
font-size: clamp(1.45rem, 3.6vw, 2rem);
font-weight: 700;
line-height: 1.25;
color: var(--color-blanc);
}
.pn-preanalyse-suite__title em {
font-style: normal;
color: var(--color-school-bus-yellow);
}
.pn-preanalyse-suite__body p {
margin: 0 0 1rem;
line-height: 1.65;
color: var(--color-texte);
max-width: 62ch;
}
.pn-preanalyse-suite__points {
list-style: none;
margin: 1.5rem 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.pn-preanalyse-suite__points li {
position: relative;
padding-left: 1.4rem;
line-height: 1.55;
color: var(--color-texte);
}
.pn-preanalyse-suite__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 8px;
height: 8px;
transform: rotate(45deg);
background: var(--color-school-bus-yellow);
border-radius: 2px;
}
.pn-preanalyse-suite__terms {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 3px solid var(--color-amber);
background: rgba(255, 255, 255, 0.02);
}
.pn-preanalyse-suite__terms p {
margin: 0 0 0.5rem;
line-height: 1.6;
}
.pn-preanalyse-suite__terms p:last-child {
margin-bottom: 0;
}
.pn-preanalyse-suite__price strong {
color: var(--color-school-bus-yellow);
font-size: 1.15em;
}
.pn-preanalyse-suite__promo {
font-size: 0.92rem;
color: var(--color-texte-muted);
}
.pn-preanalyse-suite__cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1.5rem;
}
/* Abstracts (tokens + forwards) */
.pn-main--devis {
background: var(--color-onyx);
}
.pn-devis {
position: relative;
padding-block: clamp(2.5rem, 7vw, 5rem);
overflow: hidden;
}
.pn-devis::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 34% at 50% 0%, rgba(255, 195, 0, 0.06), transparent 70%);
}
.pn-devis__inner {
position: relative;
max-width: 760px;
}
.pn-devis__head {
margin-bottom: clamp(2rem, 5vw, 3rem);
text-align: center;
}
.pn-devis__title {
margin: 0.75rem 0;
font-size: clamp(1.8rem, 4.5vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-blanc);
}
@media (max-width: 767px) {
.pn-devis__title {
line-height: 1.25;
}
}
.pn-devis__lead {
margin: 0 auto;
max-width: 52ch;
font-size: clamp(1rem, 2.4vw, 1.15rem);
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-devis-ring {
display: none;
}
@media (max-width: 767px) {
ol.pn-devis-steps {
display: none;
}
.pn-devis-ring {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0 0 1.5rem;
}
.pn-devis-ring__dial {
--pn-ring: 90deg;
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--color-school-bus-yellow) 0 var(--pn-ring), rgba(255, 255, 255, 0.12) var(--pn-ring) 360deg);
}
.pn-devis-ring__dial::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background: var(--color-onyx);
}
.pn-devis-ring__count {
position: relative;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-blanc);
}
.pn-devis-ring__label {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-texte);
}
.pn-devis-ring.is-confirm .pn-devis-ring__dial {
background: rgb(63, 180, 119);
}
.pn-devis-ring.is-confirm .pn-devis-ring__count {
color: rgb(63, 180, 119);
font-size: 1.5rem;
}
}
.pn-devis-steps {
--pn-steps-gap: 0px;
list-style: none;
margin: 0 auto clamp(2.25rem, 5vw, 3rem);
padding: 0;
display: flex;
column-gap: var(--pn-steps-gap);
max-width: 600px;
}
.pn-devis-step {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.pn-devis-step:not(:last-child)::after {
content: "";
position: absolute;
top: 20px;
left: calc(50% + 26px);
width: calc(100% + var(--pn-steps-gap) - 52px);
height: 2px;
background: var(--color-bordure-subtile);
transition: background-color 220ms ease;
}
.pn-devis-step.is-done:not(:last-child)::after {
background: var(--color-amber);
}
.pn-devis-step__diamond {
position: relative;
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-weight: 700;
font-size: 0.95rem;
color: var(--color-texte-muted);
z-index: 1;
transition: color 220ms ease, font-size 220ms ease;
}
.pn-devis-step__diamond::before {
content: "";
position: absolute;
inset: 3px;
z-index: -1;
border: 2px solid var(--color-bordure-forte);
border-radius: 8px;
transform: rotate(45deg);
background: var(--color-carbon-black);
transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.pn-devis-step.is-active .pn-devis-step__diamond {
color: var(--color-amber);
font-size: 1.15rem;
}
.pn-devis-step.is-active .pn-devis-step__diamond::before {
border-color: var(--color-goldenrod);
border-width: 2.5px;
background: rgba(255, 195, 0, 0.1);
box-shadow: 0 0 22px rgba(255, 195, 0, 0.16);
}
.pn-devis-step.is-done .pn-devis-step__diamond {
color: var(--color-amber);
}
.pn-devis-step.is-done .pn-devis-step__diamond::before {
border-color: var(--color-amber);
background: rgba(255, 195, 0, 0.08);
}
.pn-devis-step--confirm.is-active .pn-devis-step__diamond {
color: #3fb477;
}
.pn-devis-step--confirm.is-active .pn-devis-step__diamond::before {
border-color: rgba(63, 180, 119, 0.85);
background: rgba(63, 180, 119, 0.1);
box-shadow: 0 0 22px rgba(63, 180, 119, 0.2);
}
.pn-devis-step--confirm.is-active .pn-devis-step__label {
color: var(--color-blanc);
font-weight: 600;
}
.pn-devis-step__label {
font-size: 0.78rem;
line-height: 1.25;
color: var(--color-texte-muted);
}
.pn-devis-step.is-active .pn-devis-step__label {
color: var(--color-blanc);
font-weight: 600;
}
@media (max-width: 575px) {
.pn-devis-steps {
--pn-steps-gap: 0.5rem;
}
.pn-devis-step__diamond {
width: 34px;
height: 34px;
font-size: 0.85rem;
}
.pn-devis-step.is-active .pn-devis-step__diamond {
font-size: 1rem;
}
.pn-devis-step:not(:last-child)::after {
top: 17px;
left: calc(50% + 22px);
width: calc(100% + var(--pn-steps-gap) - 44px);
}
.pn-devis-step__label {
font-size: 0.72rem;
}
}
.pn-devis-steps--compact {
--pn-steps-gap: clamp(0.6rem, 3vw, 1rem);
max-width: 420px;
}
.pn-devis-steps--compact .pn-devis-step__diamond {
width: 34px;
height: 34px;
font-size: 0.85rem;
}
.pn-devis-steps--compact .pn-devis-step.is-active .pn-devis-step__diamond {
font-size: 1rem;
}
.pn-devis-steps--compact .pn-devis-step:not(:last-child)::after {
top: 17px;
left: calc(50% + 22px);
width: calc(100% + var(--pn-steps-gap) - 44px);
}
.pn-devis-steps--compact .pn-devis-step__label {
font-size: 0.78rem;
}
.pn-devis-flash {
margin: 0 0 clamp(1.5rem, 4vw, 2rem);
padding: 0.95rem 1.15rem;
border-radius: 10px;
font-size: 0.95rem;
line-height: 1.55;
}
.pn-devis-flash strong {
color: var(--color-blanc);
}
.pn-devis-flash--ok {
background: rgba(63, 180, 119, 0.1);
border: 1px solid rgba(63, 180, 119, 0.4);
color: #a9e5c8;
}
.pn-devis-flash--err {
background: rgba(224, 86, 78, 0.1);
border: 1px solid rgba(224, 86, 78, 0.4);
color: #f2b3ae;
}
.pn-devis__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pn-devis-panel {
min-width: 0;
margin: 0;
border: 1px solid var(--color-bordure-subtile);
border-top: 3px solid var(--color-amber);
border-radius: 14px;
background: rgba(255, 255, 255, 0.015);
padding: clamp(1.25rem, 3.5vw, 2rem);
display: grid;
gap: clamp(1.15rem, 3vw, 1.6rem);
}
.pn-devis-panel[hidden] {
display: none;
}
.pn-devis-panel__title {
padding: 0;
margin: 0;
font-size: 1.35rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-devis-panel__title:focus {
outline: none;
}
.pn-devis-field {
display: block;
min-width: 0;
}
.pn-devis-field[hidden] {
display: none;
}
.pn-devis-field__label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-devis-req {
color: var(--color-school-bus-yellow);
}
.pn-devis-opt {
font-weight: 400;
font-size: 0.8rem;
color: var(--color-texte-muted);
}
.pn-devis-opt--block {
display: block;
}
.pn-devis-field__err {
margin: 0.5rem 0 0;
padding: 0.4rem 0.65rem;
font-size: 0.85rem;
line-height: 1.4;
font-weight: 600;
color: #ffc9c4;
background: rgba(224, 86, 78, 0.14);
border-left: 3px solid #e0564e;
border-radius: 0 8px 8px 0;
}
.pn-devis-field__err .pn-devis-err__fleche {
color: #ff6f64;
}
.pn-devis-field__err[hidden] {
display: none;
}
.pn-devis-grid2 {
display: grid;
gap: clamp(1.15rem, 3vw, 1.6rem);
}
@media (min-width: 576px) {
.pn-devis-grid2 {
grid-template-columns: 1fr 1fr;
align-items: end;
}
}
.pn-devis-input {
width: 100%;
padding: 0.72rem 0.9rem;
background: var(--color-carbon-black);
color: var(--color-blanc);
border: 1px solid var(--color-bordure-forte);
border-radius: 9px;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pn-devis-input::placeholder {
color: rgba(232, 232, 228, 0.45);
}
.pn-devis-input:focus {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.pn-devis-input.is-invalid {
border-color: #ff6f64;
box-shadow: 0 0 0 3px rgba(224, 86, 78, 0.28);
}
textarea.pn-devis-input {
resize: vertical;
min-height: 92px;
}
select.pn-devis-input {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--color-texte-muted) 50%), linear-gradient(135deg, var(--color-texte-muted) 50%, transparent 50%);
background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.4rem;
}
.pn-devis-choices {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 576px) {
.pn-devis-choices {
grid-template-columns: repeat(2, 1fr);
}
}
.pn-devis-choice {
position: relative;
}
.pn-devis-choice input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.pn-devis-choice__box {
display: flex;
align-items: center;
gap: 0.65rem;
height: 100%;
padding: 0.95rem 1.05rem;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.35;
color: var(--color-blanc);
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 10px;
transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.pn-devis-choice__dot {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--color-bordure-forte);
transition: border-color 160ms ease, background 160ms ease;
}
input:checked + .pn-devis-choice__box {
border-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.09);
box-shadow: inset 0 0 0 1px var(--color-school-bus-yellow);
}
input:checked + .pn-devis-choice__box .pn-devis-choice__dot {
border-color: var(--color-school-bus-yellow);
background: radial-gradient(circle, var(--color-school-bus-yellow) 0 45%, transparent 47%);
}
input:focus-visible + .pn-devis-choice__box {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
@media (hover: hover) {
.pn-devis-choice:hover .pn-devis-choice__box {
border-color: var(--color-school-bus-yellow);
background: rgba(255, 255, 255, 0.035);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.pn-devis-choice:hover .pn-devis-choice__dot {
border-color: var(--color-school-bus-yellow);
}
}
.pn-devis-radios {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pn-devis-radio {
position: relative;
}
.pn-devis-radio input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.pn-devis-radio span {
display: inline-block;
padding: 0.55rem 1.1rem;
border: 1px solid var(--color-bordure-forte);
border-radius: 999px;
color: var(--color-texte);
font-size: 0.92rem;
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.pn-devis-radio input:checked + span {
border-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.09);
color: var(--color-blanc);
}
.pn-devis-radio input:focus-visible + span {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-devis-radio input.is-invalid + span {
border-color: #ff6f64;
background: rgba(224, 86, 78, 0.1);
}
@media (hover: hover) {
.pn-devis-radio:hover span {
border-color: var(--color-school-bus-yellow);
color: var(--color-blanc);
}
}
.pn-devis-consent__card {
display: flex;
gap: 1rem;
padding: 1rem 1.15rem;
background: rgba(255, 195, 0, 0.04);
border: 1px solid rgba(255, 195, 0, 0.22);
border-radius: 12px;
cursor: pointer;
transition: border-color 160ms ease;
}
@media (hover: hover) {
.pn-devis-consent__card:hover {
border-color: rgba(255, 195, 0, 0.45);
}
}
.pn-devis-consent__check {
flex-shrink: 0;
margin-top: 0.15rem;
width: 20px;
height: 20px;
accent-color: var(--color-school-bus-yellow);
}
.pn-devis-consent__headline {
display: block;
font-weight: 600;
color: var(--color-blanc);
margin-bottom: 0.15rem;
}
.pn-devis-consent__text {
display: block;
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-texte-muted);
}
.pn-devis-consent__text a {
color: var(--color-school-bus-yellow);
}
.pn-devis-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.pn-devis-nav--confirm {
justify-content: flex-start;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.pn-devis-nav--confirm .pn-btn.pn-btn--auto {
width: 100%;
justify-content: center;
}
}
.pn-devis__reassure {
margin: 0.75rem 0 0;
font-size: 0.85rem;
color: var(--color-texte-muted);
text-align: center;
}
.pn-devis__req-note {
margin: 0 0 1rem;
font-size: 0.8rem;
color: var(--color-texte-muted);
}
.pn-devis__sla {
margin: 0.75rem 0 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-blanc);
text-align: right;
}
@media (max-width: 575px) {
.pn-devis__sla {
text-align: center;
}
}
.pn-devis-recap {
position: relative;
margin-top: clamp(1.5rem, 4vw, 2rem);
padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.25rem, 3.5vw, 1.75rem);
background: rgba(255, 195, 0, 0.03);
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
overflow: hidden;
}
.pn-devis-recap::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 2.4rem;
background: var(--color-amber);
border-radius: 0 4px 4px 0;
}
.pn-devis-recap[hidden] {
display: none;
}
.pn-devis-recap__title {
margin: 0 0 0.75rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-devis-recap__list {
margin: 0;
}
.pn-devis-recap__row {
display: grid;
grid-template-columns: minmax(120px, 34%) 1fr;
gap: 1rem;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pn-devis-recap__row:last-child {
border-bottom: 0;
}
.pn-devis-recap__row dt {
font-size: 0.82rem;
color: var(--color-texte-muted);
padding-top: 0.1rem;
}
.pn-devis-recap__row dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-texte);
overflow-wrap: anywhere;
}
@media (max-width: 575px) {
.pn-devis-recap__row {
grid-template-columns: 1fr;
gap: 0.1rem;
}
}
.pn-devis-panel--confirm {
border-top-color: #3fb477;
}
.pn-devis-confirm {
display: grid;
gap: clamp(1.1rem, 3vw, 1.5rem);
}
@media (min-width: 768px) {
.pn-devis-confirm {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: start;
}
}
.pn-devis-confirm__block {
min-width: 0;
padding: clamp(1rem, 2.5vw, 1.35rem);
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 10px;
}
.pn-devis-confirm__title {
margin: 0 0 0.75rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-devis-confirm__dl {
margin: 0;
}
.pn-devis-confirm__row {
display: grid;
grid-template-columns: minmax(110px, 36%) 1fr;
gap: 1rem;
padding: 0.45rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pn-devis-confirm__row:last-child {
border-bottom: 0;
}
.pn-devis-confirm__row dt {
font-size: 0.82rem;
color: var(--color-texte-muted);
padding-top: 0.1rem;
}
.pn-devis-confirm__row dd {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-texte);
overflow-wrap: anywhere;
}
@media (max-width: 575px) {
.pn-devis-confirm__row {
grid-template-columns: 1fr;
gap: 0.1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pn-devis-step::after,
.pn-devis-step__diamond,
.pn-devis-step__diamond::before,
.pn-devis-choice__box,
.pn-devis-choice__dot,
.pn-devis-input,
.pn-devis-radio span,
.pn-devis-consent__card {
transition: none;
}
}
/* Abstracts (tokens + forwards) */
.pn-apropos-section {
padding-block: var(--section-padding);
}
.pn-apropos-section--band {
background: var(--color-carbon-black);
}
.pn-apropos-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
}
.pn-apropos-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 75% 55% at 50% 20%, rgba(192, 92, 44, 0.055) 0%, rgba(192, 92, 44, 0.015) 45%, transparent 70%), radial-gradient(ellipse 120% 120% at 50% 50%, rgba(255, 195, 0, 0.022) 0%, transparent 100%);
background-size: auto;
}
.pn-apropos-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.05;
background-image: url("data:image/svg+xml,");
background-size: 180px 180px;
}
.pn-apropos-hero__inner {
position: relative;
z-index: 1;
max-width: 52rem;
width: 100%;
padding-inline: 1rem;
}
.pn-apropos-hero__pre-kicker {
font-family: var(--font-ostra);
font-size: clamp(0.875rem, 1.5vw, 1rem);
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(232, 232, 228, 0.85);
margin: 0 0 0.75rem;
}
.pn-apropos-hero__kicker {
margin: 0 0 1rem;
word-spacing: 0.22em;
}
.pn-apropos-hero__title {
font-size: clamp(1.75rem, 6vw, 3.5rem);
font-weight: 600;
line-height: 1.15;
text-transform: uppercase;
color: var(--color-blanc);
margin: 0 0 1.5rem;
}
.pn-apropos-hero__title em {
font-style: normal;
color: var(--color-school-bus-yellow);
}
.pn-apropos-hero__lead {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-texte-muted);
max-width: 50ch;
margin-inline: auto;
line-height: 1.65;
}
@media (min-width: 1024px) {
.pn-apropos-hero__inner {
max-width: 56rem;
transform: translateY(-2rem);
}
.pn-apropos-hero__lead {
max-width: 44ch;
}
}
@media (min-width: 1024px) and (max-width: 1300px) {
.pn-apropos-hero__title {
font-size: clamp(1.575rem, 5.4vw, 3.15rem);
}
}
@media (min-width: 1301px) {
.pn-apropos-hero__title em {
white-space: nowrap;
}
}
.pn-apropos-vision {
background: var(--color-onyx);
}
.pn-apropos-vision__grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 768px) {
.pn-apropos-vision__grid {
flex-direction: row;
align-items: flex-start;
gap: 4rem;
}
}
@media (min-width: 1301px) {
.pn-apropos-vision__grid {
gap: clamp(3rem, 6vw, 5rem);
}
}
@media (min-width: 768px) {
.pn-apropos-vision__head {
width: 38%;
flex-shrink: 0;
}
}
.pn-apropos-vision__title {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.15;
color: var(--color-blanc);
margin: 0;
}
.pn-apropos-vision__title::after {
content: "";
display: block;
width: 2.5rem;
height: 3px;
background: var(--color-amber);
margin-top: 1rem;
}
.pn-apropos-vision__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pn-apropos-vision__text p {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-texte);
line-height: 1.7;
max-width: 60ch;
}
.pn-apropos-systeme__header {
margin-bottom: 3rem;
}
.pn-apropos-systeme__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-blanc);
margin: 0.75rem 0 0.75rem;
}
.pn-apropos-systeme__intro {
color: var(--color-texte-muted);
font-size: clamp(0.9375rem, 2vw, 1rem);
margin: 0;
max-width: 55ch;
}
.pn-apropos-systeme__grid {
display: flex;
flex-direction: column;
gap: 3rem;
}
@media (min-width: 1024px) {
.pn-apropos-systeme__grid {
flex-direction: row;
align-items: flex-start;
gap: 0;
background: linear-gradient(90deg, rgba(192, 92, 44, 0.04) 0%, rgba(255, 195, 0, 0.03) 50%, rgba(255, 195, 0, 0.01) 100%);
border-radius: 4px;
padding: 2rem;
}
}
.pn-apropos-systeme__col {
flex: 1;
min-width: 0;
}
@media (max-width: 1023px) {
.pn-apropos-systeme__col {
padding-bottom: 3rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-systeme__col:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
.pn-apropos-systeme__col-title {
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
font-weight: 600;
font-variant: all-small-caps;
color: var(--color-blanc);
margin: 0 0 1.5rem;
}
@media (min-width: 1024px) {
.pn-apropos-systeme__col-title {
margin-bottom: 2rem;
}
}
.pn-apropos-systeme__col-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pn-apropos-systeme__col-list li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9375rem;
color: var(--color-texte);
line-height: 1.5;
}
.pn-apropos-systeme__col-list li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-amber);
flex-shrink: 0;
}
.pn-apropos-systeme__arrow {
display: none;
}
@media (min-width: 1024px) {
.pn-apropos-systeme__arrow {
display: flex;
align-items: flex-start;
padding-top: 0.25rem;
padding-inline: 1.5rem;
font-size: 1.5rem;
color: var(--color-school-bus-yellow);
font-weight: 300;
flex-shrink: 0;
opacity: 0.7;
}
}
.pn-apropos-posture {
background: var(--color-onyx);
}
.pn-apropos-posture__list {
list-style: none;
margin: 2rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
max-width: 720px;
}
.pn-apropos-posture__item {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 1rem;
align-items: baseline;
padding-block: 1.5rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-posture__item:first-child {
border-top: 1px solid var(--color-bordure-subtile);
}
@media (min-width: 1024px) {
.pn-apropos-posture__item {
grid-template-columns: 3rem 1fr;
padding-block: 2rem;
}
}
.pn-apropos-posture__num {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-amber);
letter-spacing: 0.06em;
line-height: 1;
padding-top: 0.3em;
}
@media (max-width: 1023px) {
.pn-apropos-posture__num {
font-size: 0.9375rem;
transform: translateX(0.35rem);
}
}
.pn-apropos-posture__text {
margin: 0;
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte);
line-height: 1.6;
}
@media (min-width: 1301px) {
.pn-apropos-posture__list {
max-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 4rem;
}
.pn-apropos-posture__list .pn-apropos-posture__item:nth-child(1) {
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-posture__list .pn-apropos-posture__item:nth-child(2) {
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-posture__list .pn-apropos-posture__item:last-child {
border-bottom: none;
}
}
.pn-apropos-valeurs {
background: var(--color-onyx);
}
.pn-apropos-valeurs__list {
margin: 2rem 0 0;
max-width: 760px;
display: flex;
flex-direction: column;
}
.pn-apropos-valeurs__item {
padding-block: 2rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-valeurs__item:first-child {
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-apropos-valeurs__name {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 600;
font-variant: all-small-caps;
letter-spacing: 0.02em;
color: var(--color-blanc);
margin: 0 0 1rem;
}
.pn-apropos-valeurs__name::before {
content: "";
width: 1.5rem;
height: 2px;
background: var(--color-amber);
flex-shrink: 0;
}
.pn-apropos-valeurs__text {
margin: 0;
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte);
line-height: 1.7;
max-width: 64ch;
}
.pn-apropos-pourquoi__inner {
max-width: 62ch;
margin-inline: auto;
text-align: center;
}
.pn-apropos-pourquoi__title {
font-size: clamp(1.375rem, 3vw, 2rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.3;
color: var(--color-blanc);
margin: 0.75rem 0 1.5rem;
}
.pn-apropos-pourquoi__accroche {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-school-bus-yellow);
font-weight: 400;
line-height: 1.65;
margin: 1.5rem 0 0;
}
.pn-apropos-br--mobile {
display: none;
}
@media (max-width: 767px) {
.pn-apropos-br--mobile {
display: inline;
}
}
@media (max-width: 1023px) {
.pn-apropos-section.pn-apropos-pourquoi {
padding-block: calc(var(--section-padding) * 1.13);
}
.pn-apropos-pourquoi__title {
margin-block: 0.8625rem 1.725rem;
}
.pn-apropos-pourquoi__accroche {
margin-top: 1.725rem;
}
}
.pn-apropos-cta {
background: var(--color-onyx);
}
.pn-apropos-cta__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
@media (min-width: 768px) {
.pn-apropos-cta__inner {
align-items: center;
text-align: center;
}
}
.pn-apropos-cta__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-blanc);
margin: 0;
}
@media (min-width: 768px) {
.pn-apropos-cta .pn-preanalyse-door a {
display: block;
width: fit-content;
margin-top: 0.25rem;
margin-inline: auto;
}
}
/* Abstracts (tokens + forwards) */
.pn-joindre-section {
padding-block: var(--section-padding);
}
.pn-joindre-section--band {
background: var(--color-carbon-black);
}
.pn-joindre-hero {
padding-block: clamp(4rem, 12svh, 7rem);
background: var(--color-onyx);
position: relative;
text-align: center;
}
.pn-joindre-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(255, 195, 0, 0.04) 0%, rgba(192, 92, 44, 0.02) 50%, transparent 75%);
background-size: auto;
}
.pn-joindre-hero__inner {
position: relative;
z-index: 1;
max-width: 44rem;
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}
.pn-joindre-hero__kicker {
margin: 0 0 1rem;
}
.pn-joindre-hero__title {
font-size: clamp(2rem, 6vw, 3.75rem);
font-weight: 600;
text-transform: uppercase;
color: var(--color-blanc);
line-height: 1.1;
margin: 0 0 1.5rem;
}
.pn-joindre-hero__lead {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-texte-muted);
max-width: 44ch;
margin-inline: auto;
line-height: 1.65;
margin-bottom: 0;
}
.pn-joindre-contact {
background: var(--color-onyx);
}
.pn-joindre-contact__grid {
display: flex;
flex-direction: column;
gap: 4rem;
}
@media (min-width: 1024px) {
.pn-joindre-contact__grid {
flex-direction: row;
align-items: flex-start;
gap: clamp(3rem, 6vw, 5rem);
}
}
@media (min-width: 1024px) {
.pn-joindre-coordonnees {
width: 40%;
flex-shrink: 0;
position: sticky;
top: 3rem;
}
}
.pn-joindre-coordonnees__title {
font-size: clamp(0.9375rem, 2vw, 1.125rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-texte-muted);
margin: 0 0 2rem;
}
.pn-joindre-coordonnees__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.pn-joindre-coordonnee {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-block: 1.5rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-joindre-coordonnee:first-child {
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-joindre-coordonnee__label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-joindre-coordonnee__value {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte);
text-decoration: none;
line-height: 1.5;
}
.pn-joindre-coordonnee__value[href] {
color: var(--color-school-bus-yellow);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
}
.pn-joindre-coordonnee__value[href]:hover {
color: var(--color-goldenrod);
}
.pn-joindre-coordonnee__note {
display: block;
font-size: 0.875rem;
color: var(--color-texte-muted);
margin-top: 0.5rem;
}
.pn-joindre-form-wrap {
flex: 1;
min-width: 0;
}
.pn-joindre-form-wrap__title {
font-size: clamp(0.9375rem, 2vw, 1.125rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-texte-muted);
margin: 0 0 2rem;
}
.pn-joindre-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-joindre-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pn-joindre-form__row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-joindre-form__row--submit {
margin-top: 0.75rem;
}
.pn-joindre-form__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pn-joindre-form__label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-texte);
letter-spacing: 0.02em;
}
.pn-joindre-form__label span[aria-hidden] {
color: var(--color-school-bus-yellow);
margin-left: 2px;
}
.pn-joindre-form__optional {
font-weight: 400;
color: var(--color-texte-muted);
font-size: 0.75rem;
margin-left: 0.5rem;
}
.pn-joindre-form__input {
font-family: var(--font-slake);
font-size: 1rem;
font-weight: 400;
color: var(--color-texte);
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 4px;
padding: 0.75rem 1rem;
width: 100%;
transition: border-color 200ms ease, box-shadow 200ms ease;
-webkit-font-smoothing: antialiased;
}
.pn-joindre-form__input::placeholder {
color: var(--color-texte-muted);
opacity: 0.6;
}
.pn-joindre-form__input:focus {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.pn-joindre-form__input:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-joindre-form__textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.pn-joindre-form__success {
background: rgba(114, 187, 148, 0.08);
border: 1px solid rgba(114, 187, 148, 0.4);
border-radius: 10px;
padding: clamp(1.1rem, 3vw, 1.6rem);
}
.pn-joindre-form__success-title {
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 0.5rem;
}
.pn-joindre-form__success p:last-child {
margin: 0;
color: var(--color-texte);
line-height: 1.6;
}
.pn-joindre-form__error-banner {
background: rgba(232, 128, 111, 0.1);
border: 1px solid rgba(232, 128, 111, 0.45);
border-radius: 8px;
padding: 0.85rem 1.1rem;
margin: 0 0 1rem;
color: var(--color-texte);
font-size: 0.9375rem;
line-height: 1.5;
}
.pn-joindre-suite__title {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-blanc);
margin: 0 0 3rem;
}
.pn-joindre-suite__steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
@media (min-width: 1024px) {
.pn-joindre-suite__steps {
flex-direction: row;
position: relative;
align-items: flex-start;
}
.pn-joindre-suite__steps::before {
content: "";
position: absolute;
top: 1.375rem;
left: 16.67%;
right: 16.67%;
height: 2px;
background: rgba(255, 195, 0, 0.28);
z-index: 0;
}
}
.pn-joindre-suite__step {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
position: relative;
padding-bottom: 2.5rem;
}
.pn-joindre-suite__step:not(:last-child)::before {
content: "";
position: absolute;
left: 1.125rem;
top: 2.25rem;
bottom: -1px;
width: 2px;
background: rgba(255, 195, 0, 0.28);
transform: translateX(-1px);
}
.pn-joindre-suite__step:last-child {
padding-bottom: 0;
}
@media (min-width: 1024px) {
.pn-joindre-suite__step {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
padding-bottom: 0;
padding-inline: clamp(1rem, 2vw, 2rem);
z-index: 1;
}
.pn-joindre-suite__step:not(:last-child)::before {
display: none;
}
}
.pn-joindre-suite__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--color-amber);
background: var(--color-carbon-black);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-amber);
}
@media (min-width: 1024px) {
.pn-joindre-suite__num {
width: 2.75rem;
height: 2.75rem;
font-size: 0.9375rem;
}
}
.pn-joindre-suite__text {
margin: 0;
font-size: clamp(0.9375rem, 2vw, 1rem);
color: var(--color-texte);
line-height: 1.6;
padding-top: 0.3rem;
}
@media (min-width: 1024px) {
.pn-joindre-suite__text {
max-width: 30ch;
padding-top: 0;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.pn-joindre-suite__step:not(:last-child) {
padding-bottom: 3rem;
}
}
.pn-joindre-analyse {
background: var(--color-onyx);
}
.pn-joindre-analyse__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
max-width: 48ch;
margin-inline: auto;
}
.pn-joindre-analyse__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-blanc);
margin: 0;
}
.pn-joindre-analyse__text {
font-size: clamp(0.9375rem, 2vw, 1rem);
color: var(--color-texte-muted);
line-height: 1.65;
margin: 0;
}
/* Abstracts (tokens + forwards) */
#pn-fi-hero,
#pn-fi-accroche,
#pn-fi-fonctions,
#pn-fi-avance,
#pn-fi-accordeons,
#pn-fi-analyse {
scroll-margin-top: 0;
}
@media (min-width: 768px) {
html:has(.pn-main--fi) {
scroll-snap-type: y proximity;
}
html:has(.pn-main--fi) .site-header,
html:has(.pn-main--fi) .site-footer {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.pn-fi-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.pn-fi-accroche {
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.pn-fi-accroche > .pn-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.pn-fi-fonctions,
.pn-fi-avance,
.pn-fi-accordeons-section {
scroll-snap-align: none;
}
}
@media (max-width: 767px) {
.pn-fi-hero,
.pn-fi-accroche {
min-height: 0;
scroll-snap-align: none;
}
}
.pn-fi-section {
padding-block: var(--section-padding);
}
.pn-fi-section--band {
background: var(--color-carbon-black);
}
.pn-fi-hero {
min-height: calc(100vh - var(--header-h, 160px));
min-height: calc(100svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
text-align: center;
overflow: hidden;
}
.pn-fi-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255, 195, 0, 0.09) 0%, rgba(255, 195, 0, 0.03) 50%, transparent 75%), radial-gradient(ellipse 80% 60% at 80% 80%, rgba(192, 92, 44, 0.025) 0%, transparent 60%);
}
.pn-fi-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(circle, rgba(255, 195, 0, 0.07) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
}
.pn-fi-hero__inner {
position: relative;
z-index: 1;
max-width: 44rem;
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}
.pn-fi-hero__kicker {
margin: 0 0 1rem;
}
@media (max-width: 520px) {
.pn-fi-hero__kicker {
line-height: 1.1;
}
}
@media (min-width: 1301px) {
.pn-fi-hero__kicker {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
}
}
.pn-fi-hero__title {
font-size: clamp(2.25rem, 7vw, 4.5rem);
font-weight: 600;
text-transform: uppercase;
color: var(--color-blanc);
line-height: 1.05;
margin: 0 0 1.5rem;
}
.pn-fi-hero__title em {
font-style: normal;
color: var(--color-amber);
}
@media (min-width: 1600px) {
.pn-fi-hero__title {
font-size: clamp(2.5rem, 7.7vw, 5rem);
}
}
.pn-fi-hero__lead {
font-size: clamp(1rem, 2vw, 1.1875rem);
color: var(--color-blanc);
margin-inline: auto;
line-height: 1.65;
margin-bottom: 0;
}
@media (min-width: 1600px) {
.pn-fi-hero__lead {
font-size: clamp(1.1rem, 2.2vw, 1.3125rem);
}
}
.pn-fi-lead-br {
display: none;
}
@media (max-width: 520px) {
.pn-fi-lead-br {
display: inline;
}
}
@media (min-width: 1301px) {
.pn-fi-lead-line {
display: block;
}
.pn-fi-lead-line:first-child {
margin-bottom: 0.75rem;
}
}
.pn-fi-accroche {
background: var(--color-onyx);
}
.pn-fi-accroche__grid {
display: flex;
flex-direction: column;
gap: 3rem;
}
@media (min-width: 768px) {
.pn-fi-accroche__grid {
flex-direction: row;
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
}
@media (min-width: 768px) {
.pn-fi-accroche__text {
flex: 1;
}
}
.pn-fi-accroche__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-blanc);
margin: 0 0 1.5rem;
}
.pn-fi-accroche__lead {
font-size: clamp(1rem, 2.2vw, 1.1875rem);
color: var(--color-texte);
line-height: 1.7;
margin: 0;
}
@media (min-width: 768px) {
.pn-fi-video-wrap {
flex: 1;
}
}
.pn-fi-video-btn {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
aspect-ratio: 16/9;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 8px;
cursor: pointer;
transition: border-color 200ms ease, background 200ms ease;
padding: 2rem;
}
.pn-fi-video-btn__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.pn-fi-video-btn > :not(.pn-fi-video-btn__poster) {
position: relative;
z-index: 1;
}
.pn-fi-video-btn:hover {
border-color: rgba(255, 195, 0, 0.3);
background: rgba(255, 195, 0, 0.03);
}
.pn-fi-video-btn:hover .pn-fi-video-btn__play {
background: var(--color-goldenrod);
transform: scale(1.08);
}
.pn-fi-video-btn:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 3px;
}
.pn-fi-capture {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
overflow: hidden;
background: var(--color-carbon-black);
}
.pn-fi-capture img {
display: block;
width: 100%;
height: auto;
}
.pn-fi-capture__legende {
padding: 0.55rem 0.8rem 0.65rem;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--color-texte-muted);
border-top: 1px solid var(--color-bordure-subtile);
text-align: left;
}
.pn-fi-capture-note {
margin: 0.75rem 0 0;
font-size: 0.8rem;
font-style: italic;
color: var(--color-texte-muted);
}
.pn-fi-video-btn__play {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-school-bus-yellow);
color: var(--color-onyx);
transition: background 200ms ease, transform 200ms ease;
flex-shrink: 0;
}
.pn-fi-video-btn__play svg {
margin-left: 2px;
}
.pn-fi-video-btn__label {
font-size: clamp(0.9375rem, 2vw, 1rem);
font-weight: 600;
color: var(--color-texte);
}
.pn-fi-video-btn__duration {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-fi-fonctions__header {
max-width: 52rem;
margin-bottom: 3rem;
}
.pn-fi-fonctions__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-blanc);
margin: 0 0 1rem;
}
.pn-fi-fonctions__intro {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte-muted);
line-height: 1.65;
margin: 0;
}
.pn-fi-fonctions-nav {
display: flex;
margin-bottom: 2rem;
border-bottom: 2px solid var(--color-bordure-subtile);
}
.pn-fi-fonctions-tab {
flex: 1;
padding: 0.75rem 0.5rem 1rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: var(--color-texte-muted);
font-family: var(--font-slake);
font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
white-space: nowrap;
}
.pn-fi-fonctions-tab:hover {
color: var(--color-texte);
}
.pn-fi-fonctions-tab.is-active {
border-bottom-color: var(--color-school-bus-yellow);
color: var(--color-school-bus-yellow);
}
.pn-fi-fonctions-tab:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-fi-fonctions-panels {
max-width: 52rem;
}
.pn-fi-accent--orange {
color: var(--color-amber);
}
.pn-fi-accent--yellow {
color: var(--color-school-bus-yellow);
}
.pn-fi-line {
display: block;
margin-bottom: 0.4em;
}
.pn-fi-fonction-panel {
display: none;
}
.pn-fi-fonction-panel.is-active {
display: block;
}
.pn-fi-fonction-panel p {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
line-height: 1.75;
color: var(--color-texte);
margin: 0 0 1.5rem;
}
.pn-fi-fonction-panel p:last-child {
margin-bottom: 0;
}
.pn-fi-avance {
background: var(--color-onyx);
}
.pn-fi-avance__header {
max-width: 52rem;
margin-inline: auto;
margin-bottom: 3rem;
}
.pn-fi-avance__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-blanc);
margin: 0 0 1rem;
}
.pn-fi-avance__intro {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte-muted);
line-height: 1.65;
margin: 0;
}
.pn-fi-avance__list {
list-style: none;
margin: 0 auto 3rem;
padding: 0;
display: flex;
flex-direction: column;
max-width: 52rem;
}
.pn-fi-avance__item {
padding-block: 1.5rem;
border-bottom: 1px solid var(--color-bordure-subtile);
}
.pn-fi-avance__item:first-child {
border-top: 1px solid var(--color-bordure-subtile);
}
@media (min-width: 768px) {
.pn-fi-avance__item {
display: grid;
grid-template-columns: 1fr 1.8fr;
gap: 2rem;
align-items: start;
}
}
.pn-fi-avance__item-title {
display: block;
font-size: clamp(1rem, 2vw, 1.1875rem);
font-weight: 700;
color: var(--color-school-bus-yellow);
}
@media (min-width: 1600px) {
.pn-fi-avance__item-title {
font-size: 1.125rem;
}
}
.pn-fi-avance__item-title {
margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
.pn-fi-avance__item-title {
margin-bottom: 0;
padding-top: 0.2em;
}
}
.pn-fi-avance__item-body {
display: block;
font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
color: var(--color-texte-muted);
line-height: 1.7;
margin: 0;
}
.pn-fi-avance__cta {
max-width: 52rem;
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
color: var(--color-texte);
line-height: 1.7;
margin: 0 auto 3rem;
}
.pn-fi-citation {
max-width: 44rem;
margin: 0 auto;
padding: 2rem 3rem;
border: 1px solid var(--color-bordure-subtile);
border-left: 3px solid var(--color-school-bus-yellow);
border-radius: 4px;
background: rgba(255, 195, 0, 0.03);
}
.pn-fi-citation p {
font-size: clamp(1rem, 2.2vw, 1.1875rem);
font-style: italic;
color: var(--color-texte-muted);
line-height: 1.65;
margin: 0;
}
.pn-fi-accordeons-section {
padding-block: clamp(3rem, 8vw, 6rem);
background: var(--color-onyx);
}
.pn-fi-accordeons__label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(232, 232, 228, 0.85);
text-align: center;
margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.pn-fi-accordeons {
max-width: 46rem;
margin-inline: auto;
display: flex;
flex-direction: column;
}
.pn-fi-accordeon {
border-left: 2px solid var(--color-bordure-subtile);
transition: border-color 200ms ease;
}
.pn-fi-accordeon.is-open, .pn-fi-accordeon:hover {
border-left-color: var(--color-school-bus-yellow);
}
.pn-fi-accordeon__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.5rem 1rem;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
text-align: left;
transition: background 180ms ease;
}
.pn-fi-accordeon__trigger:hover {
background: rgba(255, 255, 255, 0.02);
}
.pn-fi-accordeon.is-open .pn-fi-accordeon__trigger {
border-bottom-color: transparent;
}
.pn-fi-accordeon__trigger:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-fi-accordeon__trigger-text {
font-size: clamp(0.9375rem, 2vw, 1.0625rem);
font-weight: 600;
color: var(--color-blanc);
line-height: 1.4;
}
.pn-fi-accordeon__chevron {
flex-shrink: 0;
color: var(--color-school-bus-yellow);
transition: transform 280ms ease;
}
.pn-fi-accordeon.is-open .pn-fi-accordeon__chevron {
transform: rotate(180deg);
}
.pn-fi-accordeon__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 280ms ease;
}
.pn-fi-accordeon.is-open .pn-fi-accordeon__body {
grid-template-rows: 1fr;
}
.pn-fi-accordeon__content {
overflow: hidden;
padding-inline: 1rem;
padding-block: 0;
transition: padding-block 280ms ease;
}
.pn-fi-accordeon.is-open .pn-fi-accordeon__content {
padding-block: 1rem 2rem;
}
.pn-fi-accordeon__content p {
font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
line-height: 1.7;
color: var(--color-texte-muted);
margin: 0 0 1rem;
}
.pn-fi-accordeon__content p:last-child {
margin-bottom: 0;
}
.pn-fi-accordeon__content p strong {
color: var(--color-texte);
font-weight: 600;
}
.pn-fi-accordeon__note {
font-size: 0.75rem;
color: rgba(232, 232, 228, 0.38);
margin-top: 0.75rem;
}
.pn-fi-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease;
}
.pn-fi-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.pn-fi-modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.9);
cursor: pointer;
}
.pn-fi-modal__box {
position: relative;
z-index: 1;
width: 100%;
max-width: 860px;
background: var(--color-carbon-black);
border-radius: 8px;
overflow: hidden;
transform: translateY(12px);
transition: transform 280ms ease;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.pn-fi-modal.is-open .pn-fi-modal__box {
transform: translateY(0);
}
.pn-fi-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: none;
color: var(--color-texte-muted);
cursor: pointer;
transition: background 180ms ease, color 180ms ease;
}
.pn-fi-modal__close:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--color-blanc);
}
.pn-fi-modal__close:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-fi-modal__video-wrap {
aspect-ratio: 16/9;
background: var(--color-onyx);
}
@media (max-width: 767px) {
.pn-fi-modal__box {
max-width: min(320px, 84vw);
}
.pn-fi-modal__video-wrap {
aspect-ratio: 6/13;
}
}
.pn-fi-modal__video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.pn-fi-analyse {
background: var(--color-carbon-black);
}
.pn-fi-analyse__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
max-width: 48ch;
margin-inline: auto;
}
.pn-fi-analyse__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-blanc);
margin: 0;
}
.pn-fi-analyse__text {
font-size: clamp(0.9375rem, 2vw, 1rem);
color: var(--color-texte-muted);
line-height: 1.65;
margin: 0;
}
/* Abstracts (tokens + forwards) */
.pn-main--comp {
background: var(--color-onyx);
}
.pn-comp-hero {
min-height: calc(72vh - var(--header-h, 160px));
min-height: calc(72svh - var(--header-h, 160px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: clamp(3rem, 8svh, 6rem);
background: var(--color-onyx);
position: relative;
overflow: hidden;
}
.pn-comp-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 70% 50% at 50% 105%, rgba(255, 195, 0, 0.06) 0%, transparent 62%), repeating-linear-gradient(0deg, transparent 0 55px, rgba(255, 255, 255, 0.03) 55px 56px);
}
.pn-comp-hero__inner {
position: relative;
z-index: 1;
max-width: 52rem;
padding-inline: 1rem;
}
.pn-comp-hero__kicker {
margin: 0 0 1rem;
font-size: clamp(0.875rem, 2.25vw, 1rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
}
.pn-comp-hero__title {
margin: 0 0 1.5rem;
font-size: clamp(2.25rem, 6vw, 4.5rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.035em;
color: var(--color-blanc);
text-shadow: 0 0 55px rgba(255, 195, 0, 0.1);
}
.pn-comp-hero__lead {
margin: 0 auto;
font-size: clamp(1rem, 2.5vw, 1.25rem);
line-height: 1.6;
color: var(--color-texte-muted);
max-width: 48ch;
}
.pn-comp-hero__scroll {
position: absolute;
left: 50%;
bottom: clamp(1rem, 4svh, 2.25rem);
transform: translateX(-50%);
width: 44px;
height: 44px;
z-index: 1;
}
.pn-comp-hero__scroll::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 14px;
height: 14px;
border-right: 2px solid var(--color-texte-muted);
border-bottom: 2px solid var(--color-texte-muted);
transform: rotate(45deg);
}
.pn-comp-section {
padding-block: var(--section-padding);
background: var(--color-onyx);
}
.pn-comp-section--band {
background: var(--color-carbon-black);
border-block: 1px solid var(--color-bordure-subtile);
}
.pn-comp-head {
max-width: 60ch;
margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.pn-comp-head h2 {
margin: 0 0 0.75rem;
font-size: clamp(1.5rem, 3.75vw, 2.5rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--color-blanc);
}
.pn-comp-head p {
margin: 0;
font-size: clamp(1rem, 2.4vw, 1.15rem);
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-comp-principes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.5rem;
}
@media (min-width: 768px) {
.pn-comp-principes {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
.pn-comp-principe__icon {
display: inline-flex;
width: 40px;
height: 40px;
margin-bottom: 1rem;
color: var(--color-school-bus-yellow);
}
.pn-comp-principe__icon svg {
width: 100%;
height: 100%;
}
.pn-comp-principe__name {
margin: 0 0 0.5rem;
font-size: 1.15rem;
line-height: 1.3;
font-weight: 600;
color: var(--color-blanc);
}
@media (min-width: 768px) {
.pn-comp-principe__name {
min-height: 2.6em;
}
}
.pn-comp-principe__desc {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-comp-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
@media (min-width: 576px) {
.pn-comp-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
.pn-comp-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "icon arrow" "titre titre" "ligne ligne";
align-items: center;
gap: 0.5rem 1rem;
height: 100%;
padding: clamp(1.1rem, 2.5vw, 1.6rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
text-decoration: none;
transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.pn-comp-card__icon {
grid-area: icon;
justify-self: start;
width: 32px;
height: 32px;
color: var(--color-school-bus-yellow);
}
.pn-comp-card__icon svg {
width: 100%;
height: 100%;
}
.pn-comp-card__titre {
grid-area: titre;
margin-top: 0.75rem;
font-size: 1.2rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-comp-card__ligne {
grid-area: ligne;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-comp-card__arrow {
grid-area: arrow;
justify-self: end;
font-size: 1.1rem;
color: var(--color-texte-muted);
transition: transform 200ms ease, color 200ms ease;
}
@media (hover: hover) {
.pn-comp-card:hover {
transform: translateY(-3px);
border-color: var(--color-bordure-forte);
background: rgba(255, 255, 255, 0.02);
}
.pn-comp-card:hover .pn-comp-card__arrow {
transform: translateX(4px);
color: var(--color-school-bus-yellow);
}
}
.pn-comp-card:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pn-comp-card,
.pn-comp-card__arrow {
transition: none;
}
}
.pn-comp-rail {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 250;
transform: translateY(-100%);
background: rgba(10, 10, 10, 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--color-bordure-subtile);
transition: transform 220ms ease;
}
.pn-comp-rail[hidden] {
display: none;
}
.pn-comp-rail.is-visible {
transform: none;
}
.pn-comp-rail__inner {
display: flex;
gap: 0.5rem;
max-width: 1200px;
margin-inline: auto;
padding: 0.35rem 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pn-comp-rail__inner::-webkit-scrollbar {
display: none;
}
@media (max-width: 767px) {
.pn-comp-rail__inner {
padding-right: 4rem;
}
}
.pn-comp-rail__chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: none;
min-height: 40px;
padding: 0.3rem 0.85rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-texte-muted);
text-decoration: none;
transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) {
.pn-comp-rail__chip:hover {
color: var(--color-blanc);
border-color: var(--color-bordure-subtile);
}
}
.pn-comp-rail__chip:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-comp-rail__chip.is-active {
color: var(--color-blanc);
border-color: color-mix(in srgb, #ffc300 55%, transparent);
background: rgba(255, 195, 0, 0.08);
}
.pn-comp-rail__chip.is-active .pn-comp-rail__icon {
color: var(--color-school-bus-yellow);
}
.pn-comp-rail__icon {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--color-texte-muted);
}
.pn-comp-rail__icon svg {
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.pn-comp-rail,
.pn-comp-rail__chip {
transition: none;
}
}
.pn-comp-famille,
#pn-comp-sommaire {
scroll-margin-top: 3.5rem;
}
.pn-comp-famille {
position: relative;
overflow: hidden;
}
.pn-comp-famille__filigrane {
position: absolute;
top: clamp(-4.5rem, -5vw, -2rem);
right: clamp(-3rem, -3vw, -1rem);
width: clamp(180px, 26vw, 360px);
color: rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.pn-comp-famille__filigrane svg {
display: block;
width: 100%;
height: auto;
}
.pn-comp-famille__head {
position: relative;
max-width: 62ch;
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.pn-comp-famille__inventaire {
margin: 0 0 0.75rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--color-school-bus-yellow);
}
.pn-comp-famille__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-copper);
}
.pn-comp-famille__head h2 {
margin: 0 0 0.75rem;
font-size: clamp(1.75rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-blanc);
}
.pn-comp-famille__teaser {
margin: 0;
font-size: clamp(1.05rem, 2.5vw, 1.25rem);
line-height: 1.6;
color: var(--color-texte);
}
.pn-comp-famille__soon {
margin: 1rem 0 0;
font-size: 0.9rem;
font-style: italic;
color: var(--color-texte-muted);
}
.pn-comp-famille--stub {
opacity: 0.92;
}
.pn-comp-badges {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pn-comp-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.7rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-texte);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--color-bordure-subtile);
border-radius: 999px;
}
.pn-comp-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-texte-muted);
}
.pn-comp-badge--integre .pn-comp-badge__dot {
background: var(--color-school-bus-yellow);
}
.pn-comp-badge__glyph {
font-size: 0.7rem;
color: var(--color-texte-muted);
line-height: 1;
}
.pn-comp-stepper {
color: var(--color-texte-muted);
width: 100%;
max-width: 320px;
margin-top: 1rem;
}
.pn-comp-stepper svg {
width: 100%;
height: auto;
}
.pn-comp-stepper .pn-comp-stepper__track {
opacity: 0.4;
}
.pn-comp-preuve-showcase {
max-width: 680px;
margin: clamp(1.25rem, 3vw, 1.75rem) auto clamp(2rem, 5vw, 3rem);
}
.pn-comp-media-duo {
display: grid;
gap: 1rem;
align-items: stretch;
max-width: 680px;
margin: clamp(1.5rem, 4vw, 2.25rem) auto clamp(2rem, 5vw, 3rem);
}
@media (min-width: 768px) {
.pn-comp-media-duo {
grid-template-columns: 1fr 1fr;
max-width: 1000px;
gap: 1.5rem;
}
}
.pn-comp-media-duo .pn-comp-clip-hero,
.pn-comp-media-duo .pn-comp-preuve-showcase {
margin: 0;
max-width: none;
width: 100%;
}
.pn-comp-media-duo .pn-comp-clip-hero img {
aspect-ratio: 16/10;
object-fit: cover;
}
@media (min-width: 768px) {
.pn-comp-media-duo .pn-comp-preuve-showcase,
.pn-comp-media-duo .pn-preuve {
display: flex;
flex-direction: column;
}
.pn-comp-media-duo .pn-preuve {
flex: 1;
}
.pn-comp-media-duo .pn-preuve__frame {
flex: 1;
display: flex;
flex-direction: column;
}
.pn-comp-media-duo .pn-preuve__frame picture,
.pn-comp-media-duo .pn-preuve__img {
flex: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-comp-media-duo .pn-preuve__ph {
flex: 1;
aspect-ratio: auto !important;
min-height: 0;
}
.pn-comp-media-duo .pn-preuve__caption {
display: none;
}
}
.pn-comp-fiabilite-link {
margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
text-align: center;
}
.pn-comp-story__metier {
color: var(--color-school-bus-yellow);
font-weight: 600;
}
.pn-comp-cta__lead:has(+ .pn-comp-cta__vitrine) {
margin-bottom: 0.75rem;
}
.pn-comp-cta__vitrine {
margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
text-align: center;
font-size: clamp(1.35rem, 3vw, 1.75rem);
font-weight: 600;
}
.pn-comp-cta__vitrine a {
color: var(--color-blanc);
text-decoration: none;
}
.pn-comp-cta__vitrine-txt {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: rgba(255, 255, 255, 0.55);
transition: text-decoration-color 160ms ease;
}
.pn-comp-cta__vitrine a:hover .pn-comp-cta__vitrine-txt,
.pn-comp-cta__vitrine a:focus-visible .pn-comp-cta__vitrine-txt {
text-decoration-color: currentColor;
}
.pn-comp-cta__vitrine-guillemet {
color: var(--color-blanc);
font-weight: 400;
}
.pn-comp-types {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.pn-comp-types {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.pn-comp-types {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.pn-comp-types--duo {
grid-template-columns: repeat(2, 1fr);
}
}
.pn-comp-type {
display: flex;
flex-direction: column;
padding: clamp(1.25rem, 2.8vw, 1.6rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
}
.pn-comp-type__head {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
min-height: 1.7rem;
margin-bottom: 0.5rem;
}
.pn-comp-type__titre {
margin: 0 0 0.75rem;
font-size: 1.2rem;
line-height: 1.3;
font-weight: 600;
color: var(--color-blanc);
}
@media (min-width: 576px) {
.pn-comp-type__titre {
min-height: 3.15rem;
}
}
.pn-comp-type__tag {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-texte-muted);
padding: 0.15rem 0.5rem;
border: 1px solid var(--color-bordure-subtile);
border-radius: 999px;
}
.pn-comp-type__hook {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.5;
color: var(--color-texte);
}
@media (min-width: 576px) {
.pn-comp-type__hook {
min-height: 6rem;
}
}
.pn-comp-type__scenario {
display: block;
width: 100%;
margin: 0 0 1rem;
padding: 0.7rem 0.9rem 0.75rem 1rem;
border: 0;
border-left: 3px solid var(--color-amber);
border-radius: 0 10px 10px 0;
background: rgba(255, 195, 0, 0.04);
font: inherit;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-texte-muted);
text-align: left;
cursor: pointer;
transition: background-color 160ms ease;
}
.pn-comp-type__scenario:hover, .pn-comp-type__scenario:focus-visible {
background: rgba(255, 195, 0, 0.08);
}
.pn-comp-type__scenario:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-comp-type__scenario-kicker {
display: block;
margin-bottom: 0.3rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-comp-type__scenario-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 6.4em;
}
.pn-comp-type__scenario-more {
display: block;
margin-top: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
text-align: right;
color: var(--color-amber);
}
.pn-comp-type__cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: auto;
}
.pn-comp-type--soon {
border-style: dashed;
background: rgba(255, 255, 255, 0.015);
}
.pn-comp-type--proue {
grid-column: 1/-1;
}
@media (min-width: 768px) {
.pn-comp-type--proue {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
align-content: center;
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pn-comp-type--proue > * {
grid-column: 1;
}
.pn-comp-type--proue .pn-comp-type__clip {
grid-column: 2;
grid-row: 1/span 5;
align-self: center;
}
.pn-comp-type--proue .pn-comp-type__titre,
.pn-comp-type--proue .pn-comp-type__hook {
min-height: 0;
}
.pn-comp-type--proue .pn-comp-type__scenario-text {
min-height: 0;
}
.pn-comp-type--proue .pn-comp-type__cta {
margin-top: 1rem;
}
}
.pn-comp-type--proue .pn-comp-type__titre {
font-size: clamp(1.3rem, 2.5vw, 1.55rem);
}
.pn-comp-type .pn-comp-clip-hero {
width: 100%;
max-width: none;
margin: 0 0 1rem;
}
.pn-comp-type .pn-comp-clip-hero img {
aspect-ratio: 16/10;
object-fit: cover;
}
.pn-comp-type .pn-comp-clip-hero .pn-comp-clip-hero__badge {
width: 3.6rem;
height: 3.6rem;
}
@media (min-width: 768px) {
.pn-comp-type--proue .pn-comp-clip-hero {
margin: 0;
}
}
.pn-comp-type .pn-comp-clip-hero.pn-clip-portrait {
max-width: min(360px, 92%);
margin-inline: auto;
}
.pn-comp-type .pn-comp-clip-hero.pn-clip-portrait img {
aspect-ratio: 6/13;
object-fit: cover;
}
button.pn-comp-link {
background: none;
border-top: 0;
border-right: 0;
border-left: 0;
padding-inline: 0;
cursor: pointer;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
}
.pn-comp-soupape {
margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-comp-soupape .pn-comp-link {
margin-left: 0.35rem;
}
.pn-comp-stories {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.pn-comp-stories {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.pn-comp-stories--trio {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-comp-stories--solo {
max-width: 780px;
margin-inline: auto;
}
@media (min-width: 768px) {
.pn-comp-stories--solo {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) {
.pn-comp-stories:not(.pn-comp-stories--solo) .pn-comp-story__name {
min-height: 2.6em;
}
}
.pn-comp-story {
display: flex;
flex-direction: column;
padding: clamp(1.25rem, 2.8vw, 1.6rem);
background: var(--color-onyx);
border: 1px solid var(--color-bordure-subtile);
border-left: 3px solid var(--color-amber);
border-radius: 12px;
}
.pn-comp-story__kicker {
margin: 0 0 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-comp-story__name {
margin: 0 0 0.35rem;
font-size: 1.15rem;
line-height: 1.3;
font-weight: 600;
color: var(--color-blanc);
}
.pn-comp-story__desc {
margin: 0 0 0.75rem;
font-size: 0.85rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
.pn-comp-story__recit {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.65;
color: var(--color-texte);
}
.pn-comp-story__media {
display: flex;
gap: 0.75rem;
margin-top: auto;
}
.pn-comp-story__media--duo {
display: grid;
gap: 1rem;
align-items: stretch;
}
@media (min-width: 576px) {
.pn-comp-story__media--duo {
grid-template-columns: repeat(2, 1fr);
}
}
.pn-comp-story__media--duo .pn-vh {
display: flex;
flex-direction: column;
height: 100%;
}
.pn-comp-story__media--duo .pn-vh__body {
flex: 1;
align-content: start;
}
.pn-comp-media-ph {
flex: 1;
display: grid;
place-items: center;
aspect-ratio: 16/7;
padding: 0.5rem 0.9rem;
border: 1px dashed rgba(255, 255, 255, 0.22);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
font-size: 0.75rem;
letter-spacing: 0.04em;
text-align: center;
color: var(--color-texte-muted);
}
.pn-comp-story__article {
display: block;
width: 100%;
max-width: 400px;
margin-inline: auto;
border-radius: 12px;
border: 1px solid var(--color-bordure-subtile);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.pn-vh {
--vh-accent: #ffc300;
position: relative;
margin: 0;
width: 100%;
max-width: 380px;
margin-inline: auto;
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
overflow: hidden;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
}
.pn-vh__chrome {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.7rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pn-vh__chrome span {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
}
.pn-vh__chrome span:first-child {
background: color-mix(in srgb, var(--vh-accent) 75%, transparent);
}
.pn-vh__chrome em {
margin-left: 0.4rem;
font-style: normal;
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--color-texte-muted);
}
.pn-vh__body {
display: grid;
gap: 0.55rem;
padding: 0.8rem 0.85rem 0.9rem;
}
.pn-vh__titre {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-vh__chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.pn-vh__chip {
padding: 0.22rem 0.55rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-size: 0.66rem;
color: var(--color-texte-muted);
}
.pn-vh__chip.is-on {
border-color: var(--vh-accent);
color: var(--color-blanc);
background: color-mix(in srgb, var(--vh-accent) 18%, transparent);
}
.pn-vh__champ {
display: grid;
gap: 0.25rem;
}
.pn-vh__champ span {
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-vh__champ i {
display: block;
height: 0.55rem;
border-radius: 4px;
background: color-mix(in srgb, var(--vh-accent) 32%, rgba(255, 255, 255, 0.06));
}
.pn-vh__lignes {
display: grid;
gap: 0.35rem;
}
.pn-vh__lignes i {
display: block;
height: 0.4rem;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
}
.pn-vh__lignes i:first-child {
background: color-mix(in srgb, var(--vh-accent) 40%, rgba(255, 255, 255, 0.08));
}
.pn-vh__stepper {
display: flex;
align-items: flex-start;
padding: 0.15rem 0 0.1rem;
}
.pn-vh__step {
position: relative;
flex: 1;
display: grid;
justify-items: center;
gap: 0.22rem;
}
.pn-vh__step:not(:first-child)::before {
content: "";
position: absolute;
top: 0.55rem;
right: 50%;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.16);
}
.pn-vh__step i {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
font-style: normal;
font-size: 0.58rem;
font-weight: 700;
color: var(--color-blanc);
transition: none;
}
.pn-vh__step em {
font-style: normal;
font-size: 0.52rem;
letter-spacing: 0.03em;
color: var(--color-texte-muted);
text-align: center;
}
.pn-vh__step.is-done i {
background: color-mix(in srgb, var(--vh-accent) 55%, rgba(255, 255, 255, 0.1));
}
.pn-vh__step.is-done:not(:first-child)::before {
background: color-mix(in srgb, var(--vh-accent) 45%, transparent);
}
.pn-vh__step.is-on i {
transform: scale(1.3);
background: var(--vh-accent);
color: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-accent) 22%, transparent);
}
.pn-vh__step.is-on em {
color: inherit;
font-weight: 600;
}
.pn-vh__step.is-on:not(:first-child)::before {
background: color-mix(in srgb, var(--vh-accent) 45%, transparent);
}
.pn-vh__etape {
margin: 0;
font-size: 0.66rem;
color: var(--color-texte-muted);
}
.pn-vh__etape b {
color: inherit;
font-weight: 700;
}
.pn-vh__band {
margin: 0 -0.85rem;
padding: 0.32rem 0.85rem;
background: color-mix(in srgb, var(--vh-accent) 16%, transparent);
text-align: center;
font-size: 0.74rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-vh__btnrow {
margin: 0.1rem 0 0;
text-align: center;
}
.pn-vh__btn {
display: inline-block;
padding: 0.42rem 1rem;
border-radius: 8px;
background: color-mix(in srgb, var(--vh-accent) 88%, #000);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 8px color-mix(in srgb, var(--vh-accent) 30%, transparent);
}
.pn-vh__result {
margin: 0.1rem 0 0;
padding: 0.4rem 0.55rem;
border-left: 2px solid var(--vh-accent);
border-radius: 0 6px 6px 0;
background: color-mix(in srgb, var(--vh-accent) 10%, transparent);
font-size: 0.7rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-vh__legende {
padding: 0.4rem 0.7rem 0.55rem;
font-size: 0.66rem;
color: var(--color-texte-muted);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pn-vh__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
}
.pn-vh__card {
padding: 0.5rem 0.3rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
font-size: 0.64rem;
font-weight: 600;
text-align: center;
color: var(--color-texte-muted);
}
.pn-vh__card.is-on {
border-color: var(--vh-accent);
color: inherit;
background: color-mix(in srgb, var(--vh-accent) 16%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--vh-accent) 22%, transparent);
}
.pn-vh__checks {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.32rem;
}
.pn-vh__checks li {
position: relative;
padding-left: 1.3rem;
font-size: 0.7rem;
}
.pn-vh__checks li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.02rem;
display: grid;
place-items: center;
width: 0.85rem;
height: 0.85rem;
border-radius: 3px;
background: var(--vh-accent);
font-size: 0.55rem;
font-weight: 700;
color: #fff;
}
.pn-vh__photocards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45rem;
}
.pn-vh__photocard {
display: grid;
gap: 0.28rem;
}
.pn-vh__photocard-ph {
position: relative;
display: block;
aspect-ratio: 4/3;
border-radius: 8px;
overflow: hidden;
background: radial-gradient(ellipse 90% 70% at 30% 25%, rgba(255, 255, 255, 0.3), transparent 60%), linear-gradient(140deg, color-mix(in srgb, var(--vh-accent) 55%, #8b93a3), color-mix(in srgb, var(--vh-accent) 22%, #4c5364));
}
.pn-vh__photocard-ph::after {
content: "+";
position: absolute;
right: 0.22rem;
bottom: 0.22rem;
display: grid;
place-items: center;
width: 0.95rem;
height: 0.95rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
color: #3a3f4c;
}
.pn-vh__photocard:nth-child(2) .pn-vh__photocard-ph {
filter: hue-rotate(14deg) saturate(0.9);
}
.pn-vh__photocard:nth-child(3) .pn-vh__photocard-ph {
filter: hue-rotate(-16deg) saturate(1.1);
}
.pn-vh__photocard em {
font-style: normal;
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
color: var(--color-texte-muted);
}
.pn-vh__photocard.is-on .pn-vh__photocard-ph {
outline: 2px solid var(--vh-accent);
outline-offset: 1px;
}
.pn-vh__photocard.is-on .pn-vh__photocard-ph::after {
content: "✓";
background: var(--vh-accent);
color: #fff;
}
.pn-vh__photocard.is-on em {
color: inherit;
}
.pn-vh__radios {
display: grid;
gap: 0.32rem;
}
.pn-vh__radio {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.7rem;
color: var(--color-texte-muted);
}
.pn-vh__radio i {
flex: none;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
border: 1.5px solid rgba(128, 128, 128, 0.55);
}
.pn-vh__radio.is-on {
color: inherit;
}
.pn-vh__radio.is-on i {
border-color: var(--vh-accent);
background: radial-gradient(circle, var(--vh-accent) 42%, transparent 50%);
}
.pn-vh__gauge {
display: grid;
gap: 0.3rem;
}
.pn-vh__gauge span {
font-size: 0.66rem;
font-weight: 600;
}
.pn-vh__gauge i {
display: block;
height: 0.55rem;
border-radius: 999px;
background: rgba(128, 128, 128, 0.22);
overflow: hidden;
}
.pn-vh__gauge b {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, color-mix(in srgb, var(--vh-accent) 55%, transparent), var(--vh-accent));
}
.pn-vh__verdict {
margin: 0.15rem 0;
padding: 0.55rem 0.6rem;
border-radius: 10px;
text-align: center;
font-size: 0.82rem;
font-weight: 700;
color: var(--vh-accent);
background: color-mix(in srgb, var(--vh-accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--vh-accent) 45%, transparent);
}
.pn-vh--clair {
background: linear-gradient(165deg, #f7f5f1, #eceae4);
border-color: rgba(0, 0, 0, 0.12);
color: #2b2b28;
}
.pn-vh--clair .pn-vh__chrome {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
.pn-vh--clair .pn-vh__chrome span {
background: rgba(0, 0, 0, 0.14);
}
.pn-vh--clair .pn-vh__chrome span:first-child {
background: color-mix(in srgb, var(--vh-accent) 80%, transparent);
}
.pn-vh--clair .pn-vh__chrome em {
color: rgba(43, 43, 40, 0.55);
}
.pn-vh--clair .pn-vh__titre {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__chip {
border-color: rgba(0, 0, 0, 0.18);
color: rgba(43, 43, 40, 0.65);
}
.pn-vh--clair .pn-vh__chip.is-on {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__champ span {
color: rgba(43, 43, 40, 0.55);
}
.pn-vh--clair .pn-vh__champ i {
background: color-mix(in srgb, var(--vh-accent) 30%, rgba(0, 0, 0, 0.05));
}
.pn-vh--clair .pn-vh__lignes i {
background: rgba(0, 0, 0, 0.12);
}
.pn-vh--clair .pn-vh__card {
border-color: rgba(0, 0, 0, 0.16);
color: rgba(43, 43, 40, 0.65);
background: rgba(255, 255, 255, 0.6);
}
.pn-vh--clair .pn-vh__card.is-on {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__checks li {
color: #2b2b28;
}
.pn-vh--clair .pn-vh__result {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__legende {
color: rgba(43, 43, 40, 0.6);
border-top-color: rgba(0, 0, 0, 0.08);
}
.pn-vh--clair .pn-vh__step i {
background: rgba(0, 0, 0, 0.38);
}
.pn-vh--clair .pn-vh__step em {
color: rgba(43, 43, 40, 0.6);
}
.pn-vh--clair .pn-vh__step:not(:first-child)::before {
background: rgba(0, 0, 0, 0.16);
}
.pn-vh--clair .pn-vh__step.is-done i {
background: color-mix(in srgb, var(--vh-accent) 65%, rgba(0, 0, 0, 0.25));
}
.pn-vh--clair .pn-vh__step.is-on i {
background: var(--vh-accent);
}
.pn-vh--clair .pn-vh__step.is-on em {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__step.is-done:not(:first-child)::before,
.pn-vh--clair .pn-vh__step.is-on:not(:first-child)::before {
background: color-mix(in srgb, var(--vh-accent) 50%, transparent);
}
.pn-vh--clair .pn-vh__etape {
color: rgba(43, 43, 40, 0.6);
}
.pn-vh--clair .pn-vh__etape b {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__band {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__photocard em {
color: rgba(43, 43, 40, 0.6);
}
.pn-vh--clair .pn-vh__photocard.is-on em {
color: #1c1c1a;
}
.pn-vh--clair .pn-vh__radio {
color: rgba(43, 43, 40, 0.65);
}
.pn-vh--clair .pn-vh__radio i {
border-color: rgba(0, 0, 0, 0.35);
}
.pn-vh--clair .pn-vh__radio.is-on {
color: #1c1c1a;
}
.pn-vh--salon {
display: grid;
place-items: center;
min-height: 150px;
padding: 1.4rem 1rem 1rem;
}
.pn-vh--salon .pn-vh__salon-halo {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--vh-accent) 16%, transparent), transparent 65%);
}
.pn-vh--salon .pn-vh__laptop {
position: relative;
display: grid;
gap: 0;
justify-items: center;
}
.pn-vh--salon .pn-vh__laptop-ecran {
display: grid;
gap: 0.3rem;
width: 7.5rem;
padding: 0.55rem 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-bottom: 0;
border-radius: 8px 8px 0 0;
background: rgba(10, 10, 10, 0.85);
}
.pn-vh--salon .pn-vh__laptop-ecran i {
display: block;
height: 0.28rem;
border-radius: 2px;
background: rgba(255, 255, 255, 0.14);
}
.pn-vh--salon .pn-vh__laptop-ecran i:first-child {
width: 70%;
background: var(--vh-accent);
}
.pn-vh--salon .pn-vh__laptop-ecran i:nth-child(2) {
width: 95%;
}
.pn-vh--salon .pn-vh__laptop-ecran i:nth-child(3) {
width: 82%;
}
.pn-vh--salon .pn-vh__laptop-base {
width: 9.5rem;
height: 0.4rem;
border-radius: 0 0 8px 8px;
background: rgba(255, 255, 255, 0.22);
}
.pn-vh--salon .pn-vh__cafe {
position: relative;
margin-left: 1rem;
align-self: end;
width: 1.5rem;
height: 1.1rem;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top: 0;
border-radius: 0 0 8px 8px;
}
.pn-vh--salon .pn-vh__cafe::after {
content: "";
position: absolute;
right: -0.55rem;
top: 0.05rem;
width: 0.45rem;
height: 0.55rem;
border: 2px solid rgba(255, 255, 255, 0.4);
border-left: 0;
border-radius: 0 6px 6px 0;
}
.pn-vh--salon .pn-vh__cafe-vapeur {
position: absolute;
left: 50%;
top: -0.85rem;
width: 0.5rem;
height: 0.7rem;
transform: translateX(-50%);
border-radius: 50%;
background: linear-gradient(transparent, color-mix(in srgb, var(--vh-accent) 45%, transparent));
filter: blur(2.5px);
}
.pn-vh--salon .pn-vh__legende {
position: relative;
border-top: 0;
text-align: center;
}
.pn-vh--salon.pn-vh--clair .pn-vh__salon-halo {
background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--vh-accent) 24%, transparent), transparent 65%);
}
.pn-vh--salon.pn-vh--clair .pn-vh__laptop-ecran {
border-color: rgba(0, 0, 0, 0.45);
background: rgba(28, 28, 26, 0.92);
}
.pn-vh--salon.pn-vh--clair .pn-vh__laptop-base {
background: rgba(0, 0, 0, 0.38);
}
.pn-vh--salon.pn-vh--clair .pn-vh__cafe,
.pn-vh--salon.pn-vh--clair .pn-vh__cafe::after {
border-color: rgba(0, 0, 0, 0.45);
}
.pn-comp-clip-hero {
position: relative;
display: block;
width: 100%;
max-width: 680px;
margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
padding: 0;
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
overflow: hidden;
background: var(--color-carbon-black);
cursor: pointer;
}
.pn-comp-clip-hero img {
display: block;
width: 100%;
height: auto;
}
.pn-comp-clip-hero:hover .pn-comp-clip-hero__badge, .pn-comp-clip-hero:focus-visible .pn-comp-clip-hero__badge {
transform: translate(-50%, -50%) scale(1.08);
}
.pn-comp-clip-hero:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-comp-clip-hero__badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 5.2rem;
height: 5.2rem;
border-radius: 50%;
background: rgba(10, 10, 10, 0.8);
border: 3px solid var(--color-amber);
color: var(--color-amber);
box-shadow: 0 0 0 6px rgba(255, 195, 0, 0.12);
transition: transform 160ms ease;
}
.pn-comp-clip-hero__badge svg {
width: 1.7rem;
height: 1.7rem;
margin-left: 0.2rem;
}
.pn-comp-clip-hero__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.5rem 0.9rem;
background: linear-gradient(transparent, rgba(10, 10, 10, 0.85));
font-size: 0.8rem;
color: var(--color-texte);
text-align: left;
}
html.pn-sc-modal-open {
overflow: hidden;
}
.pn-sc-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2.5rem);
}
.pn-sc-modal[hidden] {
display: none;
}
.pn-sc-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(3px);
}
.pn-sc-modal__box {
position: relative;
max-width: 620px;
width: 100%;
max-height: min(84vh, 40rem);
overflow-y: auto;
padding: clamp(1.5rem, 4vw, 2.25rem);
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-left: 3px solid var(--color-amber);
border-radius: 14px;
}
.pn-sc-modal__close {
position: absolute;
top: 0.7rem;
right: 0.85rem;
width: 2.2rem;
height: 2.2rem;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: var(--color-blanc);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.pn-sc-modal__close:hover {
background: rgba(255, 255, 255, 0.12);
}
.pn-sc-modal__close:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-sc-modal__kicker {
margin: 0 0 0.75rem;
padding-right: 2.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-amber);
}
.pn-sc-modal__full {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.7;
color: var(--color-texte);
}
.pn-sc-modal__more {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1rem;
}
.pn-sc-modal__more-kicker {
margin: 0 0 0.75rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-sc-modal__item {
margin: 0 0 1rem;
}
.pn-sc-modal__item-title {
margin: 0 0 0.25rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-sc-modal__item-text {
margin: 0;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-texte-muted);
}
.pn-sc-modal__detail {
margin: 0 0 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
gap: 0.1rem;
}
.pn-sc-modal__detail dt {
margin-top: 0.75rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-copper);
}
.pn-sc-modal__detail dt:first-child {
margin-top: 0;
}
.pn-sc-modal__detail dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-texte);
}
.pn-sc-modal__medias {
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pn-sc-modal__medias .pn-comp-type__media {
margin-bottom: 0;
}
.pn-sc-modal__note {
margin: 0 0 0.75rem;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-texte-muted);
}
.pn-sc-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pn-sc-modal__actions a[hidden] {
display: none;
}
@media (max-width: 767px) {
.pn-sc-modal {
padding: 0;
}
.pn-sc-modal__box {
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
border-radius: 0;
border-top: 0;
border-right: 0;
border-bottom: 0;
}
}
.pn-comp-type__tag--soon {
color: var(--color-copper);
border-color: var(--color-copper);
}
.pn-comp-link {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0.35rem 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-texte);
text-decoration: none;
border-bottom: 1px solid var(--color-bordure-forte);
transition: color 180ms ease, border-color 180ms ease;
}
.pn-comp-link--primary {
color: var(--color-school-bus-yellow);
border-bottom-color: var(--color-school-bus-yellow);
}
@media (hover: hover) {
.pn-comp-link:hover {
color: var(--color-school-bus-yellow);
border-bottom-color: var(--color-school-bus-yellow);
}
}
.pn-comp-link:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 3px;
}
.pn-comp-souscapot {
display: grid;
gap: 1rem;
margin-top: clamp(1.75rem, 4vw, 2.5rem);
padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
background: rgba(255, 195, 0, 0.025);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
}
@media (min-width: 1024px) {
.pn-comp-souscapot {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 2rem;
align-items: center;
}
}
.pn-comp-souscapot__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-school-bus-yellow);
}
.pn-comp-souscapot__txt h3 {
margin: 0 0 0.75rem;
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
font-weight: 700;
color: var(--color-amber);
}
.pn-comp-souscapot__txt p {
margin: 0 0 0.75rem;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-comp-pipeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.05rem;
}
.pn-comp-pipeline li {
position: relative;
padding-left: 1.7rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--color-texte);
text-align: left;
}
.pn-comp-pipeline li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-school-bus-yellow);
box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.12);
}
.pn-comp-pipeline li:not(:last-child)::after {
content: "";
position: absolute;
left: 4px;
top: calc(50% + 10px);
width: 1px;
height: calc(100% + 1.05rem - 14px);
background: linear-gradient(180deg, rgba(255, 195, 0, 0.45), rgba(255, 255, 255, 0.1));
}
@media (min-width: 768px) {
.pn-comp-pipeline {
flex-direction: row;
gap: 0;
}
.pn-comp-pipeline li {
flex: 1;
padding-left: 0;
padding-top: 1.35rem;
text-align: center;
}
.pn-comp-pipeline li::before {
left: 50%;
top: 0;
transform: translateX(-50%);
}
.pn-comp-pipeline li:not(:last-child)::after {
left: calc(50% + 12px);
top: 4px;
width: calc(100% - 24px);
height: 1px;
background: linear-gradient(90deg, rgba(255, 195, 0, 0.45), rgba(255, 255, 255, 0.1));
}
}
.pn-comp-famille__cta {
margin-top: clamp(2rem, 5vw, 3rem);
}
.pn-comp-famille__cta-line {
margin: 0 0 1rem;
font-size: clamp(1.05rem, 2.4vw, 1.25rem);
font-weight: 600;
color: var(--color-blanc);
}
.pn-comp-famille__cta-btns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 767px) {
.pn-comp-famille__cta-btns {
flex-direction: column;
align-items: center;
}
.pn-comp-famille__cta-btns .pn-btn {
width: 275px;
max-width: 100%;
}
}
.pn-comp-cta {
padding-block: clamp(3rem, 8vw, 5.5rem);
background: var(--color-onyx);
text-align: center;
position: relative;
overflow: hidden;
}
.pn-comp-cta::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255, 195, 0, 0.06), transparent 65%);
}
.pn-comp-cta__title {
position: relative;
margin: 0 auto 1rem;
max-width: 18ch;
font-size: clamp(1.6rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-blanc);
}
.pn-comp-cta__lead {
position: relative;
margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
max-width: 52ch;
font-size: clamp(1rem, 2.4vw, 1.2rem);
line-height: 1.6;
color: var(--color-texte-muted);
}
.pn-comp-cta__btns {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
@media (max-width: 767px) {
.pn-comp-cta__btns {
flex-direction: column;
align-items: center;
}
.pn-comp-cta__btns .pn-btn {
width: 275px;
max-width: 100%;
}
}
.pn-comp-cta__soft {
position: relative;
margin: 1rem auto 0;
max-width: 44ch;
font-size: 0.9375rem;
color: var(--color-texte-muted);
}
.pn-comp-cta__soft a {
display: block;
margin-top: 0.35em;
color: var(--color-blanc);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pn-comp-cta__soft a:hover {
text-decoration: none;
}
/* Abstracts (tokens + forwards) */
.pn-blog__list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.pn-blog__item {
padding-bottom: 2rem;
}
.pn-blog__item:last-child {
padding-bottom: 0;
}
.pn-blog__title {
margin: 0 0 0.75rem;
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 650;
letter-spacing: -0.02em;
}
.pn-blog__title a {
color: inherit;
text-decoration: none;
}
.pn-blog__title a:hover, .pn-blog__title a:focus-visible {
color: var(--color-school-bus-yellow);
}
.pn-blog__meta {
margin-bottom: 1rem;
font-size: 0.875rem;
color: var(--color-texte-muted);
}
.pn-blog__excerpt {
color: var(--color-texte);
}
.pn-blog__more {
margin: 1rem 0 0;
}
.pagination {
margin-top: 2rem;
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
justify-content: space-between;
}
.pagination a,
.pagination span {
color: var(--color-texte-muted);
text-decoration: none;
}
.pagination a:hover,
.pagination a:focus-visible {
color: var(--color-school-bus-yellow);
}
.pagination .page-numbers.current {
color: var(--color-blanc);
font-weight: 600;
}
/* Abstracts (tokens + forwards) */
/* ==========================================================================
BLOG — SINGLE ARTICLE
Thème sombre Propulsion Numérique (fallback sans image)
Hero plein écran avec image de fond quand disponible
Corps en fond crème #f9f5ee avec cartes blanches
Pull-quote : dark breakout pleine largeur
========================================================================== */
.pn-blog-container {
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 360px) {
.pn-blog-container {
max-width: calc(100% - 3rem);
padding-inline: 0;
}
}
@media (min-width: 768px) {
.pn-blog-container {
max-width: min(744px, 100% - 40px);
}
}
@media (min-width: 1024px) {
.pn-blog-container {
max-width: min(1000px, 100% - 40px);
}
}
.pn-blog-single {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.pn-blog-single {
padding-bottom: 8rem;
}
}
.pn-blog-single__header {
padding-block: 2rem 4rem;
border-bottom: 1px solid var(--color-bordure-subtile);
margin-bottom: 0;
}
@media (min-width: 768px) {
.pn-blog-single__header {
padding-block: 3rem 6rem;
}
}
.pn-blog-single__header-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
margin-bottom: 2rem;
}
.pn-blog-single__back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-texte-muted);
text-decoration: none;
flex-shrink: 0;
transition: color 0.2s ease;
}
.pn-blog-single__back:hover, .pn-blog-single__back:focus-visible {
color: var(--color-school-bus-yellow);
}
.pn-blog-single__back-arr {
font-size: 1rem;
line-height: 1;
}
.pn-blog-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.pn-blog-breadcrumb__item {
display: flex;
align-items: center;
font-size: 0.8125rem;
color: var(--color-texte-muted);
}
.pn-blog-breadcrumb__item + .pn-blog-breadcrumb__item::before {
content: "/";
margin-inline: 0.35em;
color: var(--color-texte-muted);
opacity: 0.35;
}
.pn-blog-breadcrumb__link {
color: var(--color-texte-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.pn-blog-breadcrumb__link:hover, .pn-blog-breadcrumb__link:focus-visible {
color: var(--color-school-bus-yellow);
}
.pn-blog-single__breadcrumb-current {
color: var(--color-texte-muted);
opacity: 0.5;
}
.pn-blog-single__title {
font-size: clamp(1.5rem, 5vw, 2.75rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
text-transform: none;
color: var(--color-blanc);
margin: 0 0 3rem;
}
@media (min-width: 768px) {
.pn-blog-single__title {
margin-bottom: 4rem;
}
}
.pn-blog-single__head-cluster {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pn-blog-single__cluster-top {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.pn-blog-single__cluster-dates {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.pn-blog-single__cluster-slot {
display: flex;
flex-direction: column;
gap: 3px;
}
.pn-blog-single__cluster-kicker {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--color-texte-muted);
line-height: 1;
}
.pn-blog-single__cluster-kicker--muted {
opacity: 0.55;
}
.pn-blog-single__cluster-date {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-texte);
line-height: 1;
}
.pn-blog-single__cluster-date--muted {
color: var(--color-texte-muted);
}
.pn-blog-single__reading-pill {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-end;
flex-shrink: 0;
}
.pn-blog-single__reading-pill-label {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--color-texte-muted);
line-height: 1;
}
.pn-blog-single__reading-pill-value {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-texte);
line-height: 1;
}
.pn-blog-single__cluster-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.pn-blog-single__cluster-chips-label {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--color-texte-muted);
margin: 0;
flex-shrink: 0;
}
.pn-blog-single__tags-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.pn-blog-single__tags-join {
font-size: 0.75rem;
color: var(--color-texte-muted);
opacity: 0.45;
}
.pn-blog-single__chip {
display: inline-flex;
align-items: center;
padding: 0.25em 0.75em;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 100px;
text-decoration: none;
border: 1px solid var(--color-bordure-forte);
color: var(--color-texte-muted);
background: transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
.pn-blog-single__chip:hover, .pn-blog-single__chip:focus-visible {
color: var(--color-blanc);
border-color: var(--color-school-bus-yellow);
}
.pn-blog-article__hero {
margin: 0 0 4rem;
}
@media (min-width: 768px) {
.pn-blog-article__hero {
margin-bottom: 6rem;
}
}
.pn-blog-article__hero-image {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
aspect-ratio: 16/7;
object-fit: cover;
}
.pn-blog-article__section {
margin-bottom: 4rem;
}
@media (min-width: 768px) {
.pn-blog-article__section {
margin-bottom: 6rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__section {
margin-bottom: 8rem;
}
}
.pn-blog-article__heading {
color: var(--color-school-bus-yellow);
font-size: clamp(1.1875rem, 2.5vw, 1.625rem);
font-weight: 600;
line-height: 1.25;
text-transform: none;
letter-spacing: 0.01em;
margin: 0 0 2rem;
padding-left: 1.5rem;
border-left: 3px solid var(--color-school-bus-yellow);
}
@media (min-width: 768px) {
.pn-blog-article__heading {
font-size: 1.625rem;
padding-left: 2rem;
border-left-width: 4px;
margin-bottom: 3rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__heading {
font-size: 1.875rem;
}
}
.pn-blog-article__section--intro .pn-blog-article__intro p {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
line-height: 1.75;
color: var(--color-texte);
max-width: 66ch;
}
.pn-blog-article__lead {
font-size: clamp(1.125rem, 2.5vw, 1.4375rem);
font-weight: 500;
font-style: italic;
color: var(--color-blanc);
line-height: 1.5;
max-width: 62ch;
margin: 0;
}
.pn-blog-article__intro {
max-width: 72ch;
}
.pn-blog-article__intro p {
color: var(--color-texte);
}
.pn-blog-article__intro + .pn-blog-article__intro {
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.pn-blog-article__intro + .pn-blog-article__intro {
margin-top: 2rem;
}
}
.pn-blog-article__segment {
margin-bottom: 1.5rem;
}
.pn-blog-article__segment:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.pn-blog-article__segment {
margin-bottom: 2rem;
}
}
.pn-blog-article__segment-title--h3 {
color: var(--color-amber);
font-size: clamp(1.125rem, 2vw, 1.25rem);
font-weight: 600;
font-variant-caps: normal;
letter-spacing: 0.01em;
line-height: 1.3;
margin: 0 0 0.75rem;
}
@media (min-width: 768px) {
.pn-blog-article__segment-title--h3 {
font-size: 1.1875rem;
margin-bottom: 1rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__segment-title--h3 {
font-size: 1.3125rem;
}
}
.pn-blog-article__segment-title--h4 {
color: var(--color-texte-muted);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1.4;
margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
.pn-blog-article__segment-title--h4 {
font-size: 0.875rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__segment-title--h4 {
font-size: 0.9375rem;
}
}
.pn-blog-article__segment-content p,
.pn-blog-article__segment-content li {
color: var(--color-texte);
max-width: 65ch;
}
.pn-blog-article__segment-content p + p {
margin-top: 0.5rem;
}
.pn-blog-article__segment--h3 {
padding: 1.5rem;
background: var(--color-carbon-black);
border-top: 1px solid var(--color-bordure-subtile);
margin-bottom: 0;
}
.pn-blog-article__segment--h3:first-of-type {
border-top: none;
}
.pn-blog-article__segment--h3:last-child {
border-bottom: 1px solid var(--color-bordure-subtile);
}
@media (min-width: 768px) {
.pn-blog-article__segment--h3 {
padding: 2rem 3rem;
}
}
.pn-blog-article__segment--h4 {
padding: 1rem 1.5rem;
padding-left: 3rem;
border-left: 2px solid var(--color-bordure-forte);
margin-left: 1rem;
margin-bottom: 0;
background: transparent;
}
.pn-blog-article__segment--h4:first-of-type {
padding-top: 1.5rem;
}
.pn-blog-article__segment--h4:last-child {
padding-bottom: 1.5rem;
margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
.pn-blog-article__segment--h4 {
padding-left: 4rem;
margin-left: 2rem;
}
}
.pn-blog-article__segment--pn-row {
padding: 1.5rem;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 2px;
}
@media (min-width: 768px) {
.pn-blog-article__segment--pn-row {
padding: 2rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__section:has(.pn-blog-article__segment--pn-row) {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
.pn-blog-article__section:has(.pn-blog-article__segment--pn-row) > .pn-blog-article__heading {
grid-column: 1/-1;
margin-bottom: 0;
}
.pn-blog-article__section:has(.pn-blog-article__segment--pn-row) > .pn-blog-article__segment--pn-row {
margin-bottom: 0;
}
}
.pn-blog-article__section--cta {
padding: 3rem 1.5rem;
background: var(--color-carbon-black);
border: 1px solid var(--color-school-bus-yellow);
border-radius: 3px;
text-align: center;
}
.pn-blog-article__section--cta > .pn-blog-article__heading {
border-left: none;
padding-left: 0;
color: var(--color-school-bus-yellow);
font-size: clamp(1.25rem, 3vw, 1.875rem);
margin-bottom: 1.5rem;
}
.pn-blog-article__section--cta > .pn-blog-article__intro {
margin-inline: auto;
}
.pn-blog-article__section--cta > .pn-blog-article__intro p {
color: var(--color-texte);
}
@media (min-width: 768px) {
.pn-blog-article__section--cta {
padding: 4rem 4rem;
}
}
@media (min-width: 1024px) {
.pn-blog-article__section--cta {
padding: 6rem 6rem;
}
}
.pn-blog-article__cta-wrap {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.pn-blog-single__footer-wrap {
margin-top: 6rem;
padding-top: 3rem;
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-blog-single__end {
text-align: center;
padding-bottom: 3rem;
}
.pn-blog-single__end-lead {
color: var(--color-texte-muted);
max-width: 46ch;
margin: 0 auto 1.5rem;
}
.pn-blog-single__end-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.5rem;
}
.pn-blog-single__end-link-topic {
color: var(--color-texte-muted);
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.pn-blog-single__end-link-topic:hover {
color: var(--color-school-bus-yellow);
}
.pn-blog-single:not(.pn-blog-single--has-hero) .pn-blog-single__body--light {
padding-top: 4rem;
}
@media (min-width: 768px) {
.pn-blog-single:not(.pn-blog-single--has-hero) .pn-blog-single__body--light {
padding-top: 6rem;
}
}
.pn-blog-single--has-hero .pn-blog-single__body--light {
padding-top: 2rem;
}
@media (min-width: 768px) {
.pn-blog-single--has-hero .pn-blog-single__body--light {
padding-top: 3rem;
}
}
.pn-blog-single--has-hero > .pn-blog-single__article > .pn-blog-single__header {
display: none;
}
.pn-blog-single__hero {
background: var(--color-onyx);
padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem);
}
.pn-blog-single__hero-grid {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 768px) {
.pn-blog-single__hero-grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
}
.pn-blog-single__hero-text {
min-width: 0;
}
.pn-blog-single__hero-text .pn-blog-single__back--hero {
margin-bottom: 1.5rem;
}
.pn-blog-single__hero-text .pn-blog-single__title--hero {
margin-bottom: 1.5rem;
}
.pn-blog-single__hero-cat {
display: block;
width: fit-content;
margin-bottom: 1rem;
padding: 0.3rem 0.7rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-school-bus-yellow);
border: 1px solid rgba(255, 195, 0, 0.45);
border-radius: 999px;
}
.pn-blog-single__hero-figure {
margin: 0;
min-width: 0;
}
.pn-blog-single__hero-img {
display: block;
width: auto;
max-width: 80%;
max-height: clamp(280px, 42svh, 440px);
margin-inline: auto;
height: auto;
border-radius: 14px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.pn-blog-single__back--hero {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
margin-bottom: 3rem;
transition: color 0.2s ease;
}
.pn-blog-single__back--hero:hover, .pn-blog-single__back--hero:focus-visible {
color: var(--color-school-bus-yellow);
}
.pn-blog-single__title--hero {
font-size: clamp(1.75rem, 4.4vw, 3.125rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-blanc);
margin: 0 0 2rem;
text-transform: none;
max-width: 26ch;
}
@media (min-width: 768px) {
.pn-blog-single__title--hero {
margin-bottom: 3rem;
}
}
.pn-blog-single__body--light .pn-blog-article__section--intro {
margin-bottom: 1.5rem;
}
.pn-blog-single__body--light .pn-blog-article__section--intro .pn-blog-article__intro p {
font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
line-height: 1.7;
color: #1a1a1a;
}
.pn-blog-single__body--light .pn-blog-article__pullquote + .pn-blog-article__section .pn-blog-article__intro p {
font-size: 1.0625rem;
line-height: 1.7;
}
.pn-blog-single__body--light .pn-blog-article__pullquote + .pn-blog-article__section {
margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.pn-blog-single__body--light .pn-blog-article__segment-content--exemple {
margin-top: 0.75rem;
padding: 0.75rem 1rem 0.85rem;
background: rgba(255, 195, 0, 0.07);
border-left: 3px solid rgba(160, 68, 32, 0.55);
border-radius: 6px;
}
.pn-blog-single__body--light .pn-blog-article__segment-content--exemple p {
font-style: italic;
color: #4a443a;
}
.pn-blog-single__body--light .pn-blog-article__exemple-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #a04420;
font-style: normal;
}
.pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) strong em, .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) em strong,
.pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) strong i, .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) i strong,
.pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) b em, .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) em b,
.pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) b i, .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) i b {
color: #a04420;
}
.pn-blog-single__hero-meta-bar {
background: var(--color-onyx);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 0;
padding-block: 1rem 1.5rem;
}
.pn-blog-single__hero-meta-bar .pn-blog-single__header-tools,
.pn-blog-single__hero-meta-bar .pn-blog-single__title {
display: none;
}
.pn-blog-single__body--light {
background: #f9f5ee;
padding-bottom: 8rem;
}
@media (min-width: 768px) {
.pn-blog-single__body--light {
padding-bottom: 4rem;
}
.pn-blog-single__body--light .pn-blog-article__section--cta {
margin-bottom: 0;
}
}
.pn-blog-single__body--light .pn-blog-article {
background: transparent;
}
.pn-blog-single__body--light .pn-blog-article__heading {
color: #1a1a1a;
border-left-color: var(--color-school-bus-yellow);
}
.pn-blog-single__body--light .pn-blog-article__segment-title--h3 {
color: #a04420;
}
.pn-blog-single__body--light .pn-blog-article__segment-content p,
.pn-blog-single__body--light .pn-blog-article__segment-content li {
color: #2a2a2a;
}
.pn-blog-single__body--light .pn-blog-article__intro p {
color: #2a2a2a;
}
.pn-blog-single__body--light .pn-blog-article__segment--pn-row {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.pn-blog-single__body--light .pn-blog-article__segment--h3 {
background: #ffffff;
border-top-color: rgba(0, 0, 0, 0.08);
}
.pn-blog-single__body--light .pn-blog-article__segment--h3:last-child {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
.pn-blog-single__body--light .pn-blog-article__segment--h4 {
border-left-color: rgba(0, 0, 0, 0.15);
}
.pn-blog-single__body--light .pn-blog-article__segment-title--h4 {
color: #444;
}
.pn-blog-single__body--light .pn-blog-article__section--cta {
background: var(--color-carbon-black);
border-color: var(--color-school-bus-yellow);
}
.pn-blog-single__body--light .pn-blog-article__section--cta > .pn-blog-article__heading {
color: var(--color-school-bus-yellow);
border-left: 0;
padding-left: 0;
}
.pn-blog-single__body--light .pn-blog-article__section--cta > .pn-blog-article__intro p {
color: var(--color-texte);
}
.pn-blog-single__comments-wrap {
margin-top: 2rem;
padding-top: 2rem;
padding-bottom: 3rem;
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-blog-single__comments-wrap + .pn-blog-single__footer-wrap {
margin-top: 0;
}
.pn-comments__title,
.pn-comments__form-title {
font-size: clamp(1.25rem, 2.6vw, 1.625rem);
font-weight: 600;
color: var(--color-blanc);
margin: 0 0 1.5rem;
}
.pn-comments__form-title {
margin-top: 1.5rem;
}
.pn-comments__notes {
font-size: 0.875rem;
color: var(--color-texte-muted);
max-width: 60ch;
}
.pn-comments__closed {
color: var(--color-texte-muted);
font-style: italic;
}
.pn-comments__hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.pn-comments__list {
list-style: none;
margin: 0;
padding: 0;
}
.pn-comments__list .comment {
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
}
.pn-comments__list .children {
list-style: none;
margin: 1rem 0 0;
padding-left: clamp(1rem, 4vw, 2rem);
}
.pn-comments__list .comment-author {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-comments__list .comment-author .avatar {
border-radius: 50%;
}
.pn-comments__list .comment-author .says {
display: none;
}
.pn-comments__list .comment-metadata {
font-size: 0.78rem;
margin: 0.25rem 0 0.6rem;
}
.pn-comments__list .comment-metadata a {
color: var(--color-texte-muted);
text-decoration: none;
}
.pn-comments__list .comment-metadata a:hover {
color: var(--color-school-bus-yellow);
}
.pn-comments__list .comment-content {
color: var(--color-texte);
font-size: 0.95rem;
line-height: 1.65;
}
.pn-comments__list .comment-content p {
margin: 0 0 0.6em;
}
.pn-comments__list .comment-content p:last-child {
margin-bottom: 0;
}
.pn-comments__list .comment-awaiting-moderation {
display: block;
font-size: 0.8rem;
font-style: italic;
color: var(--color-school-bus-yellow);
margin-bottom: 0.5rem;
}
.pn-comments__list .reply {
margin-top: 0.6rem;
}
.pn-comments__list .reply a {
font-size: 0.8rem;
color: var(--color-texte-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.pn-comments__list .reply a:hover {
color: var(--color-school-bus-yellow);
}
.pn-comments .comment-form {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 640px;
}
.pn-comments .comment-form > p {
margin: 0;
}
@media (min-width: 768px) {
.pn-comments .comment-form {
grid-template-columns: 1fr 1fr;
}
.pn-comments .comment-form .comment-notes,
.pn-comments .comment-form .comment-form-comment,
.pn-comments .comment-form .comment-form-cookies-consent,
.pn-comments .comment-form .form-submit {
grid-column: 1/-1;
}
}
.pn-comments .comment-form label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-texte);
}
.pn-comments .comment-form input[type=text],
.pn-comments .comment-form input[type=email],
.pn-comments .comment-form input[type=url],
.pn-comments .comment-form textarea {
width: 100%;
max-width: 640px;
padding: 0.65rem 0.85rem;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 6px;
color: var(--color-blanc);
font: inherit;
}
.pn-comments .comment-form input[type=text]:focus-visible,
.pn-comments .comment-form input[type=email]:focus-visible,
.pn-comments .comment-form input[type=url]:focus-visible,
.pn-comments .comment-form textarea:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 1px;
border-color: transparent;
}
.pn-comments .comment-form .comment-form-cookies-consent {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.pn-comments .comment-form .comment-form-cookies-consent label {
display: inline;
font-weight: 400;
color: var(--color-texte-muted);
font-size: 0.83rem;
}
.pn-comments .comment-form .comment-form-cookies-consent input {
width: auto;
}
.pn-comments .comment-form .form-submit {
margin: 0;
}
.pn-blog-article__pullquote {
position: relative;
margin: 0 0 1.5rem;
padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-left: 4px solid #a04420;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.pn-blog-article__pullquote::before {
content: "“";
position: absolute;
top: clamp(1rem, 2.6vw, 1.8rem);
left: clamp(1rem, 2.5vw, 1.5rem);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(3.75rem, 8vw, 5rem);
font-weight: 700;
line-height: 1;
color: rgba(160, 68, 32, 0.85);
pointer-events: none;
}
.pn-blog-article__pullquote-text {
font-size: clamp(1.1875rem, 2.4vw, 1.625rem);
font-weight: 600;
font-style: italic;
color: #a04420;
line-height: 1.45;
max-width: 58ch;
margin: 0;
border: none;
padding: 0 0 0 clamp(2.5rem, 5.5vw, 3.25rem);
quotes: none;
}
/* Abstracts (tokens + forwards) */
/* ==========================================================================
BLOG — MODES DE PRÉSENTATION (mise en page de l'article)
Racine : .pn-blog-single__article--layout-{slug} (posée par single.php) ;
la classe body.pn-blog--layout-{slug} existe aussi (filtre body_class).
Le contenu ne change JAMAIS — seul l'habillage change. Thème CLAIR conservé :
toutes les règles se superposent au corps clair .pn-blog-single__body--light
(crème #f9f5ee, cartes blanches, H2 barre jaune, H3 cuivre #a04420, CTA sombre).
Structure réelle rendue par blog-render(-propulsion).php :
.pn-blog-article__section(--intro|--cta|--related-links)
.pn-blog-article__intro · __heading (H2)
.pn-blog-article__segment(--h3|--h4|--pn-row)
.pn-blog-article__segment-title--h3/--h4 · __segment-media · __segment-content
.pn-blog-article__cta-wrap
Défaut = « classique » → aucun article existant n'est modifié.
========================================================================== */
/* --------------------------------------------------------------------------
CLASSIQUE — la colonne claire actuelle (baseline, léger polish d'intro)
-------------------------------------------------------------------------- */
.pn-blog-single__article--layout-classique .pn-blog-single__body--light .pn-blog-article__intro p:first-child {
font-size: 1.0625rem;
line-height: 1.7;
}
@media (min-width: 768px) {
.pn-blog-single__article--layout-classique .pn-blog-single__body--light .pn-blog-article__intro p:first-child {
font-size: 1.125rem;
line-height: 1.75;
}
}
.pn-blog-single__article--layout-classique .pn-blog-single__body--light .pn-blog-article__section--intro .pn-blog-article__intro {
padding-left: 1rem;
border-left: 3px solid var(--color-school-bus-yellow);
}
/* --------------------------------------------------------------------------
ÉDITORIAL — modèle Certi-Pro recoloré PN : intro encadrée, sections en
cartes claires, segments en panneaux crème, CTA en bandeau (tunnel).
-------------------------------------------------------------------------- */
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section--intro {
padding: 0;
margin-bottom: 1.5rem;
background: transparent;
border: 0;
box-shadow: none;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section--intro .pn-blog-article__intro {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
padding: clamp(1.1rem, 3vw, 1.75rem);
border-left: 4px solid var(--color-school-bus-yellow);
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links) {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
padding: clamp(1.1rem, 3vw, 1.75rem);
margin-bottom: 1.5rem;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading {
display: flex;
align-items: center;
gap: 0.6rem;
border-left: 0;
padding-left: 0;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading::before {
content: "";
flex: 0 0 auto;
width: 0.8em;
height: 0.8em;
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%201H20L23%204V20L20%2023H4L1%2020V4Z'%20fill='none'%20stroke='%23ffc300'%20stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--h3,
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--pn-row {
background: #f4efe6;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: clamp(0.85rem, 2.5vw, 1.15rem) clamp(1rem, 3vw, 1.35rem);
margin-bottom: 1rem;
box-shadow: none;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--h3:last-child,
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--pn-row:last-child {
margin-bottom: 0;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--h4 {
margin-left: 0.75rem;
padding-left: 0.75rem;
border-left: 2px solid rgba(0, 0, 0, 0.18);
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section--cta {
border-radius: 12px;
padding: clamp(1.5rem, 4vw, 2.25rem);
text-align: center;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__cta-wrap {
justify-content: center;
}
@media (max-width: 767px) {
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section--intro .pn-blog-article__intro,
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links) {
margin-inline: -0.5rem;
padding-inline: 0.9rem;
}
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--h3,
.pn-blog-single__article--layout-editorial .pn-blog-single__body--light .pn-blog-article__segment--pn-row {
padding-inline: 0.7rem;
}
}
/* --------------------------------------------------------------------------
MAGAZINE — élégance éditoriale : lettrine, filets fins, images raffinées,
beaucoup d'air. Texte-mené, genre magazine haut de gamme.
-------------------------------------------------------------------------- */
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) .pn-blog-article__intro p:first-child {
font-size: clamp(1.15rem, 2.6vw, 1.4rem);
line-height: 1.75;
font-weight: 400;
color: #1a1a1a;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section--intro .pn-blog-article__intro p:first-child::first-letter {
float: left;
margin: 0.06em 0.12em 0 0;
font-family: var(--font-slake);
font-weight: 700;
font-size: 3.6em;
line-height: 0.72;
color: #a04420;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section {
margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment-content p,
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) .pn-blog-article__intro p {
font-size: 1.05rem;
line-height: 1.85;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading {
position: relative;
border-left: 0;
padding-left: 0;
padding-bottom: 1rem;
font-size: clamp(1.5rem, 3.4vw, 2.1rem);
letter-spacing: -0.01em;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 48px;
height: 2px;
background: var(--color-school-bus-yellow);
}
@media (min-width: 768px) {
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: clamp(1.5rem, 3.5vw, 2.5rem);
align-items: start;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) .pn-blog-article__segment-title--h3 {
grid-column: 1/-1;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) .pn-blog-article__segment-media {
width: 100%;
max-width: none;
margin: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment--h3:nth-of-type(even):has(.pn-blog-article__segment-media) .pn-blog-article__segment-content {
order: 1;
}
.pn-blog-single__article--layout-magazine .pn-blog-single__body--light .pn-blog-article__segment--h3:nth-of-type(even):has(.pn-blog-article__segment-media) .pn-blog-article__segment-media {
order: 2;
}
}
/* --------------------------------------------------------------------------
GUIDE — étapes numérotées, rail latéral, encadrés « à retenir », beaucoup
d'air. Pédagogique / pas-à-pas.
-------------------------------------------------------------------------- */
.pn-blog-single__article--layout-guide .pn-blog-single__body--light {
--pn-guide-indent: 2.75rem;
--pn-guide-badge: 2rem;
}
@media (min-width: 768px) {
.pn-blog-single__article--layout-guide .pn-blog-single__body--light {
--pn-guide-indent: 3.5rem;
--pn-guide-badge: 2.5rem;
}
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article {
counter-reset: pn-guide-step;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) {
counter-increment: pn-guide-step;
position: relative;
margin-bottom: clamp(2.25rem, 5.5vw, 3.5rem);
padding-left: var(--pn-guide-indent);
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading)::before {
content: "";
position: absolute;
left: calc(var(--pn-guide-indent) / 2 - 1px);
top: 0.5em;
bottom: 0;
width: 2px;
background: rgba(0, 0, 0, 0.1);
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) > .pn-blog-article__heading {
border-left: 0;
padding-left: 0;
position: relative;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) > .pn-blog-article__heading::before {
content: counter(pn-guide-step);
position: absolute;
top: -0.15em;
left: calc(-1 * (var(--pn-guide-indent) / 2 + var(--pn-guide-badge) / 2));
display: grid;
place-items: center;
width: var(--pn-guide-badge);
height: var(--pn-guide-badge);
background: var(--color-school-bus-yellow);
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 700;
border-radius: 9px;
box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.14);
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__segment--pn-row {
background: #fffdf5;
border: 1px solid rgba(255, 195, 0, 0.35);
border-left: 4px solid var(--color-school-bus-yellow);
border-radius: 8px;
box-shadow: none;
padding: clamp(0.9rem, 2.5vw, 1.2rem) clamp(1rem, 3vw, 1.4rem);
margin-bottom: 1rem;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__segment--pn-row:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) {
padding-left: 0;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading)::before {
content: none;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) > .pn-blog-article__heading {
display: flex;
align-items: center;
gap: 0.55rem;
}
.pn-blog-single__article--layout-guide .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--intro):not(.pn-blog-article__section--cta):not(.pn-blog-article__section--related-links):has(> .pn-blog-article__heading) > .pn-blog-article__heading::before {
position: static;
flex: 0 0 auto;
}
}
/* --------------------------------------------------------------------------
VITRINE — showcase produit premium : chaque bloc image/texte devient un
PANNEAU « feature » avec profondeur, grandes images glossy, titres bold,
lift au survol, CTA qui glow. Image-mené, genre page produit.
-------------------------------------------------------------------------- */
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading {
border-left: 0;
padding-left: 0;
font-size: clamp(1.7rem, 4.4vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.12;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__section:not(.pn-blog-article__section--cta) > .pn-blog-article__heading::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: 0.75rem;
border-radius: 2px;
background: var(--color-school-bus-yellow);
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3 {
background: linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
padding: clamp(1.1rem, 3.2vw, 1.85rem);
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment-media {
width: 100%;
max-width: none;
margin: 0 0 1rem;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment-image {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 1024px) {
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(1.75rem, 4vw, 3rem);
align-items: center;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) .pn-blog-article__segment-title--h3 {
grid-column: 1/-1;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3:has(.pn-blog-article__segment-media) .pn-blog-article__segment-media {
margin: 0;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3:nth-of-type(even):has(.pn-blog-article__segment-media) .pn-blog-article__segment-content {
order: 1;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--h3:nth-of-type(even):has(.pn-blog-article__segment-media) .pn-blog-article__segment-media {
order: 2;
}
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--pn-row {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-top: 3px solid var(--color-school-bus-yellow);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
padding: clamp(1.1rem, 3vw, 1.6rem);
margin-bottom: 1.5rem;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__segment--pn-row:last-child {
margin-bottom: 0;
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__section--cta {
border-radius: 18px;
padding: clamp(1.9rem, 5vw, 3rem);
text-align: center;
box-shadow: 0 0 0 1px rgba(255, 195, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.2);
}
.pn-blog-single__article--layout-vitrine .pn-blog-single__body--light .pn-blog-article__cta-wrap {
justify-content: center;
}
/* Abstracts (tokens + forwards) */
.pn-legal-shell {
padding-block: clamp(4rem, 10svh, 6rem) clamp(4rem, 12svh, 7rem);
background: var(--color-onyx);
}
.pn-legal__container {
max-width: 46rem;
}
.pn-legal__header {
text-align: center;
margin-bottom: clamp(2.5rem, 6svh, 4rem);
}
.pn-legal__kicker {
margin: 0 0 1rem;
}
.pn-legal__title {
font-size: clamp(1.9rem, 5vw, 3rem);
font-weight: 600;
text-transform: uppercase;
color: var(--color-blanc);
line-height: 1.15;
margin: 0 0 1rem;
}
.pn-legal__update {
font-size: 0.9rem;
color: var(--color-texte-muted);
margin: 0;
}
.pn-legal__content {
color: var(--color-texte);
line-height: 1.7;
}
.pn-legal__content p {
margin: 0 0 1.5rem;
}
.pn-legal__content h2 {
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
font-weight: 600;
color: var(--color-blanc);
margin: 3rem 0 1rem;
}
.pn-legal__content ul {
margin: 0 0 1.5rem;
padding-left: 1.25rem;
}
.pn-legal__content ul li {
margin-bottom: 0.5rem;
}
.pn-legal__content a {
color: var(--color-goldenrod);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pn-legal__content a:hover, .pn-legal__content a:focus-visible {
color: var(--color-amber);
}
.pn-legal__address {
font-style: normal;
line-height: 1.8;
padding: 1.5rem;
border: 1px solid var(--color-bordure-subtile);
border-radius: 0.5rem;
background: var(--color-carbon-black);
margin: 0 0 1.5rem;
}
/* Abstracts (tokens + forwards) */
.pn-produits-shell {
padding-block: clamp(3.5rem, 9svh, 6rem) clamp(4rem, 11svh, 7rem);
background: var(--color-onyx);
}
.pn-produits__inner {
max-width: 46rem;
}
.pn-produits__head {
text-align: center;
margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.pn-produits__title {
margin: 0.75rem 0 1rem;
font-size: clamp(1.8rem, 4.5vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-blanc);
}
.pn-produits__title em {
font-style: normal;
color: var(--color-school-bus-yellow);
}
.pn-produits__lead {
margin: 0 auto;
max-width: 52ch;
color: var(--color-texte-muted);
line-height: 1.6;
}
.pn-produit {
margin-bottom: clamp(1.5rem, 4vw, 2rem);
padding: clamp(1.5rem, 4vw, 2.25rem);
border: 1px solid var(--color-bordure-subtile);
border-top: 3px solid var(--color-amber);
border-radius: 14px;
background: rgba(255, 255, 255, 0.015);
}
.pn-produit--teaser {
opacity: 0.85;
}
.pn-produit__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin-bottom: 1rem;
}
.pn-produit__name {
margin: 0;
font-size: clamp(1.3rem, 3vw, 1.6rem);
font-weight: 700;
color: var(--color-blanc);
}
.pn-produit__badge {
padding: 0.3rem 0.8rem;
border: 1px solid var(--color-bordure-forte);
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-texte-muted);
}
.pn-produit__badge--soon {
border-color: rgba(255, 195, 0, 0.5);
color: var(--color-school-bus-yellow);
}
.pn-produit__pitch {
margin: 0 0 1rem;
line-height: 1.65;
color: var(--color-texte);
}
.pn-produit__points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.pn-produit__points li {
position: relative;
padding-left: 1.3rem;
color: var(--color-texte-muted);
line-height: 1.55;
}
.pn-produit__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
transform: rotate(45deg);
background: var(--color-school-bus-yellow);
border-radius: 2px;
}
.pn-produits__note {
margin: clamp(2rem, 5vw, 3rem) 0 0;
text-align: center;
color: var(--color-texte-muted);
line-height: 1.6;
}
.pn-produits__note a {
color: var(--color-school-bus-yellow);
}
/* Abstracts (tokens + forwards) */
.pn-main--testeurs {
background: var(--color-onyx);
}
.pn-testeurs {
position: relative;
padding-block: clamp(2rem, 6vw, 4rem);
}
.pn-testeurs::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 34% at 50% 0%, rgba(255, 195, 0, 0.06), transparent 70%);
}
.pn-testeurs button,
.pn-testeurs input,
.pn-testeurs textarea {
font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
font-variant-ligatures: none;
}
.pn-testeurs__inner {
position: relative;
max-width: 720px;
margin-inline: auto;
padding-inline: 1.1rem;
}
.pn-testeurs__entete {
text-align: center;
margin-bottom: 1.4rem;
}
.pn-testeurs__marque {
font-size: clamp(1.8rem, 6.5vw, 2.5rem);
font-weight: 800;
color: var(--color-school-bus-yellow);
line-height: 1.2;
margin: 0;
}
.pn-testeurs__sous-titre {
font-size: clamp(1.1rem, 3.5vw, 1.35rem);
color: var(--color-blanc);
margin: 0.45rem 0 0;
}
.pn-testeurs-bandeau {
background: linear-gradient(135deg, rgba(255, 195, 0, 0.1), rgba(184, 115, 51, 0.08));
border: 1px solid rgba(255, 195, 0, 0.35);
border-radius: 14px;
padding: 1.15rem 1.25rem;
margin-bottom: 1.4rem;
}
.pn-testeurs-bandeau p {
font-size: 1rem;
margin: 0;
}
.pn-testeurs-bandeau p + p {
margin-top: 0.5rem;
}
.pn-testeurs-bandeau strong {
color: var(--color-blanc);
}
.pn-testeurs-bandeau__titre {
font-size: clamp(1.05rem, 3.5vw, 1.25rem);
font-weight: 800;
color: var(--color-school-bus-yellow);
margin: 0 0 0.4rem !important;
}
.pn-testeurs-bandeau__temps {
margin-top: 0.7rem !important;
font-size: 0.95rem !important;
color: var(--color-texte-muted);
border-top: 1px dashed var(--color-bordure-forte);
padding-top: 0.6rem;
}
.pn-testeurs-intro {
color: var(--color-texte-muted);
font-size: 1rem;
margin: 0 0 1.4rem;
}
.pn-testeurs-intro strong {
color: var(--color-texte);
}
.pn-testeurs-encart {
font-size: 0.95rem;
color: var(--color-school-bus-yellow);
font-weight: 600;
margin: 0 0 0.3rem;
}
.pn-testeurs-note-franche {
font-size: 0.95rem;
color: var(--color-texte);
border-left: 3px solid var(--color-school-bus-yellow);
padding: 0.35rem 0 0.35rem 0.8rem;
margin: 0.7rem 0 1.1rem;
}
.pn-testeurs-lien-page {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0 0.4rem 1.2rem 0;
padding: 0.45rem 0.9rem;
border: 1px solid var(--color-bordure-forte);
border-radius: 99px;
color: var(--color-school-bus-yellow);
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
transition: border-color 0.2s, background 0.2s;
}
.pn-testeurs-lien-page:hover {
border-color: var(--color-school-bus-yellow);
background: rgba(255, 195, 0, 0.07);
}
.pn-testeurs-badge {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-texte-muted);
border: 1px solid var(--color-bordure-subtile);
border-radius: 99px;
padding: 0.1rem 0.5rem;
vertical-align: middle;
margin-left: 0.4rem;
}
.pn-testeurs-progress {
position: sticky;
top: 0;
z-index: 10;
background: rgba(10, 10, 10, 0.92);
backdrop-filter: blur(6px);
padding: 0.7rem 0 0.5rem;
border-bottom: 1px solid var(--color-bordure-subtile);
margin-bottom: 0.5rem;
}
.pn-testeurs-progress__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--color-texte-muted);
margin-bottom: 0.35rem;
}
.pn-testeurs-progress__etape {
font-weight: 700;
color: var(--color-texte);
}
.pn-testeurs-progress__libre {
color: var(--color-school-bus-yellow);
}
.pn-testeurs-progress__barre {
height: 6px;
background: var(--color-graphite);
border-radius: 99px;
overflow: hidden;
}
.pn-testeurs-progress__barre span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-copper), var(--color-school-bus-yellow));
border-radius: 99px;
transition: width 0.35s ease;
}
.pn-testeurs-progress__sauvegarde {
font-size: 0.82rem;
color: #7fce8b;
text-align: right;
margin-top: 0.25rem;
opacity: 0;
transition: opacity 0.3s;
}
.pn-testeurs-progress__sauvegarde.is-visible {
opacity: 1;
}
.pn-testeurs-flash {
background: rgba(192, 92, 44, 0.14);
border: 1px solid rgba(192, 92, 44, 0.5);
border-radius: 14px;
padding: 0.9rem 1.1rem;
font-size: 0.95rem;
margin: 0 0 1.2rem;
}
.pn-testeurs-flash a {
color: var(--color-school-bus-yellow);
}
.pn-testeurs__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pn-testeurs-step {
padding-top: 1.5rem;
}
.js-stepper .pn-testeurs-step {
display: none;
animation: pn-testeurs-fadein 0.35s ease;
}
.js-stepper .pn-testeurs-step.is-active {
display: block;
}
@keyframes pn-testeurs-fadein {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
.pn-testeurs-step h2 {
font-size: clamp(1.25rem, 4.5vw, 1.6rem);
color: var(--color-blanc);
font-weight: 800;
margin: 0 0 0.4rem;
}
.pn-testeurs-q {
margin-bottom: 2.75rem;
}
.pn-testeurs-q--sous {
margin-bottom: 1.6rem;
}
.pn-testeurs-q__label {
display: block;
font-weight: 700;
color: var(--color-blanc);
font-size: 1.02rem;
margin-bottom: 0.25rem;
}
.pn-testeurs-q__label--sous {
font-size: 1rem;
}
.pn-testeurs-q__aide {
font-size: 0.95rem;
color: var(--color-texte-muted);
margin: 0 0 0.6rem;
}
.pn-testeurs-q__complement {
margin-top: 0.7rem;
}
.pn-testeurs-input {
width: 100%;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 14px;
color: var(--color-texte);
font-family: inherit;
font-size: 1rem;
padding: 0.8rem 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pn-testeurs-input:focus {
outline: none;
border-color: var(--color-school-bus-yellow);
box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.pn-testeurs-input::placeholder {
color: rgba(232, 232, 228, 0.55);
}
textarea.pn-testeurs-input {
min-height: 96px;
resize: vertical;
}
.pn-testeurs-seg {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.pn-testeurs-pill {
cursor: pointer;
}
.pn-testeurs-pill input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.pn-testeurs-pill span {
display: inline-flex;
align-items: center;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 99px;
color: var(--color-texte);
font-size: 0.95rem;
font-weight: 600;
padding: 0.55rem 1.05rem;
min-height: 44px;
transition: all 0.15s;
}
.pn-testeurs-pill:hover span {
border-color: var(--color-school-bus-yellow);
}
.pn-testeurs-pill input:checked + span {
background: var(--color-school-bus-yellow);
border-color: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
.pn-testeurs-pill input:focus-visible + span {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-testeurs-scale {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
}
.pn-testeurs-scale__item {
flex: 1 1 0;
min-width: 44px;
cursor: pointer;
}
.pn-testeurs-scale__item input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.pn-testeurs-scale__item span {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 12px;
color: var(--color-texte);
font-size: 1.05rem;
font-weight: 700;
transition: all 0.15s;
}
.pn-testeurs-scale__item:hover span {
border-color: var(--color-school-bus-yellow);
}
.pn-testeurs-scale__item input:checked + span {
background: var(--color-school-bus-yellow);
border-color: var(--color-school-bus-yellow);
color: var(--color-onyx);
transform: translateY(-2px);
}
.pn-testeurs-scale__item input:focus-visible + span {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-testeurs-scale__legende {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
color: var(--color-texte-muted);
margin-top: 0.35rem;
}
.pn-testeurs-chips {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.pn-testeurs-chip {
cursor: pointer;
}
.pn-testeurs-chip input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.pn-testeurs-chip span {
display: inline-flex;
align-items: center;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-forte);
border-radius: 99px;
color: var(--color-texte);
font-size: 0.95rem;
padding: 0.5rem 1rem;
min-height: 42px;
transition: all 0.15s;
}
.pn-testeurs-chip:hover span {
border-color: var(--color-school-bus-yellow);
}
.pn-testeurs-chip input:checked + span {
background: rgba(255, 195, 0, 0.14);
border-color: var(--color-school-bus-yellow);
color: var(--color-school-bus-yellow);
font-weight: 700;
}
.pn-testeurs-chip input:checked + span::before {
content: "✓ ";
white-space: pre;
}
.pn-testeurs-chip input:focus-visible + span {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.pn-testeurs-suivi {
margin-top: 0.7rem;
display: none;
}
.pn-testeurs-suivi.is-visible {
display: block;
animation: pn-testeurs-fadein 0.3s ease;
}
.pn-testeurs-btn {
font-family: inherit;
font-size: 1rem;
font-weight: 700;
border-radius: 99px;
padding: 0.75rem 1.6rem;
min-height: 48px;
cursor: pointer;
border: 1px solid var(--color-bordure-forte);
background: transparent;
color: var(--color-texte);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.pn-testeurs-btn:hover {
border-color: var(--color-school-bus-yellow);
color: var(--color-school-bus-yellow);
}
.pn-testeurs-btn--primaire {
background: var(--color-school-bus-yellow);
border-color: var(--color-school-bus-yellow);
color: var(--color-onyx);
}
.pn-testeurs-btn--primaire:hover {
background: var(--color-goldenrod);
border-color: var(--color-goldenrod);
color: var(--color-onyx);
}
.pn-testeurs-btn--large {
width: 100%;
}
.pn-testeurs-nav {
display: flex;
justify-content: space-between;
gap: 0.8rem;
margin-top: 2.2rem;
padding-top: 1.2rem;
border-top: 1px solid var(--color-bordure-subtile);
}
.pn-testeurs:not(.js-stepper) .pn-testeurs-nav {
display: none;
}
.pn-testeurs-outils {
margin-top: 1.4rem;
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
padding: 1.2rem;
}
.pn-testeurs-outils h3 {
color: var(--color-blanc);
font-size: 1rem;
margin: 0 0 0.7rem;
}
.pn-testeurs-outils__boutons {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1rem;
}
.pn-testeurs-qr {
display: flex;
align-items: center;
gap: 1rem;
border-top: 1px dashed var(--color-bordure-forte);
padding-top: 1rem;
}
.pn-testeurs-qr img {
width: 110px;
height: 110px;
border-radius: 10px;
background: var(--color-blanc);
padding: 4px;
flex-shrink: 0;
}
.pn-testeurs-qr p {
font-size: 0.95rem;
color: var(--color-texte-muted);
margin: 0;
}
.pn-testeurs-qr p strong {
color: var(--color-texte);
}
.pn-testeurs-recap {
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
padding: 1.1rem 1.2rem;
margin-bottom: 1.4rem;
font-size: 1rem;
color: var(--color-texte-muted);
}
.pn-testeurs-recap p {
margin: 0;
}
.pn-testeurs-recap strong {
color: var(--color-school-bus-yellow);
font-size: 1.3rem;
}
.pn-testeurs-envoi {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.pn-testeurs-envoi__secours {
margin-top: 1.2rem;
}
.pn-testeurs-coordonnees {
background: var(--color-carbon-black);
border: 1px solid var(--color-bordure-subtile);
border-radius: 14px;
padding: 1rem 1.2rem;
margin-top: 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
}
.pn-testeurs-coordonnees p {
margin: 0;
}
.pn-testeurs-coordonnees a {
color: var(--color-school-bus-yellow);
text-decoration: none;
font-size: 1.15rem;
}
.pn-testeurs-coordonnees a:hover {
text-decoration: underline;
}
.pn-testeurs-merci {
text-align: center;
padding: 3rem 0;
}
.pn-testeurs-merci h2 {
font-size: clamp(1.25rem, 4.5vw, 1.6rem);
color: var(--color-blanc);
margin: 0 0 0.6rem;
}
.pn-testeurs-merci p {
color: var(--color-texte-muted);
max-width: 460px;
margin: 0 auto 0.5rem;
}
.pn-testeurs-merci a {
color: var(--color-school-bus-yellow);
}
.pn-testeurs-merci__emoji {
font-size: 3rem;
margin-bottom: 0.8rem;
}
.pn-testeurs-toast {
position: fixed;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--color-graphite);
color: var(--color-blanc);
border: 1px solid var(--color-bordure-forte);
border-radius: 99px;
padding: 0.6rem 1.3rem;
font-size: 0.95rem;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
z-index: 50;
}
.pn-testeurs-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 380px) {
.pn-testeurs-scale__item {
min-width: 38px;
}
.pn-testeurs-scale__item span {
font-size: 0.95rem;
}
.pn-testeurs-qr {
flex-direction: column;
text-align: center;
}
}
/* Abstracts (tokens + forwards) */
.pn-main--404 {
background: var(--color-onyx);
}
.pn-404-hero {
position: relative;
overflow: hidden;
text-align: center;
background: var(--color-onyx);
padding-block: clamp(3rem, 10svh, 6rem);
}
.pn-404-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255, 195, 0, 0.05) 0%, rgba(192, 92, 44, 0.025) 50%, transparent 75%);
}
.pn-404-hero__inner {
position: relative;
z-index: 1;
max-width: 46rem;
margin-inline: auto;
padding-inline: 1rem;
}
.pn-404-hero__kicker {
margin: 0 0 0.75rem;
}
.pn-404-hero__glyph {
margin: 0 0 0.75rem;
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.03em;
font-size: clamp(6rem, 26vw, 14rem);
background: linear-gradient(160deg, var(--color-school-bus-yellow) 0%, var(--color-amber) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.pn-404-hero__glyph {
color: var(--color-school-bus-yellow);
}
}
.pn-404-hero__title {
margin: 0 0 1rem;
font-size: clamp(1.6rem, 5.2vw, 2.75rem);
font-weight: 600;
line-height: 1.15;
color: var(--color-blanc);
text-wrap: balance;
}
.pn-404-hero__lead {
max-width: 46ch;
margin: 0 auto;
font-size: clamp(1rem, 2vw, 1.15rem);
line-height: 1.65;
color: var(--color-texte-muted);
text-wrap: pretty;
}
.pn-404-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1rem;
margin-top: 2rem;
}
.pn-404-links {
padding-block: 0 clamp(3rem, 8svh, 5rem);
}
.pn-404-links__inner {
max-width: 52rem;
margin-inline: auto;
padding-inline: 1rem;
}
.pn-404-links__title {
margin: 0 0 1.5rem;
text-align: center;
font-size: clamp(1.05rem, 2.4vw, 1.35rem);
font-weight: 600;
color: var(--color-blanc);
}
.pn-404-links__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.pn-404-links__grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
.pn-404-card {
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 100%;
padding: 1rem 1.5rem;
border: 1px solid var(--color-bordure-subtile);
border-radius: 12px;
background: var(--color-carbon-black);
text-decoration: none;
transition: border-color 180ms ease, transform 180ms ease;
}
.pn-404-card:hover, .pn-404-card:focus-visible {
border-color: var(--color-school-bus-yellow);
transform: translateY(-2px);
}
.pn-404-card:focus-visible {
outline: 2px solid var(--color-school-bus-yellow);
outline-offset: 2px;
}
.pn-404-card__titre {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-blanc);
}
.pn-404-card__arrow {
color: var(--color-school-bus-yellow);
transition: transform 180ms ease;
}
.pn-404-card:hover .pn-404-card__arrow, .pn-404-card:focus-visible .pn-404-card__arrow {
transform: translateX(3px);
}
.pn-404-card__desc {
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-texte-muted);
}
@media (prefers-reduced-motion: reduce) {
.pn-404-card,
.pn-404-card__arrow {
transition: none;
}
.pn-404-card:hover {
transform: none;
}
}