/* ============================================================
   BLOKKUS — Page « La solution »
   ------------------------------------------------------------
   Mobile first, comme home.css : règle de base pour le petit
   écran, requêtes `min-width` pour enrichir. Aucune requête
   `max-width` dans ce fichier.

   Les primitives de section sont volontairement redéclarées ici
   plutôt que partagées : l'extraction vers blokkus.css reste à
   arbitrer (§10 du plan de refonte). Sont aujourd'hui communes
   avec home.css, à la classe près — conteneur et gouttière
   mobile, rythme de section, titre et chapô, grille de cartes,
   lien de renvoi, encadré de note.
   ============================================================ */

.solution{
	font-family:var(--blokkus-font-body);
	color:var(--blokkus-text);
	background:var(--blokkus-surface-alt);
}

/* Sous 600px, blokkus.css impose `.bk-container{width:100% !important}`
   pour les pages intérieures, qui portent leur marge dans
   `#div_padding_contenu`. Cette page n'en a pas. */
.solution .bk-container{
	box-sizing:border-box;
	padding:0 16px;
}

/* ------------------------------------------------------------
   Primitives de section
   ------------------------------------------------------------ */

.sol-section{
	position:relative;
	padding:40px 0;
	border-top:1px solid var(--blokkus-border);
}

.sol-section-alt{
	background:var(--blokkus-surface);
}

.solution h1,
.solution h2,
.solution h3{
	font-family:var(--blokkus-font-heading);
	color:var(--blokkus-deep);
	line-height:1.12;
}

.sol-section h2{
	font-size:clamp(24px,4.8vw,36px);
	margin:0 0 16px;
}

.sol-section h3{
	font-size:clamp(18px,3.4vw,22px);
	margin:32px 0 12px;
}

.sol-lead{
	margin:0 0 24px;
	max-width:68ch;
	font-size:17px;
	line-height:1.55;
	color:var(--blokkus-text-secondary);
}

.sol-lead-spaced{
	margin-top:24px;
}

.sol-note{
	margin:20px 0 0;
	max-width:68ch;
	font-size:14px;
	line-height:1.55;
	color:var(--blokkus-muted);
}

/* ---- En-tête de page ---- */

.sol-hero{
	padding:36px 0 32px;
	border-top:0;
	background:radial-gradient(circle at 20% 0%, var(--blokkus-bg) 0, var(--blokkus-surface-alt) 55%);
}

.sol-hero .sol-eyebrow{
	display:inline-block;
	margin-bottom:14px;
	padding:8px 12px;
	border-radius:999px;
	font-size:12px;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--blokkus-ink);
	background:linear-gradient(90deg,rgba(80,200,160,.25),#50c8a0);
	background:linear-gradient(90deg,color-mix(in srgb, var(--blokkus-mint) 25%, transparent),var(--blokkus-mint));
	border:1px solid rgba(80,200,160,.55);
	border:1px solid color-mix(in srgb, var(--blokkus-mint) 55%, transparent);
}

.sol-hero h1{
	margin:0 0 14px;
	font-size:clamp(28px,6.6vw,48px);
	line-height:1.08;
	color:var(--blokkus-deep);
}

.sol-hero .sol-lead{
	font-size:clamp(17px,3.2vw,20px);
	max-width:60ch;
}

/* ---- Cartes ---- */

.sol-cards{
	display:grid;
	gap:14px;
	margin:0;
	padding:0;
	list-style:none;
}

.sol-card{
	background:var(--blokkus-surface);
	border:1px solid var(--blokkus-border);
	border-radius:14px;
	padding:20px;
	box-shadow:var(--blokkus-shadow-sm);
	font-size:16px;
	line-height:1.55;
}

.sol-section-alt .sol-card{
	background:var(--blokkus-surface-alt);
}

.sol-card h3{
	margin:0 0 8px;
	font-size:19px;
}

.sol-card p{
	margin:0;
}

.sol-card-name{
	display:block;
	margin-bottom:6px;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:19px;
	color:var(--blokkus-deep);
}

@media screen and (min-width:640px){
	.solution .bk-container{padding:0;}
	.sol-section{padding:52px 0;}
	.sol-hero{padding:48px 0 40px;}
	.sol-lead{font-size:18px;}
	.sol-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
}

@media screen and (min-width:900px){
	.sol-section{padding:64px 0;}
	.sol-hero{padding:64px 0 52px;}
	.sol-lead{font-size:19px;}
	.sol-cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ------------------------------------------------------------
   Listes numérotées : couches d'analyse, étapes, critères
   ------------------------------------------------------------ */

.sol-numbered{
	counter-reset:sol;
	display:grid;
	gap:10px;
	margin:0;
	padding:0;
	list-style:none;
}

.sol-numbered li{
	display:grid;
	grid-template-columns:32px 1fr;
	gap:14px;
	align-items:start;
	padding:16px 18px;
	border:1px solid var(--blokkus-border);
	border-radius:12px;
	background:var(--blokkus-surface);
	font-size:16px;
	line-height:1.55;
}

.sol-section-alt .sol-numbered li{
	background:var(--blokkus-surface-alt);
}

.sol-numbered li::before{
	counter-increment:sol;
	content:counter(sol);
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	font-family:var(--blokkus-font-heading);
	font-size:14px;
	font-weight:700;
	color:#103227;
	background:linear-gradient(135deg,#c7f2e2,var(--blokkus-mint));
}

.sol-numbered strong{
	color:var(--blokkus-deep);
}

/* Liste de refus : « ce que nous ne faisons jamais ». */
.sol-never{
	display:grid;
	gap:10px;
	margin:0;
	padding:0;
	list-style:none;
}

.sol-never li{
	position:relative;
	padding:15px 18px 15px 46px;
	border:1px solid var(--blokkus-border);
	border-radius:12px;
	background:var(--blokkus-surface);
	font-size:16px;
	line-height:1.5;
}

.sol-section-alt .sol-never li{
	background:var(--blokkus-surface-alt);
}

.sol-never li::before{
	content:"";
	position:absolute;
	left:18px;
	top:19px;
	width:16px;
	height:16px;
	border-radius:50%;
	border:2px solid var(--blokkus-accent);
	background:
		linear-gradient(45deg, transparent 45%, var(--blokkus-accent) 45%, var(--blokkus-accent) 55%, transparent 55%);
}

/* Un point de cette liste énonce un pouvoir du client et non un refus :
   il reçoit une pastille de confiance à la place du signe d'interdiction. */
.sol-never li.sol-never-vous::before{
	border:2px solid var(--blokkus-mint);
	background:linear-gradient(135deg,#c7f2e2,var(--blokkus-mint));
}

/* ------------------------------------------------------------
   Encadrés
   ------------------------------------------------------------ */

.sol-callout{
	max-width:68ch;
	margin:24px 0 0;
	padding:18px 20px;
	border:1px solid var(--blokkus-border);
	border-left:3px solid var(--blokkus-mint);
	border-radius:0 12px 12px 0;
	background:var(--blokkus-surface);
	font-size:16px;
	line-height:1.55;
}

.sol-section-alt .sol-callout{
	background:var(--blokkus-surface-alt);
}

.sol-limit{
	max-width:68ch;
	margin:24px 0 0;
	padding:18px 20px;
	border:1px dashed var(--blokkus-border);
	border-radius:12px;
	background:var(--blokkus-surface);
}

.sol-section-alt .sol-limit{
	background:var(--blokkus-surface-alt);
}

.sol-limit-title{
	display:block;
	margin-bottom:8px;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:15px;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--blokkus-muted);
}

.sol-limit p{
	margin:0;
	font-size:16px;
	line-height:1.55;
}

/* Exemple de règle : condition puis conséquence. */
.sol-rule{
	display:grid;
	gap:12px;
	margin:22px 0 0;
	padding:0;
}

.sol-rule div{
	padding:16px 18px;
	border:1px solid var(--blokkus-border);
	border-radius:12px;
	background:var(--blokkus-surface);
	font-size:16px;
	line-height:1.55;
}

.sol-section-alt .sol-rule div{
	background:var(--blokkus-surface-alt);
}

.sol-rule dt{
	display:block;
	margin-bottom:6px;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:14px;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--blokkus-muted);
}

@media screen and (min-width:768px){
	.sol-rule{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ------------------------------------------------------------
   Réseau de confiance : liste de définitions
   ------------------------------------------------------------ */

.sol-deflist{
	display:grid;
	gap:0;
	margin:0;
	border:1px solid var(--blokkus-border);
	border-radius:14px;
	overflow:hidden;
	background:var(--blokkus-surface);
}

.sol-section-alt .sol-deflist{
	background:var(--blokkus-surface-alt);
}

.sol-deflist > div{
	padding:16px 18px;
	border-top:1px solid var(--blokkus-border);
}

.sol-deflist > div:first-child{
	border-top:0;
}

.sol-deflist dt{
	margin-bottom:6px;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:16px;
	color:var(--blokkus-deep);
}

.sol-deflist dd{
	margin:0;
	font-size:16px;
	line-height:1.55;
}

@media screen and (min-width:768px){
	.sol-deflist > div{
		display:grid;
		grid-template-columns:200px 1fr;
		gap:20px;
		align-items:baseline;
	}

	.sol-deflist dt{margin-bottom:0;}
}

/* Les quatre états, en B3 : chaque définition porte deux champs nommés,
   le déclencheur et le sort des liens. */
.sol-etats dd{
	display:grid;
	gap:4px;
}

.sol-etat-champ{
	margin-top:6px;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:12px;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--blokkus-muted);
}

.sol-etats dd > .sol-etat-champ:first-child{
	margin-top:0;
}

/* ------------------------------------------------------------
   B11 — Trois chiffres de l'axe RSE
   ------------------------------------------------------------ */

.sol-figures{
	display:grid;
	gap:14px;
	margin:24px 0 0;
	padding:0;
	list-style:none;
}

.sol-figures li{
	padding:20px;
	border:1px solid var(--blokkus-border);
	border-radius:14px;
	background:var(--blokkus-surface);
	text-align:center;
}

.sol-section-alt .sol-figures li{
	background:var(--blokkus-surface-alt);
}

.sol-figure-value{
	display:block;
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:clamp(24px,5.4vw,32px);
	line-height:1.15;
	color:var(--blokkus-deep);
}

.sol-figure-label{
	display:block;
	margin-top:8px;
	font-size:14px;
	color:var(--blokkus-muted);
}

.sol-dimensions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 8px;
	padding:0;
	list-style:none;
}

.sol-dimensions li{
	padding:7px 14px;
	border:1px solid var(--blokkus-border);
	border-radius:999px;
	background:var(--blokkus-surface);
	font-size:14px;
	font-weight:600;
}

.sol-section-alt .sol-dimensions li{
	background:var(--blokkus-surface-alt);
}

@media screen and (min-width:768px){
	.sol-figures{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ------------------------------------------------------------
   Appels à l'action de fin de section
   ------------------------------------------------------------ */

.sol-actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:26px;
}

.sol-more{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:22px;
	padding-bottom:2px;
	font-weight:600;
	font-size:16px;
	color:var(--blokkus-deep);
	text-decoration:none;
	border-bottom:2px solid rgba(80,200,160,.7);
	border-bottom:2px solid color-mix(in srgb, var(--blokkus-mint) 70%, transparent);
	transition:border-color .2s, color .2s;
}

.sol-more:hover{
	color:var(--blokkus-accent);
	border-bottom-color:var(--blokkus-accent);
}

.sol-more::after{
	content:"\2192";
}

/* ------------------------------------------------------------
   Garde d'accessibilité
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
	.solution *,
	.solution *::before,
	.solution *::after{
		animation:none !important;
		transition:none !important;
	}
}