@charset "utf-8";
/* ==========================================================================
   MAXXI+ — Portail extranet Moto Axxe
   --------------------------------------------------------------------------
   Direction artistique : « MANUEL D'ATELIER » (variante claire).
   Papier béton chaud, grille de dessin technique, encre noire, orange haute
   visibilité. L'interface emprunte au vocabulaire du catalogue de pièces et
   de la signalétique d'atelier : filets nets, plaques chanfreinées, bande de
   danger, libellés techniques monospace.

   Sur fond clair, la profondeur vient des ARÊTES (filets 1px, contours
   francs) et non des halos : aucune lueur, des ombres courtes et sèches.

   Typographie :
     - Archivo (chasse étendue, 800) .... titres / boutons — signalétique
     - Barlow ........................... textes courants — lignée routière
     - Martian Mono ..................... micro-libellés, badges, pied de page

   Aucune classe n'a été renommée : ce fichier est un remplacement purement
   visuel. Le HTML et la logique PHP sont intacts.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTEM — VARIABLES
   ========================================================================== */
:root {
	/* --- Papier (fonds, du plus profond au plus clair) --- */
	--paper-300: #e6e2da; /* béton, creux */
	--paper-200: #efece6;
	--paper-100: #f5f3ee; /* fond de page */
	--paper-050: #faf9f6;
	--paper-000: #ffffff; /* surface des cartes */

	/* --- Filets & séparateurs (encre diluée) --- */
	--hairline: rgba(20, 23, 28, 0.115);
	--hairline-strong: rgba(20, 23, 28, 0.26);
	--hairline-faint: rgba(20, 23, 28, 0.055);

	/* --- Haute visibilité (couleur de marque) --- */
	--hi-vis: #ff5a00;
	--hi-vis-bright: #ff7a2a;
	--hi-vis-deep: #d94a00;
	--hi-vis-veil: rgba(255, 90, 0, 0.10);

	/* --- Accents de statut --- */
	--accent-new: #e01f66;
	--accent-dev: #4f46e5;
	--accent-soon: #98a1ad;

	/* --- Encres --- */
	--ink: #14171c;
	--ink-invert: #14171c; /* texte posé sur une surface vive */
	--text: #14171c;
	--text-secondary: #565f6d;
	--text-muted: #8a929f;

	/* --- Accent courant, redéfini par carte (voir §9) --- */
	--accent: var(--hi-vis);

	/* --- Alias de compatibilité (ancien design system) --- */
	--color-primary: var(--hi-vis);
	--color-primary-dark: var(--hi-vis-deep);
	--color-primary-light: var(--hi-vis-bright);
	--color-background: var(--paper-100);
	--color-surface: var(--paper-000);
	--color-text: var(--text);
	--color-text-secondary: var(--text-secondary);
	--color-text-muted: var(--text-muted);
	--color-border: var(--hairline);

	/* --- Espacements --- */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* --- Typographie --- */
	--font-display: 'Archivo', 'Fira Sans Condensed', system-ui, sans-serif;
	--font-body: 'Barlow', 'Fira Sans Condensed', system-ui, sans-serif;
	--font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
	--font-primary: var(--font-display);
	--font-secondary: var(--font-body);
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.75rem;

	/* --- Rayons : minces, mécaniques --- */
	--radius-sm: 2px;
	--radius-md: 3px;
	--radius-lg: 5px;
	--radius-xl: 8px;
	--radius-full: 999px;

	/* --- Chanfreins (coins coupés des plaques) --- */
	--chamfer: 9px;
	--chamfer-sm: 6px;

	/* --- Transitions --- */
	--transition-fast: 140ms cubic-bezier(0.33, 1, 0.68, 1);
	--transition-base: 280ms cubic-bezier(0.22, 0.68, 0.28, 1);

	/* --- Ombres : courtes et sèches, jamais diffuses --- */
	--edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.05);
	--shadow-md: 0 6px 14px -10px rgba(20, 23, 28, 0.45);
	--shadow-lg: 0 20px 34px -24px rgba(20, 23, 28, 0.55);
}

/* ==========================================================================
   2. RÉINITIALISATION & BASE
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	color-scheme: light;
	scrollbar-color: #b9b3a8 transparent;
	scrollbar-width: thin;
}

body {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: 1.55;
	color: var(--text);
	background-color: var(--paper-100);
	/* Couches, de haut en bas :
	   1. filet haute visibilité en tête de document
	   2. voile orange diffus derrière l'en-tête
	   3. papier béton, légèrement plus soutenu vers le bas */
	background-image:
		linear-gradient(90deg, var(--hi-vis) 0%, #ff8a3d 52%, var(--hi-vis) 100%),
		radial-gradient(115% 55% at 50% -10%, rgba(255, 90, 0, 0.13) 0%, rgba(255, 90, 0, 0.03) 42%, transparent 70%),
		linear-gradient(180deg, var(--paper-050) 0%, var(--paper-100) 46%, var(--paper-200) 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 100% 4px, 100% 100%, 100% 100%;
	background-position: top left, center, center;
	background-attachment: scroll, fixed, fixed;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Grille de dessin technique : millimétrée, fixe, non interactive */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(0deg, var(--hairline-faint) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, var(--hairline-faint) 0 1px, transparent 1px 34px);
	-webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, #000 45%, rgba(0, 0, 0, 0.35) 100%);
	mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, #000 45%, rgba(0, 0, 0, 0.35) 100%);
}

/* Grain de papier : bruit fractal SVG, en multiplication */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	color: var(--text);
}

p {
	color: var(--text-secondary);
}

a {
	color: var(--hi-vis-deep);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--hi-vis);
}

::selection {
	background: var(--hi-vis);
	color: var(--paper-000);
}

/* Barre de défilement assortie au papier */
::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: var(--paper-200);
}

::-webkit-scrollbar-thumb {
	background: #c3bdb1;
	border: 3px solid var(--paper-200);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--hi-vis);
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. ANIMATIONS
   Une seule orchestration forte : révélation en cascade au chargement.
   `backwards` (et non `both`) pour que les transformations de survol
   reprennent la main une fois l'animation terminée.
   ========================================================================== */
@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes rule-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ==========================================================================
   4. CONTENEUR & MISE EN PAGE
   ========================================================================== */
.container {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	padding: clamp(1rem, 3vh, var(--space-xl)) var(--space-md) 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   5. EN-TÊTE
   ========================================================================== */
.header {
	flex-shrink: 0;
	text-align: center;
	margin-bottom: clamp(1.25rem, 4vh, 2.75rem);
	animation: fade-in 700ms ease both;
}

.header__logo {
	margin-bottom: clamp(0.6rem, 1.6vh, var(--space-md));
	animation: rise-in 700ms cubic-bezier(0.22, 0.68, 0.28, 1) backwards;
}

/* Le logo (encre sombre + liseré blanc) est fait pour le papier :
   une ombre courte suffit à le décoller du fond. */
.header__logo img {
	max-width: clamp(104px, 24vh, 190px);
	height: auto;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 4px 10px rgba(20, 23, 28, 0.16));
	transition: transform var(--transition-base), filter var(--transition-base);
}

.header__logo a:hover img {
	transform: scale(1.035) translateY(-1px);
	filter: drop-shadow(0 8px 16px rgba(255, 90, 0, 0.32));
}

.header__title {
	font-family: var(--font-display);
	font-stretch: 118%;
	font-weight: 800;
	font-size: clamp(1.35rem, 3.6vh, 2.4rem);
	line-height: 1.04;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin-bottom: clamp(0.4rem, 1.2vh, 0.7rem);
	animation: rise-in 700ms cubic-bezier(0.22, 0.68, 0.28, 1) 80ms backwards;
}

/* Sur papier, l'orange seul manque de tenue : on le souligne d'un
   trait haute visibilité, comme un surlignage de manuel. */
.brand-highlight {
	color: var(--hi-vis-deep);
	box-shadow: inset 0 -0.16em 0 rgba(255, 90, 0, 0.22);
}

.header__subtitle {
	font-family: var(--font-body);
	font-size: clamp(0.85rem, 1.9vh, var(--font-size-lg));
	font-weight: 400;
	color: var(--text-secondary);
	letter-spacing: 0.005em;
	animation: rise-in 700ms cubic-bezier(0.22, 0.68, 0.28, 1) 150ms backwards;
}

/* Bande de danger : signature graphique sous l'en-tête */
.header::after {
	content: "";
	display: block;
	width: min(260px, 60%);
	height: 5px;
	margin: clamp(0.9rem, 2.4vh, 1.5rem) auto 0;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--hi-vis) 0 7px,
		var(--ink) 7px 14px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
	animation: rule-draw 900ms cubic-bezier(0.22, 0.68, 0.28, 1) 260ms backwards;
}

/* ==========================================================================
   6. SECTIONS D'OUTILS
   Chaque section porte son propre décalage de cascade.
   ========================================================================== */
.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vh, var(--space-2xl));
}

.tool-section {
	--section-delay: 0.28s;
}

.tool-section--marketing { --section-delay: 0.44s; }
.tool-section--gestion   { --section-delay: 0.56s; }

/* --- Titre de section : [ filet ] TITRE [ filet ] --- */
.tool-section__title {
	display: flex;
	align-items: center;
	gap: clamp(0.55rem, 1.4vw, 0.95rem);
	font-family: var(--font-display);
	font-stretch: 118%;
	font-weight: 800;
	font-size: clamp(0.95rem, 2.5vh, 1.35rem);
	text-transform: uppercase;
	letter-spacing: 0.035em;
	color: var(--ink);
	margin-bottom: clamp(0.85rem, 2vh, var(--space-lg));
	animation: rise-in 620ms cubic-bezier(0.22, 0.68, 0.28, 1) calc(var(--section-delay) - 0.1s) backwards;
}

.tool-section__title::before,
.tool-section__title::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: var(--space-md);
}

.tool-section__title::before {
	background: linear-gradient(90deg, transparent, var(--hairline-strong));
}

.tool-section__title::after {
	background: linear-gradient(90deg, var(--hairline-strong), transparent);
}

/* --- Grilles : points de rupture strictement conservés --- */
.tool-section__grid {
	--grid-gap: clamp(0.65rem, 1.6vh, var(--space-lg));
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	align-content: start;
	gap: var(--grid-gap);
}

@media (min-width: 481px) {
	.tool-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 769px) {
	.container {
		padding: clamp(1.25rem, 3vh, var(--space-2xl)) var(--space-lg) 0;
	}

	.tool-section__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	body {
		overflow: auto;
	}

	.tool-section__grid {
		--card-width: calc((100% - 4 * var(--grid-gap)) / 4.5);
		grid-template-columns: repeat(5, 1fr);
	}

	.tool-section--populaires .tool-section__grid {
		grid-template-columns: repeat(3, var(--card-width));
		justify-content: center;
	}

	.tool-section--marketing .tool-section__grid {
		grid-template-columns: repeat(3, var(--card-width));
		justify-content: center;
	}

	.tool-section--gestion .tool-section__grid {
		grid-template-columns: repeat(3, var(--card-width));
		justify-content: center;
	}

	/* Toutes les sections sont sur 3 colonnes : une carte seule sur la
	   dernière ligne (4 cartes en marketing/gestion, 7 en populaires quand
	   la carte V2 est visible) serait collée à gauche. On la recentre.
	   `3n+1` = carte qui ouvre une ligne, `nth-last-child(1)` = dernière :
	   la combinaison ne cible que le cas orphelin, quel que soit le total. */
	.tool-section__grid > .card:nth-child(3n + 1):nth-last-child(1) {
		grid-column: 2;
	}
}

/* ==========================================================================
   7. CARTE — fiche d'atelier
   Structure conservée : titre pleine largeur, icône + description,
   bouton pleine largeur en bas.
   ========================================================================== */
.card {
	--accent: var(--hi-vis);
	--plate: linear-gradient(158deg, #fff3ea 0%, #ffe0cb 100%);
	--plate-edge: rgba(255, 90, 0, 0.26);
	--card-delay: 0s;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"title title"
		"icon  desc"
		"link  link";
	align-items: center;
	column-gap: clamp(0.7rem, 2.5vw, var(--space-md));
	row-gap: clamp(0.5rem, 1.2vh, 0.7rem);
	padding: clamp(0.85rem, 2.2vh, var(--space-lg));
	text-align: left;
	background: linear-gradient(180deg, var(--paper-000) 0%, var(--paper-050) 100%);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--edge-top), var(--shadow-md);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		border-color var(--transition-base),
		background var(--transition-base);
	animation: rise-in 620ms cubic-bezier(0.22, 0.68, 0.28, 1)
		calc(var(--section-delay, 0s) + var(--card-delay)) backwards;
}

/* Cascade interne à chaque grille */
.card:nth-child(1) { --card-delay: 0.00s; }
.card:nth-child(2) { --card-delay: 0.05s; }
.card:nth-child(3) { --card-delay: 0.10s; }
.card:nth-child(4) { --card-delay: 0.15s; }
.card:nth-child(5) { --card-delay: 0.20s; }
.card:nth-child(6) { --card-delay: 0.25s; }
.card:nth-child(7) { --card-delay: 0.30s; }

/* Arête d'accent supérieure : courte au repos, elle balaie toute la
   largeur au survol — le geste signature de l'interface.
   Sur papier : trait plein et net, sans lueur. */
.card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	height: 3px;
	width: 34px;
	background: var(--accent);
	border-radius: var(--radius-lg) 0 0 0;
	transition: width var(--transition-base), opacity var(--transition-base);
	opacity: 0.9;
	z-index: 2;
}

/* Hachures d'atelier dans l'angle inférieur droit */
.card::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 74px;
	height: 74px;
	pointer-events: none;
	opacity: 0.55;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(20, 23, 28, 0.07) 0 1px,
		transparent 1px 6px
	);
	-webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000 0%, transparent 72%);
	mask-image: radial-gradient(100% 100% at 100% 100%, #000 0%, transparent 72%);
	z-index: 0;
}

.card:hover,
.card:focus-within {
	transform: translateY(-4px);
	background: var(--paper-000);
	border-color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	box-shadow: var(--edge-top), var(--shadow-lg);
}

.card:hover::before,
.card:focus-within::before {
	width: calc(100% + 2px);
	opacity: 1;
}

/* --- Variantes de statut --- */
.card--new {
	--accent: var(--accent-new);
	border-color: rgba(224, 31, 102, 0.34);
}

.card--dev {
	--accent: var(--accent-dev);
	border-color: rgba(79, 70, 229, 0.32);
}

.card--soon {
	--accent: var(--accent-soon);
	opacity: 0.62;
	filter: saturate(0.4);
}

.card--soon:hover,
.card--soon:focus-within {
	transform: none;
	background: linear-gradient(180deg, var(--paper-000) 0%, var(--paper-050) 100%);
	border-color: var(--hairline);
	box-shadow: var(--edge-top), var(--shadow-md);
}

.card--soon:hover::before {
	width: 34px;
	opacity: 0.9;
}

/* --- Badge : étiquette technique en débord --- */
.card__badge {
	position: absolute;
	top: -9px;
	right: 14px;
	z-index: 3;
	font-family: var(--font-mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.5em 0.7em 0.42em;
	border-radius: var(--radius-sm);
	background: var(--accent-new);
	color: var(--paper-000);
	/* Le premier plan d'ombre découpe la bordure de carte derrière le badge */
	box-shadow:
		0 0 0 4px var(--paper-100),
		0 4px 10px -4px rgba(224, 31, 102, 0.55);
}

.card__badge--dev {
	background: var(--accent-dev);
	box-shadow:
		0 0 0 4px var(--paper-100),
		0 4px 10px -4px rgba(79, 70, 229, 0.5);
}

.card__badge--soon {
	background: var(--accent-soon);
	box-shadow: 0 0 0 4px var(--paper-100);
}

/* --- Titre de carte : libellé d'équipement --- */
.card__title {
	grid-area: title;
	position: relative;
	z-index: 1;
	text-align: center;
	font-family: var(--font-display);
	font-stretch: 108%;
	font-weight: 700;
	font-size: clamp(0.82rem, 1.85vh, 0.98rem);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ink);
}

/* --- Plaque d'icône : carré chanfreiné, teinté, cerclé d'un filet --- */
.card__icon {
	grid-area: icon;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: clamp(46px, 9vh, 62px);
	height: clamp(46px, 9vh, 62px);
	background: var(--plate);
	box-shadow:
		inset 0 0 0 1px var(--plate-edge),
		inset 0 -3px 8px rgba(20, 23, 28, 0.06);
	clip-path: polygon(
		0 0,
		calc(100% - var(--chamfer)) 0,
		100% var(--chamfer),
		100% 100%,
		var(--chamfer) 100%,
		0 calc(100% - var(--chamfer))
	);
	transition: transform var(--transition-base), filter var(--transition-base);
}

.card:hover .card__icon {
	transform: translateY(-2px) scale(1.045);
	filter: saturate(1.12);
}

.card--soon:hover .card__icon {
	transform: none;
	filter: none;
}

.card__icon img {
	width: clamp(25px, 5vh, 33px);
	height: clamp(25px, 5vh, 33px);
	object-fit: contain;
}

/* --- Description --- */
.card__description {
	grid-area: desc;
	position: relative;
	z-index: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-size: clamp(0.86rem, 1.55vh, var(--font-size-sm));
	line-height: 1.42;
	color: var(--text-secondary);
}

/* ==========================================================================
   8. BOUTON DE CARTE
   Typographie blanche sur tous les boutons (choix explicite du commanditaire),
   sauf Test Rider dont le dégradé doré est trop clair pour porter du blanc :
   il conserve l'encre sombre.
   ========================================================================== */
.card__link {
	grid-area: link;
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: clamp(0.15rem, 0.6vh, 0.35rem);
	padding: clamp(0.5rem, 1.15vh, 0.7rem) var(--space-md);
	background-color: var(--hi-vis);
	color: var(--paper-000) !important;
	font-family: var(--font-display);
	font-stretch: 108%;
	font-weight: 700;
	font-size: clamp(0.7rem, 1.35vh, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 0.075em;
	border-radius: var(--radius-md);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition:
		background-color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast),
		filter var(--transition-fast);
}

.card__link::after {
	content: "";
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--transition-fast);
}

.card__link:hover {
	background-color: var(--hi-vis-bright);
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.36),
		0 6px 14px -8px rgba(255, 90, 0, 0.75);
}

.card__link:hover::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

.card__link:active {
	transform: translateY(0);
}

.card__link--disabled,
.card__link--disabled:hover {
	background-color: rgba(20, 23, 28, 0.05);
	color: var(--text-muted) !important;
	box-shadow: inset 0 0 0 1px var(--hairline);
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

.card__link--disabled::after {
	display: none;
}

/* ==========================================================================
   9. CARTES AUX COULEURS DES MARQUES PARTENAIRES
   `--accent` pilote l'arête supérieure et la bordure de survol,
   `--plate` / `--plate-edge` la plaque d'icône.
   ========================================================================== */

/* --- Discord --- */
.card--discord {
	--accent: #5865f2;
	--plate: linear-gradient(158deg, #f2f3ff 0%, #dcdffe 100%);
	--plate-edge: rgba(88, 101, 242, 0.26);
}

.card--discord .card__link {
	background-color: #5865f2;
	color: var(--paper-000) !important;
}

.card--discord .card__link:hover {
	background-color: #4752c4;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 6px 14px -8px rgba(88, 101, 242, 0.75);
}

/* --- Freshdesk --- */
.card--freshdesk {
	--accent: #12a45c;
	--plate: linear-gradient(158deg, #edfdf4 0%, #c9f3dd 100%);
	--plate-edge: rgba(18, 164, 92, 0.26);
}

.card--freshdesk .card__link {
	background-color: #25c16f;
	color: var(--paper-000) !important;
}

.card--freshdesk .card__link:hover {
	background-color: #1fae63;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 6px 14px -8px rgba(18, 164, 92, 0.75);
}

/* --- Floa --- */
.card--floa {
	--accent: #0089dd;
	--plate: linear-gradient(158deg, #ecf9ff 0%, #c3ecff 100%);
	--plate-edge: rgba(0, 137, 221, 0.26);
}

.card--floa .card__link {
	background-color: #009fff;
	color: var(--paper-000) !important;
}

.card--floa .card__link:hover {
	background-color: #0089dd;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 6px 14px -8px rgba(0, 137, 221, 0.75);
}

/* --- Synergee --- */
.card--synergee {
	--accent: #013465;
	--plate: linear-gradient(158deg, #e9f1f7 0%, #d3ede4 100%);
	--plate-edge: rgba(1, 52, 101, 0.22);
}

.card--synergee .card__link {
	background: linear-gradient(115deg, #013465 0%, #2bad8b 100%);
	color: var(--paper-000) !important;
}

.card--synergee .card__link:hover {
	filter: brightness(0.92);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 6px 14px -8px rgba(1, 52, 101, 0.7);
}

/* --- Test Rider --- */
.card--testrider {
	--accent: #d98f33;
	--plate: linear-gradient(158deg, #fdf6ea 0%, #fbe6cb 100%);
	--plate-edge: rgba(217, 143, 51, 0.3);
}

.card--testrider .card__link {
	background: linear-gradient(115deg, #efbe6f 0%, #e0993e 100%);
	color: var(--ink-invert) !important;
}

.card--testrider .card__link:hover {
	filter: brightness(0.94);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.36),
		0 6px 14px -8px rgba(217, 143, 51, 0.75);
}

/* --- Étiquettes V2 (test interne) --- */
.card--dev {
	--plate: linear-gradient(158deg, #f2f1ff 0%, #ddd9ff 100%);
	--plate-edge: rgba(79, 70, 229, 0.26);
}

/* --- Générateur de visuel (nouveauté) --- */
.card--new {
	--plate: linear-gradient(158deg, #fff0f6 0%, #ffd9e7 100%);
	--plate-edge: rgba(224, 31, 102, 0.26);
}

/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */
.footer {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	text-align: center;
	width: 100%;
	max-width: 1280px;
	margin: clamp(2rem, 5vh, var(--space-2xl)) auto 0;
	padding: clamp(1rem, 2.4vh, var(--space-lg)) var(--space-lg) clamp(1.25rem, 3vh, var(--space-xl));
	border-top: 1px solid var(--hairline);
	font-family: var(--font-mono);
	font-size: clamp(0.58rem, 1.2vh, 0.66rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.footer p {
	margin: 0;
	color: inherit;
}

.footer strong {
	color: var(--text-secondary);
	font-weight: 600;
}

/* Lien d'assistance : bouton fantôme chanfreiné */
.footer__assistance {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: clamp(0.7rem, 1.6vh, var(--space-md));
	padding: 0.5em 1.15em 0.5em 0.7em;
	font-family: var(--font-display);
	font-stretch: 108%;
	font-size: clamp(0.72rem, 1.5vh, 0.84rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
	background: var(--paper-000);
	box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
	clip-path: polygon(
		0 0,
		calc(100% - var(--chamfer-sm)) 0,
		100% var(--chamfer-sm),
		100% 100%,
		var(--chamfer-sm) 100%,
		0 calc(100% - var(--chamfer-sm))
	);
	transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.footer__assistance:hover {
	color: var(--hi-vis-deep);
	background: var(--hi-vis-veil);
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.42);
}

.footer__assistance img {
	width: 1.9em;
	height: 1.9em;
	object-fit: contain;
}

/* ==========================================================================
   11. UTILITAIRES & ACCESSIBILITÉ
   ========================================================================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

a:focus-visible,
.card__link:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.header__logo a:focus-visible,
.footer__assistance:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

/* ==========================================================================
   12. IMPRESSION
   ========================================================================== */
@media print {
	body {
		background: #ffffff;
		color: #000000;
	}

	body::before,
	body::after,
	.header::after,
	.card::before,
	.card::after {
		display: none !important;
	}

	.header__logo img {
		filter: none;
	}

	.card {
		break-inside: avoid;
		page-break-inside: avoid;
		background: #ffffff;
		border: 1px solid #cccccc;
		box-shadow: none;
		animation: none;
	}

	.card__description,
	.footer {
		color: #333333;
	}

	.card__link {
		color: #000000 !important;
		background: none !important;
		box-shadow: none;
	}
}