/*!
Theme Name: lionelclamens
Theme URI: http://underscores.me/
Author: lionel clamens
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

lionelclamens is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize + box-sizing are provided by Bootstrap 5 Reboot,
   which is enqueued before this stylesheet (see lc_scripts()).
   The global reset below (*, margin/padding/border-box) lives
   further down in the custom theme section. */

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

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

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ------------------CUSTOM THEME Lionel Clamens-----------------------*/

/* MENU (volet offcanvas latéral) */
#menuToggle ul li{
	list-style: none;
	padding: 10px 0;
}

#menuToggle ul li a{
	color: rgba(255, 255, 255, 0.78);
	font-family: 'Oswald', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

#menuToggle ul li a:hover{
	color: #fff;
	padding-left: 12px;
	text-decoration: none;
}

/* ── VOLET OFFCANVAS (menu latéral droit, global) ───────── */
.lc-offcanvas {
	width: 340px;
	max-width: 85vw;
	background-color: #1e1e1e;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: -18px 0 45px rgba(0, 0, 0, 0.55);
}

.lc-offcanvas .offcanvas-body {
	display: flex;
	align-items: center;
	padding: 80px 44px;
}

.lc-offcanvas .lc-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Apparition en cascade des liens quand le volet s'ouvre */
.lc-offcanvas .lc-menu li {
	opacity: 0;
	transform: translateX(24px);
}
.lc-offcanvas.show .lc-menu li {
	animation: lcMenuItemIn 0.45s ease forwards;
}
.lc-offcanvas.show .lc-menu li:nth-child(1) { animation-delay: 0.10s; }
.lc-offcanvas.show .lc-menu li:nth-child(2) { animation-delay: 0.18s; }
.lc-offcanvas.show .lc-menu li:nth-child(3) { animation-delay: 0.26s; }
.lc-offcanvas.show .lc-menu li:nth-child(4) { animation-delay: 0.34s; }
.lc-offcanvas.show .lc-menu li:nth-child(5) { animation-delay: 0.42s; }
.lc-offcanvas.show .lc-menu li:nth-child(6) { animation-delay: 0.50s; }
.lc-offcanvas.show .lc-menu li:nth-child(7) { animation-delay: 0.58s; }

@keyframes lcMenuItemIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ANIMATION MENU */

#menuToggle {
	margin-bottom: 1px;
}

.navbar-toggler {
	width: 50px;
	height: 50px;
	position: relative;
	margin-top: 20px;
	margin-right:30px;
	background: #111;
	outline: none!important;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	animation: burgerPulse 2s ease-out infinite;
}

/* Anneau pulse autour du burger */
@keyframes burgerPulse {
	0%   { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.45); }
	70%  { box-shadow: 0 0 0 14px rgba(17, 17, 17, 0); }
	100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

/* Stoppe le pulse quand le menu est ouvert ou survolé */
.navbar-toggler.is-open,
.navbar-toggler:hover {
	animation: none;
}

/* La barre fixe (donc le burger) reste au-dessus du volet offcanvas (z 1045)
   et de son backdrop (z 1040), pour servir de bouton « fermer ». Le reste de
   la barre laisse passer les clics → cliquer en dehors ferme via le backdrop. */
.navbar.fixed-top {
	z-index: 1046;
	pointer-events: none;
}
.navbar.fixed-top .navbar-toggler {
	pointer-events: auto;
}

.navbar-toggler span {
	display: block;
	width: 100%;
	height: 4px;
	background-color: white;
	margin: 6px 0;
	transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.3s ease;
	transform-origin: center;
}

/* Fond clair détecté sous le burger (classe posée par burger-contrast.js) :
   les barres passent en sombre pour rester visibles. Priorité sur les règles
   blanches de la landing grâce au sélecteur body.lc-landing. */
.navbar-toggler.on-light span,
body.lc-landing .navbar-toggler.on-light span {
	background-color: #141414;
}

.main-navigation{
	background-color: #fff;
}

/* HAMBURGER → CROIX (classe .is-open posée par navigation.js sur ouverture du volet) */
.navbar-toggler.is-open .bar1 {
	transform: translateY(10px) rotate(45deg);
}
.navbar-toggler.is-open .bar2 {
	opacity: 0;
}
.navbar-toggler.is-open .bar3 {
	transform: translateY(-10px) rotate(-45deg);
}

.current-menu-item a{
	color: #fff ;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 3px;
}



/* Mes projets */

.mes-projets{
	margin: 0 0 50px 0;
}

.card-container {
    flex-wrap: wrap;
    gap: 20px;
}

.card-container > .card {
    flex: 1 1 280px;
    min-width: 0; /* autorise la carte à rétrécir sous sa largeur de contenu */
}

.card{
	background-color: #ffffff; /* Ressort sur le fond #fbfbfa */
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.mes-prestations{
	margin: 50px 0 0 0;
}

/* Animation fade-in au scroll (réservée aux blocs .fade-in-section) */

.fade-in-section {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

footer{
	padding: 20px 0 20px 0;
	background-color: #2c3333 ;
	color: #fbfbfa!important;
	text-align: center;
}

.page{
	margin-bottom: 0px!important;
}


@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
}

/* Oswald 700 (titres/hero) auto-hébergé — sous-ensemble latin. Évite la
   requête bloquante vers fonts.googleapis.com sur le chemin critique. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/oswald-latin.woff2') format('woff2');
}

:root {
    --lc-bg: #141414;
    --lc-hero: #1a1b1e;             /* graphite BASE sous le grain (voile .lc-hero::before) — pour les bandeaux internes qui portent le même grain */
    --lc-hero-solid: #222327;       /* même graphite mais RENDU du hero (~rgb 34) — pour les aplats SANS grain (footer, contact) afin qu'ils tombent sur la même teinte perçue */
    --lc-fg: #ffffff;
    --lc-muted: rgba(255, 255, 255, 0.55);
    --lc-line: rgba(255, 255, 255, 0.22);
    --lc-accent: #c8a24a;            /* or champagne : accent unique */
    --lc-accent-soft: rgba(200, 162, 74, 0.6);
    --lc-accent-glow: rgba(200, 162, 74, 0.35);
    --lc-btn-radius: 10px;          /* boutons : rectangle arrondi, jamais une pilule (≠ étiquettes) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════
   LANDING « Main » — fond sombre, scoping via body.lc-landing
   ════════════════════════════════════════════════════════ */
body.lc-landing,
body.lc-landing #page,
body.lc-landing #content,
body.lc-landing main {
    background-color: var(--lc-bg);
    color: var(--lc-fg);
}

/* Burger blanc sur fond sombre (landing uniquement) */
body.lc-landing .navbar-toggler {
    background: transparent;
    margin-top: 28px;
    margin-right: 32px;
    animation: burgerPulseLight 2s ease-out infinite;
}

/* Fond clair détecté sous le burger : l'anneau « écho » repasse en sombre
   (burgerPulse) au lieu du blanc, pour rester visible. Placé avant la règle
   « stop » (is-open/hover) qui doit rester prioritaire menu ouvert. */
body.lc-landing .navbar-toggler.on-light {
    animation-name: burgerPulse;
}

/* Anneau pulse blanc autour du burger (landing, fond sombre) */
@keyframes burgerPulseLight {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Stoppe le pulse blanc + supprime l'anneau de focus sombre de Bootstrap
   quand le menu est ouvert / survolé / cliqué (sinon le cercle paraît noir) */
body.lc-landing .navbar-toggler.is-open,
body.lc-landing .navbar-toggler:hover,
body.lc-landing .navbar-toggler:focus,
body.lc-landing .navbar-toggler:active {
    background: transparent;
    animation: none;
    box-shadow: none;
    outline: none;
}

body.lc-landing .navbar-toggler span {
    background-color: var(--lc-fg);
}

body.lc-landing #menuToggle ul li a,
body.lc-landing #menuToggle ul li a:hover,
body.lc-landing .current-menu-item a {
    color: var(--lc-fg);
}

/* ─── HERO LANDING ────────────────────────────────────── */
.lc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--lc-bg);
    /* Image de fond : chargée uniquement sur desktop (voir @media plus bas).
       Sur mobile elle est masquée à ~95 % par le voile .lc-hero::before, donc
       on ne la télécharge pas du tout — le fond graphite suffit. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--lc-fg);
    overflow: hidden;
}

/* Le fond photo n'est servi qu'à partir de la tablette/desktop. */
@media (min-width: 768px) {
    .lc-hero {
        background-image: url('./img/bg-lionel-clamens.webp');
    }
}

/* Voile sombre neutre (graphite légèrement froid) : dominante retirée pour ne
   plus tirer vers l'ambre/l'ivoire et laisser ressortir l'or champagne. */
.lc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 1re couche = grain fin (SVG feTurbulence inline), fondu en « overlay »
       avec le voile en dessous via background-blend-mode : même texture que les
       bandeaux Blog/Article, sans altérer le voile ni le fondu. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, #1a1b1e, rgba(26, 27, 30, 0) 220px),
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(rgba(26, 27, 30, 0.94), rgba(26, 27, 30, 0.97));
    background-blend-mode: overlay, normal, normal, normal;
    pointer-events: none;
}

/* Fondu en bas du hero vers la teinte du voile (graphite neutre).
   Étalé sur une grande hauteur et progressif (paliers doux) pour éviter
   toute coupure nette avec la première section ivoire. */
.lc-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 340px;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(26, 27, 30, 0.35) 45%,
        rgba(26, 27, 30, 0.75) 75%,
        #1a1b1e 100%
    );
    pointer-events: none;
}

/* ─── BANDEAU HAUT (logo + burger) ─────────────────────────
   La barre .navbar.fixed-top devient un bandeau : logo « LIONEL CLAMENS »
   à gauche (Oswald), burger à droite. Au repos elle est transparente
   (posée sur le hero sombre de la landing) ; dès qu'on scrolle un peu,
   la classe .is-scrolled (posée par burger-contrast.js) révèle le voile.
   Hors landing (pages à fond clair), le voile est permanent pour garder
   logo + burger lisibles. */
.lc-topbar__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    /* Même recette que le voile du hero (.lc-hero::before) : grain SVG
       fondu en « overlay » sur un graphite translucide. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E"),
        linear-gradient(rgba(26, 27, 30, 0.90), rgba(26, 27, 30, 0.94));
    background-blend-mode: overlay, normal;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Voile révélé : au scroll sur la landing, ou en permanence ailleurs. */
.navbar.fixed-top.is-scrolled .lc-topbar__veil,
body:not(.lc-landing) .lc-topbar__veil {
    opacity: 1;
}

/* Logo texte, aligné avec le burger. Position absolue → indépendant du
   flux flex de la barre (comme l'ancien .lc-hero__brand), et cliquable
   même si la barre est en pointer-events:none. */
/* Hauteur du bandeau + centrage vertical du logo et du burger. flex-wrap:nowrap
   évite tout retour à la ligne sur petits écrans. */
.navbar.fixed-top.lc-topbar {
    min-height: 90px;
    align-items: center;
    flex-wrap: nowrap;
}

/* Burger centré dans le bandeau : on neutralise ses marges verticales (base,
   landing et mobile) ; align-items:center s'occupe du reste. La marge droite
   (espacement horizontal) est conservée. */
.lc-topbar .navbar-toggler,
body.lc-landing .lc-topbar .navbar-toggler {
    margin-top: 0;
    margin-bottom: 0;
}

/* Logo : élément flex (à gauche), centré verticalement par le bandeau.
   Il contient deux états superposés : le nom complet (.lc-brand__full),
   visible en haut de page, et le monogramme « LC » (.lc-brand__mark),
   révélé au scroll (.is-scrolled). L'un s'efface pendant que l'autre
   apparaît → transition douce, sans saut de mise en page. */
.lc-brand,
.lc-brand:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 32px;
    pointer-events: auto;
    text-decoration: none;
    line-height: 1;
    color: var(--lc-fg);
    opacity: 0;
    animation: lcFadeDown 0.9s ease forwards;
}

/* État « nom complet » (haut de page). Couleur explicite (pas inherit)
   pour ne pas hériter du violet de a:visited. */
.lc-brand__full {
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lc-fg);
    /* Accordéon : le nom se replie de la droite vers la gauche via clip-path.
       Le délai (état de base) fait qu'au retour il se redéploie EN DERNIER,
       une fois le monogramme replié. */
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.34s ease, color 0.3s ease;
    transition-delay: 0.32s;
}

/* État « monogramme » : carré blanc arrondi, positionné en absolu (à gauche)
   et centré verticalement, superposé au nom complet. Les initiales sont un
   enfant distinct (.lc-brand__mark-letters) pour apparaître APRÈS le carré.

   translate/rotate/scale sont utilisées comme propriétés individuelles (et non
   dans un `transform` unique) pour que la rotation ait son propre délai : le
   carré surgit en losange, puis se redresse dans un second temps. */
.lc-brand__mark {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    translate: 0 -50%;
    rotate: 45deg;
    scale: 0.5;
    transition: opacity 0.26s ease,
                scale 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                rotate 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
    /* opacity, scale, rotate, background */
    transition-delay: 0.14s, 0.14s, 0s, 0s;
}

.lc-brand__mark-letters {
    display: inline-flex;
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    color: #000;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.3s ease;
    transition-delay: 0s;
}

/* --- Bascule au scroll : séquence repli du nom → losange → carré → initiales.
   Les délais croissants (0 → 0,30 → 0,58 → 0,92 s) enchaînent les 4 temps. --- */
.navbar.fixed-top.is-scrolled .lc-brand__full {
    clip-path: inset(0 100% 0 0); /* rideau fermé de la droite vers la gauche */
    transition-delay: 0s;
}

.navbar.fixed-top.is-scrolled .lc-brand__mark {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    pointer-events: auto;
    /* opacity, scale, rotate, background */
    transition-delay: 0.30s, 0.30s, 0.58s, 0s;
}

.navbar.fixed-top.is-scrolled .lc-brand__mark-letters {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.92s;
}

.lc-brand:hover .lc-brand__full,
.lc-brand:focus .lc-brand__full {
    color: var(--lc-accent);
}

.lc-brand:hover .lc-brand__mark,
.lc-brand:focus .lc-brand__mark {
    background: var(--lc-accent);
}

.lc-brand:hover .lc-brand__mark-letters,
.lc-brand:focus .lc-brand__mark-letters {
    color: #fff;
}

/* Bloc central */
.lc-hero__inner {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 100%;
    max-width: 1100px;
    padding: 120px 6% 80px;
    text-align: center;
}

.lc-hero__eyebrow {
    margin: 0 0 28px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lc-muted);
    opacity: 0;
    animation: lcFadeUp 0.9s ease 0.15s forwards;
}

/* Sous-titre hero : la promesse concrète, sous le H1 */
.lc-hero__sub {
    max-width: 640px;
    margin: 28px auto 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    animation: lcFadeUp 0.9s ease 0.7s forwards;
}

/* Phrase d'accroche — révélation ligne par ligne */
.lc-hero__title {
    position: relative;
    margin: 0;
    padding-bottom: 40px;
    --lc-trait-w: 220px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(2.6rem, 8vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--lc-fg);
}

.lc-hero__title .lc-line {
    display: block;
    overflow: hidden;
}

.lc-hero__title .lc-line > span {
    display: inline-block;
    transform: translateY(110%);
    animation: lcReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mot-clé mis en avant en or champagne (le reste du titre reste blanc). */
.lc-hero__title .lc-accent {
    color: var(--lc-accent);
}

.lc-hero__title .lc-line:nth-child(1) > span { animation-delay: 0.05s; }
.lc-hero__title .lc-line:nth-child(2) > span { animation-delay: 0.15s; }

/* Utilisateurs « animations réduites » : titre et trait affichés d'emblée,
   sans mouvement (le texte doit rester lisible, jamais bloqué hors écran). */
@media (prefers-reduced-motion: reduce) {
    .lc-hero__title .lc-line > span { transform: none; animation: none; }
    .lc-hero__title::before { width: var(--lc-trait-w); opacity: 1; animation: none; }
    .lc-hero__title::after { opacity: 0; animation: none; }
}

/* Trait lumineux cyan qui se trace sous l'accroche, point en tête de course */
.lc-hero__title::before {
    content: '';
    position: absolute;
    bottom: 14px;
    left: calc(50% - (var(--lc-trait-w) / 2));
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--lc-accent);
    box-shadow: 0 0 12px var(--lc-accent-soft);
    opacity: 0;
    animation: lcTraitDraw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

.lc-hero__title::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: calc(50% - (var(--lc-trait-w) / 2));
    margin-left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lc-accent);
    box-shadow: 0 0 16px var(--lc-accent), 0 0 6px #ffffff;
    opacity: 0;
    animation: lcTraitDot 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* Étiquettes / tags */
.lc-hero__tags {
    list-style: none;
    margin: 50px 0 50px 0 ;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.lc-hero__tags li {
    padding: 11px 22px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-fg);
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(16px);
    animation: lcFadeUp 0.6s ease forwards;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.lc-hero__tags li:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.lc-hero__tags li:nth-child(1) { animation-delay: 0.9s; }
.lc-hero__tags li:nth-child(2) { animation-delay: 1.02s; }
.lc-hero__tags li:nth-child(3) { animation-delay: 1.14s; }
.lc-hero__tags li:nth-child(4) { animation-delay: 1.26s; }
.lc-hero__tags li:nth-child(5) { animation-delay: 1.38s; }
.lc-hero__tags li:nth-child(6) { animation-delay: 1.50s; }
.lc-hero__tags li:nth-child(7) { animation-delay: 1.62s; }

/* Bouton d'appel à l'action */
.lc-hero__cta,
.lc-hero__cta:visited {
    display: inline-block;
    margin-top: 48px;
    padding: 19px 52px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-bg);
    background: var(--lc-fg);
    border: 1px solid var(--lc-fg);
    border-radius: var(--lc-btn-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    /* État de repos = visible, sans transform : l'entrée se joue en « backwards »
       (voir @keyframes lcCtaIn) pour ne pas figer le transform et laisser le
       :hover soulever le bouton, comme le bouton du formulaire de contact. */
    opacity: 1;
    animation: lcCtaIn 0.7s ease 1.55s backwards;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.lc-hero__cta:hover {
    background: transparent;
    color: var(--lc-fg);
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

/* Réassurance discrète sous le CTA hero */
.lc-hero__cta-note {
    margin: 16px 0 0;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-muted);
    opacity: 0;
    animation: lcFadeUp 0.9s ease 1.75s forwards;
}

/* Indicateur de défilement */
.lc-hero__scroll {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lc-muted);
    opacity: 0;
    animation: lcFadeUp 1s ease 1.6s forwards;
}

/* le mot porte le letter-spacing ; le padding-left compense l'espace de fin */
.lc-hero__scroll > span {
    padding-left: 3px;
}

.lc-hero__scroll::after {
    content: '';
    width: 1px;
    height: 38px;
    margin-top: 10px;
    background: linear-gradient(to bottom, var(--lc-muted), transparent);
    animation: lcScrollLine 2s ease-in-out infinite;
}

@keyframes lcReveal {
    to { transform: translateY(0); }
}

/* Le trait cyan se trace de gauche à droite */
@keyframes lcTraitDraw {
    0%   { width: 0; opacity: 1; }
    100% { width: var(--lc-trait-w); opacity: 1; }
}

/* Le point lumineux suit la tête du trait puis s'efface */
@keyframes lcTraitDot {
    0%   { transform: translateX(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(var(--lc-trait-w)); opacity: 0; }
}

@keyframes lcFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Entrée du CTA hero en « backwards » : le from s'affiche pendant le délai,
   et rien n'est figé après (fill-mode backwards) → le :hover peut soulever. */
@keyframes lcCtaIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lcFadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lcScrollLine {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
    50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-hero__brand,
    .lc-hero__eyebrow,
    .lc-hero__title .lc-line > span,
    .lc-hero__tags li,
    .lc-hero__cta,
    .lc-hero__scroll,
    .lc-offcanvas.show .lc-menu li,
    .lc-attentes__head.lc-reveal,
    .lc-attentes__grid p,
    .lc-apport__head.lc-reveal,
    .lc-apport__grid .card,
    .lc-methode__inner.lc-reveal .titre,
    .lc-methode__inner.lc-reveal .accroche,
    .lc-methode__inner.lc-reveal p:not(.accroche),
    .lc-qui__inner.lc-reveal .titre,
    .lc-qui__inner.lc-reveal .accroche,
    .lc-qui__inner.lc-reveal p:not(.accroche),
    .lc-parcours__inner.lc-reveal .titre,
    .lc-parcours__inner.lc-reveal .accroche,
    .lc-parcours__inner.lc-reveal p:not(.accroche),
    .lc-competences__inner.lc-reveal .titre,
    .lc-competences__inner.lc-reveal .accroche,
    .lc-competences__inner.lc-reveal p:not(.accroche),
    .lc-ensemble__inner.lc-reveal .titre,
    .lc-ensemble__inner.lc-reveal p,
    .lc-partenaire__inner.lc-reveal .titre,
    .lc-partenaire__inner.lc-reveal p,
    .lc-partenaire__inner.lc-reveal .lc-vs,
    .lc-projet__inner.lc-reveal .titre,
    .lc-projet__inner.lc-reveal p,
    .lc-projet__inner.lc-reveal .btn,
    .lc-prestation__inner.lc-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
    /* Parcours « D'où je viens » : tout allumé d'emblée, sans tracé animé */
    .lc-parcours__inner.lc-reveal p:not(.accroche)::before {
        animation: none;
        background: var(--lc-accent);
        box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.14);
    }
    .lc-parcours__inner.lc-reveal p:not(.accroche)::after {
        animation: none;
        transform: scaleY(1);
    }
    .navbar-toggler {
        animation: none;
    }
    /* Trait affiché dans son état final, sans tracé ni point */
    .lc-hero__title::before {
        animation: none;
        width: var(--lc-trait-w);
        opacity: 1;
    }
    .lc-hero__title::after {
        animation: none;
        opacity: 0;
    }
}

/* ─── SECTIONS DE CONTENU (sous le hero) ──────────────── */
.content-after {
    position: relative;
    background: var(--lc-bg);
    color: var(--lc-fg);
    padding: 80px 8%;
    margin-top: -2px; /* chevauche le hero : supprime le filet de sous-pixel (mobile haute densité) */
}

/* Filet cyan au-dessus de chaque section (le hero n'est pas .content-after) */
.content-after::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--lc-accent);
    box-shadow: 0 0 14px var(--lc-accent-soft);
}

.content-after h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    letter-spacing: -2px;
}

/* ─── « Vos attentes » : en-tête centrée + cartes numérotées ─── */
.lc-attentes__head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lc-attentes__head .accroche {
    margin: 32px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.lc-attentes__grid {
    counter-reset: attente;
    display: block;
    max-width: 760px;
    margin: 48px auto 0;
}

.lc-attentes__grid p {
    counter-increment: attente;
    position: relative;
    margin: 0;
    padding: 26px 12px 26px 82px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.08rem, 2.2vw, 1.3rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Icône thématique (masque coloré à l'accent), alignée à gauche du texte */
.lc-attentes__grid p::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: var(--lc-accent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Une icône par objectif, en lien avec le sens de la phrase */
.lc-attentes__grid p:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.21 13.89 7 23l5-3 5 3-1.21-9.12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.21 13.89 7 23l5-3 5 3-1.21-9.12'/%3E%3C/svg%3E");
}
.lc-attentes__grid p:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}
.lc-attentes__grid p:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.lc-attentes__grid p:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
}

.lc-attentes__grid p:hover::before {
    transform: translateY(-50%) scale(1.12);
}

/* Séparateur vertical fin entre le numéro et le texte */
.lc-attentes__grid p::after {
    content: '';
    position: absolute;
    left: 58px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.3s ease;
}

.lc-attentes__grid p:hover {
    background: rgba(200, 162, 74, 0.05);
}

.lc-attentes__grid p:hover::after {
    background: var(--lc-accent);
}

/* Révélation au scroll : en-tête en fondu, cartes en cascade */
.lc-attentes__head.lc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-attentes__head.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.lc-attentes__grid p {
    opacity: 0;
    transform: translateY(28px);
}
.lc-attentes__grid.is-visible p {
    animation: lcCardIn 0.55s ease forwards;
}
.lc-attentes__grid.is-visible p:nth-child(1) { animation-delay: 0.05s; }
.lc-attentes__grid.is-visible p:nth-child(2) { animation-delay: 0.15s; }
.lc-attentes__grid.is-visible p:nth-child(3) { animation-delay: 0.25s; }
.lc-attentes__grid.is-visible p:nth-child(4) { animation-delay: 0.35s; }

@keyframes lcCardIn {
    to { opacity: 1; transform: none; }
}

/* ─── « Ce que je peux vous apporter » : cartes sombres + accent cyan ─── */
.lc-apport__head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lc-apport__head .accroche {
    margin: 32px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--lc-muted);
}

.lc-apport__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1140px;
    margin: 56px auto 0;
}

/* Surcharge l'ancien style .card (fond blanc) sur la landing sombre */
.lc-apport__grid .card {
    position: relative;
    flex: 1 1 460px;
    max-width: 540px;
    margin: 0;
    padding: 36px 40px 38px 44px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Barre d'accent verticale (cyan) : discrète au repos, vive au survol */
.lc-apport__grid .card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--lc-accent);
    opacity: 0.4;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.lc-apport__grid .card:hover {
    border-color: var(--lc-accent-soft);
    background: rgba(200, 162, 74, 0.05);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.lc-apport__grid .card:hover::before {
    opacity: 1;
    box-shadow: 0 0 16px var(--lc-accent-soft);
}

.lc-apport__grid .card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.42rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 14px;
    color: var(--lc-fg);
}

.lc-apport__grid .card p {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 22px;
}

/* Puces réparties sur 2 colonnes : la carte respire, moins de hauteur */
.lc-apport__grid .card ul {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 12px;
}

.lc-apport__grid .card li {
    position: relative;
    padding-left: 22px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

/* Puce cyan lumineuse */
.lc-apport__grid .card li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lc-accent);
    box-shadow: 0 0 8px var(--lc-accent-soft);
}

/* Révélation au scroll : en-tête en fondu, cartes en cascade */
.lc-apport__head.lc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-apport__head.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.lc-apport__grid .card {
    opacity: 0;
    transform: translateY(28px);
}
.lc-apport__grid.is-visible .card {
    animation: lcCardIn 0.55s ease forwards;
}
.lc-apport__grid.is-visible .card:nth-child(1) { animation-delay: 0.05s; }
.lc-apport__grid.is-visible .card:nth-child(2) { animation-delay: 0.13s; }
.lc-apport__grid.is-visible .card:nth-child(3) { animation-delay: 0.21s; }
.lc-apport__grid.is-visible .card:nth-child(4) { animation-delay: 0.29s; }
.lc-apport__grid.is-visible .card:nth-child(5) { animation-delay: 0.37s; }

/* ═══════════════════════════════════════════════════════════════════════
   Cards « services » (SEO / Formation / Création de site / Réseaux sociaux)
   Style agence (goblackmoon) : bandeau visuel en haut + corps sur carte.
   Réutilise .card (révélation au scroll) ; couleurs héritées de .band-light.
   Le bandeau est une image de fond par service (img/services/*.svg),
   remplaçable par une vraie photo au même nom de fichier.
   ═══════════════════════════════════════════════════════════════════════ */
.lc-apport__grid--services {
    max-width: 1180px;
}

.lc-apport__grid .card.lc-scard {
    flex: 1 1 480px;
    max-width: 560px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Pas de barre d'accent verticale sur ce format (le bandeau porte l'accent) */
.lc-apport__grid .card.lc-scard::before {
    display: none;
}

.lc-scard__media {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #16181c;
}
.lc-scard--seo       .lc-scard__media { background-image: url('../../uploads/2026/07/seo-geo-savoie.webp'); }
.lc-scard--formation .lc-scard__media { background-image: url('../../uploads/2026/07/formation-wordpress-savoie.webp'); }
.lc-scard--site      .lc-scard__media { background-image: url('../../uploads/2026/07/creation-site-internet-savoie.webp'); }
.lc-scard--ecommerce .lc-scard__media { background-image: url('../../uploads/2026/07/site-ecommerce-savoie.webp'); }

.lc-scard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 26px 26px;
}

.lc-apport__grid .card.lc-scard h3 {
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.lc-apport__grid .card.lc-scard p {
    margin: 0 0 16px;
}

/* Puces sur une seule colonne (cartes plus étroites) */
.lc-apport__grid .card.lc-scard ul {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding-top: 16px;
    margin-bottom: 20px;
}

.lc-scard__link,
.lc-scard__link:visited {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 0.8rem;
    color: var(--lc-accent);
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}
.lc-scard__link svg {
    width: 17px;
    height: 17px;
    flex: none;
}
.lc-apport__grid .card.lc-scard:hover .lc-scard__link {
    gap: 13px;
    color: var(--lc-accent-strong);
}

/* Carte entièrement cliquable (classe posée par js/anchors.js) : le curseur
   signale la zone active, et le survol de n'importe où dans la carte anime le
   lien « En savoir + » comme s'il était survolé. */
.lc-scard.is-clickable {
    cursor: pointer;
}
.lc-apport__grid .card.lc-scard.is-clickable:hover .lc-scard__link {
    gap: 13px;
    color: var(--lc-accent-strong);
}

/* ─── « Ma méthode de travail » : timeline verticale qui se révèle ─── */
.lc-methode__inner {
    counter-reset: methode;
    max-width: 760px;
    margin: 0 auto;
}

.lc-methode__inner .titre {
    text-align: center;
}

.lc-methode__inner .accroche {
    margin: 32px auto 64px;
    max-width: 620px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* Étapes alternées : chaque étape adossée à un grand numéro qui zigzague */
.lc-methode__inner p:not(.accroche) {
    counter-increment: methode;
    position: relative;
    max-width: 560px;
    margin: 0 0 46px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.lc-methode__inner p:not(.accroche):last-child {
    margin-bottom: 0;
}

/* Titre de l'étape mis en avant, description en dessous */
.lc-methode__inner p:not(.accroche) strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: var(--lc-fg);
}

/* Grand numéro fantôme, centré verticalement sur l'étape */
.lc-methode__inner p:not(.accroche)::before {
    content: counter(methode, decimal-leading-zero);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 4.6rem;
    line-height: 1;
    color: var(--lc-accent);
    opacity: 0.22;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Étapes 1 & 3 : bloc à gauche, numéro à gauche */
.lc-methode__inner p:not(.accroche):nth-of-type(2n) {
    margin-right: auto;
    text-align: left;
    padding: 6px 0 6px 108px;
}
.lc-methode__inner p:not(.accroche):nth-of-type(2n)::before {
    left: 0;
}

/* Étapes 2 & 4 : bloc à droite, numéro à droite */
.lc-methode__inner p:not(.accroche):nth-of-type(2n+1) {
    margin-left: auto;
    text-align: right;
    padding: 6px 108px 6px 0;
}
.lc-methode__inner p:not(.accroche):nth-of-type(2n+1)::before {
    right: 0;
}

/* État de départ (avant l'entrée dans le viewport) */
.lc-methode__inner.lc-reveal .titre,
.lc-methode__inner.lc-reveal .accroche {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-methode__inner.lc-reveal.is-visible .titre,
.lc-methode__inner.lc-reveal.is-visible .accroche {
    opacity: 1;
    transform: none;
}

.lc-methode__inner.lc-reveal p:not(.accroche) {
    opacity: 0;
    transform: translateY(20px);
}

/* Révélation : étapes en cascade */
.lc-methode__inner.lc-reveal.is-visible p:not(.accroche) {
    animation: lcCardIn 0.55s ease forwards;
}

/* Cascade : chaque étape apparaît après la précédente (effet progression) */
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(2) { animation-delay: 0.10s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(3) { animation-delay: 0.28s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(4) { animation-delay: 0.46s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(5) { animation-delay: 0.64s; }

/* ── Vague de surbrillance : les numéros s'allument l'un après l'autre, en boucle ──
   Chaque chiffre fantôme passe brièvement en pleine lumière (opacité + léger
   zoom + halo doré) puis s'éteint ; le décalage entre étapes crée un relais qui
   se répète indéfiniment pour matérialiser la progression. Ne démarre qu'une
   fois la section révélée. */
.lc-methode__inner.is-visible p:not(.accroche)::before {
    animation: lcMethodeGlow 9.6s ease-in-out infinite;
}
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(2)::before { animation-delay: 0s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(3)::before { animation-delay: 2.4s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(4)::before { animation-delay: 4.8s; }
.lc-methode__inner.is-visible p:not(.accroche):nth-of-type(5)::before { animation-delay: 7.2s; }

@keyframes lcMethodeGlow {
    0%, 22%, 100% {
        opacity: 0.18;
        text-shadow: none;
        transform: translateY(-50%) scale(1);
    }
    6% {
        opacity: 0.92;
        text-shadow: 0 0 26px rgba(200, 162, 74, 0.55);
        transform: translateY(-50%) scale(1.12);
    }
    16% {
        opacity: 0.82;
        text-shadow: 0 0 18px rgba(200, 162, 74, 0.4);
        transform: translateY(-50%) scale(1.07);
    }
}

/* Accessibilité : pas de vague en boucle si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
    .lc-methode__inner.is-visible p:not(.accroche)::before {
        animation: none;
    }
}

/* ─── « Qui je suis » : la présentation, en prose ─── */
.lc-qui__inner {
    max-width: 760px;
    margin: 0 auto;
}

.lc-qui__inner .titre {
    text-align: center;
}

.lc-qui__inner .accroche {
    margin: 32px auto 56px;
    max-width: 620px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* Colonne de prose : le padding gauche est commun à tous les paragraphes pour
   que le filet doré du premier ne décale pas l'alignement des suivants. */
.lc-qui__inner p:not(.accroche) {
    position: relative;
    max-width: 684px;
    margin: 0 auto 28px;
    padding-left: 24px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.62);
}

.lc-qui__inner p:not(.accroche):last-child {
    margin-bottom: 0;
}

.lc-qui__inner p:not(.accroche) strong {
    font-weight: 600;
    color: var(--lc-fg);
}

/* Le premier paragraphe porte la voix : filet doré, texte un cran plus haut.
   nth-of-type compte AUSSI l'accroche (1er <p>), d'où le décalage à partir de 2. */
.lc-qui__inner p:not(.accroche):nth-of-type(2) {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--lc-fg);
}

.lc-qui__inner p:not(.accroche):nth-of-type(2)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--lc-accent), var(--lc-accent-soft));
}

/* Entrée en scène */
.lc-qui__inner.lc-reveal .titre,
.lc-qui__inner.lc-reveal .accroche,
.lc-qui__inner.lc-reveal p:not(.accroche) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lc-qui__inner.lc-reveal.is-visible .titre,
.lc-qui__inner.lc-reveal.is-visible .accroche,
.lc-qui__inner.lc-reveal.is-visible p:not(.accroche) {
    opacity: 1;
    transform: none;
}

.lc-qui__inner.lc-reveal.is-visible .accroche { transition-delay: 0.08s; }
.lc-qui__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(2) { transition-delay: 0.16s; }
.lc-qui__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(3) { transition-delay: 0.24s; }
.lc-qui__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(4) { transition-delay: 0.32s; }
.lc-qui__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(5) { transition-delay: 0.40s; }

/* ─── « D'où je viens » : le parcours, en frise verticale ─── */
.lc-parcours__inner {
    max-width: 760px;
    margin: 0 auto;
}

.lc-parcours__inner .titre {
    text-align: center;
}

.lc-parcours__inner .accroche {
    margin: 32px auto 64px;
    max-width: 620px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--lc-muted);
}

/* Chaque étape : une pastille sur le filet, le titre au-dessus du texte */
.lc-parcours__inner p:not(.accroche) {
    position: relative;
    margin: 0 0 40px;
    padding: 0 0 0 42px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}

.lc-parcours__inner p:not(.accroche):last-child {
    margin-bottom: 0;
}

.lc-parcours__inner p:not(.accroche) strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: var(--lc-fg);
}

/* L'étape finale (« Et aujourd'hui ») : accentuée, c'est la chute de la section */
.lc-parcours__inner p:not(.accroche):last-child strong {
    color: var(--lc-accent);
}

/* Pastille */
.lc-parcours__inner p:not(.accroche)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--lc-accent);
    box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.14);
}

/* Filet reliant une étape à la suivante (bottom négatif = comble la marge) */
.lc-parcours__inner p:not(.accroche)::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 24px;
    bottom: -40px;
    width: 1px;
    background: linear-gradient(to bottom, var(--lc-accent-soft), rgba(255, 255, 255, 0.06));
    transform-origin: top;
}

.lc-parcours__inner p:not(.accroche):last-child::after {
    display: none;
}

/* Entrée en scène : le parcours se trace tout seul, étape après étape.
   Chaque pastille s'allume, puis son filet se dessine vers le bas et
   « déclenche » la pastille suivante. Séquence pilotée par --i (index d'étape) :
   l'étape n démarre quand le filet n-1 a fini de se tracer.
   nth-of-type compte AUSSI l'accroche (1er <p>), d'où le décalage à partir de 2. */
.lc-parcours__inner p:not(.accroche):nth-of-type(2) { --i: 0; }
.lc-parcours__inner p:not(.accroche):nth-of-type(3) { --i: 1; }
.lc-parcours__inner p:not(.accroche):nth-of-type(4) { --i: 2; }
.lc-parcours__inner p:not(.accroche):nth-of-type(5) { --i: 3; }
.lc-parcours__inner p:not(.accroche):nth-of-type(6) { --i: 4; }
.lc-parcours__inner p:not(.accroche):nth-of-type(7) { --i: 5; }

/* État « éteint » tant que la section n'est pas entrée dans le viewport */
.lc-parcours__inner.lc-reveal p:not(.accroche) {
    opacity: 0;
    transform: translateY(20px);
}
.lc-parcours__inner.lc-reveal p:not(.accroche)::before {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(200, 162, 74, 0);
}
.lc-parcours__inner.lc-reveal p:not(.accroche)::after {
    transform: scaleY(0);
}

/* Allumage en chaîne dès que la section devient visible */
.lc-parcours__inner.lc-reveal.is-visible p:not(.accroche) {
    animation: lc-step-in 0.5s ease both;
    animation-delay: calc(var(--i, 0) * 0.45s);
}
.lc-parcours__inner.lc-reveal.is-visible p:not(.accroche)::before {
    animation: lc-dot-on 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 0.45s);
}
.lc-parcours__inner.lc-reveal.is-visible p:not(.accroche)::after {
    /* le filet démarre juste après l'allumage de sa pastille */
    animation: lc-line-draw 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 0.45s + 0.12s);
}

/* ─── « Ce que je maîtrise » : les compétences, liste à intitulés ─── */
.lc-competences__inner {
    max-width: 760px;
    margin: 0 auto;
}

.lc-competences__inner .titre {
    text-align: center;
}

.lc-competences__inner .accroche {
    margin: 32px auto 56px;
    max-width: 640px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* Chaque compétence : intitulé en capitales + prose, filet doré à gauche. */
.lc-competences__inner p:not(.accroche) {
    position: relative;
    max-width: 684px;
    margin: 0 auto 32px;
    padding-left: 24px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.62);
}

.lc-competences__inner p:not(.accroche):last-child {
    margin-bottom: 0;
}

.lc-competences__inner p:not(.accroche)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--lc-accent), var(--lc-accent-soft));
}

.lc-competences__inner p:not(.accroche) strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.18rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: var(--lc-fg);
}

/* Entrée en scène (fondu + montée, en cascade) */
.lc-competences__inner.lc-reveal .titre,
.lc-competences__inner.lc-reveal .accroche,
.lc-competences__inner.lc-reveal p:not(.accroche) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lc-competences__inner.lc-reveal.is-visible .titre,
.lc-competences__inner.lc-reveal.is-visible .accroche,
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche) {
    opacity: 1;
    transform: none;
}

.lc-competences__inner.lc-reveal.is-visible .accroche { transition-delay: 0.08s; }
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(2) { transition-delay: 0.16s; }
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(3) { transition-delay: 0.24s; }
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(4) { transition-delay: 0.32s; }
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(5) { transition-delay: 0.40s; }
.lc-competences__inner.lc-reveal.is-visible p:not(.accroche):nth-of-type(6) { transition-delay: 0.48s; }

@keyframes lc-step-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lc-dot-on {
    from { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 4px rgba(200, 162, 74, 0); }
    to   { background: var(--lc-accent); box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.14), 0 0 12px 2px rgba(200, 162, 74, 0.45); }
}
@keyframes lc-line-draw {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ─── « Pourquoi travailler ensemble ? » : checklist d'arguments (la conclusion) ─── */
.lc-ensemble__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.lc-ensemble__inner .titre {
    flex: 1 1 100%;
    margin: 0 0 28px;
    text-align: center;
}

/* Accroche sous le titre (div, pas un <p> : n'hérite pas du style « carte » et ne décale pas les icônes).
   Elle occupe TOUTE la ligne (flex-basis 100% sans max-width) pour forcer les cartes à la ligne suivante ;
   c'est le <span> interne qui borne la largeur de lecture du texte. */
.lc-ensemble__inner .lc-ensemble__accroche {
    flex: 1 1 100%;
    width: 100%;
    margin: 0 0 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    color: var(--lc-muted);
}
.lc-ensemble__inner .lc-ensemble__accroche span {
    display: inline-block;
    max-width: 640px;
}

/* Chaque argument = une carte à icône */
.lc-ensemble__inner p {
    position: relative;
    flex: 1 1 300px;
    max-width: 330px;
    margin: 0;
    padding: 30px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    font-family: 'Roboto', sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.lc-ensemble__inner p:hover {
    transform: translateY(-6px);
    border-color: var(--lc-accent-soft);
    background: rgba(255, 255, 255, 0.05);
}

.lc-ensemble__inner p strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.16rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: var(--lc-fg);
}

/* Icône thématique (masque SVG teinté à l'accent, adaptatif au thème) */
.lc-ensemble__inner p::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    background-color: var(--lc-accent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform 0.3s ease;
}
.lc-ensemble__inner p:hover::before { transform: scale(1.1); }

/* 1 · 15 ans d'expérience — horloge */
.lc-ensemble__inner p:nth-of-type(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* 2 · interlocuteur unique — utilisateur */
.lc-ensemble__inner p:nth-of-type(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* 3 · approche pragmatique — coche (fiabilité, résultats concrets) */
.lc-ensemble__inner p:nth-of-type(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
/* 4 · enjeux techniques et métier — puzzle (jonction technique + métier) */
.lc-ensemble__inner p:nth-of-type(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z'/%3E%3C/svg%3E");
}
/* 5 · réseau de partenaires — nœuds connectés */
.lc-ensemble__inner p:nth-of-type(5)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}

/* ─── « Un partenaire, pas juste un prestataire » : manifeste (l'outro) ─── */
.lc-partenaire, .lc-projet, .lc-ensemble{
    background:
        radial-gradient(ellipse at center, rgba(200, 162, 74, 0.06), transparent 50%),
        var(--lc-bg);
}

.lc-partenaire__inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.lc-partenaire__lead {
    margin: 32px auto 0;
    max-width: 660px;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

/* ─── « Parlons de votre projet » : appel à l'action sobre (le contact) ─── */
.lc-projet__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.lc-projet__inner p {
    margin: 32px auto 0;
    max-width: 600px;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Identique au CTA du hero (.lc-hero__cta) */
.lc-projet__inner .btn,
.lc-projet__inner .btn:visited {
    display: inline-block;
    margin-top: 48px;
    padding: 19px 52px;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-bg);
    background: var(--lc-fg);
    border: 1px solid var(--lc-fg);
    border-radius: var(--lc-btn-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.lc-projet__inner .btn:hover,
.lc-projet__inner .btn:focus-visible {
    background: transparent;
    color: var(--lc-fg);
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

/* Manifeste partenaire : accroche en grand + comparatif Agence vs Moi */
.lc-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 820px;
    margin: 44px auto 0;
    text-align: left;
}
.lc-vs__col {
    padding: 30px 30px 32px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}
/* Colonne « agence » : volontairement en retrait */
.lc-vs__col--them {
    opacity: 0.9;
}
/* Colonne « moi » : mise en avant */
.lc-vs__col--me {
    border-color: var(--lc-accent-soft);
    background:
        linear-gradient(180deg, rgba(200, 162, 74, 0.08), rgba(200, 162, 74, 0.02)),
        rgba(255, 255, 255, 0.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
}

.lc-partenaire__inner .lc-vs__head {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Oswald', sans-serif;
    font-size: 1.18rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.55);
    text-align: left;
}
.lc-partenaire__inner .lc-vs__col--me .lc-vs__head {
    color: var(--lc-accent);
}

.lc-vs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 15px;
}
.lc-vs li {
    position: relative;
    padding-left: 34px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}
/* Marqueurs : croix (agence) / coche (moi), en masque SVG */
.lc-vs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.lc-vs__col--them li::before {
    background-color: rgba(255, 255, 255, 0.35);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.lc-vs__col--me li {
    color: var(--lc-fg);
}
.lc-vs__col--me li::before {
    background-color: var(--lc-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Réassurance discrète sous le CTA de contact — identique à .lc-hero__cta-note.
   Sélecteur renforcé (.lc-projet__inner …) pour battre .lc-projet__inner p
   qui impose sinon une grande taille (clamp) et une autre couleur/marge. */
.lc-projet__inner .lc-projet__reassure {
    margin: 16px 0 0;
    max-width: none;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-muted);
}

/* ─── Révélation au scroll des trois sections de clôture ─── */
.lc-ensemble__inner.lc-reveal .titre,
.lc-ensemble__inner.lc-reveal .lc-ensemble__accroche,
.lc-partenaire__inner.lc-reveal .titre,
.lc-partenaire__inner.lc-reveal .lc-partenaire__lead,
.lc-partenaire__inner.lc-reveal .lc-vs,
.lc-projet__inner.lc-reveal .titre,
.lc-projet__inner.lc-reveal p,
.lc-projet__inner.lc-reveal .btn {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-ensemble__inner.lc-reveal.is-visible .titre,
.lc-ensemble__inner.lc-reveal.is-visible .lc-ensemble__accroche,
.lc-partenaire__inner.lc-reveal.is-visible .titre,
.lc-partenaire__inner.lc-reveal.is-visible .lc-partenaire__lead,
.lc-partenaire__inner.lc-reveal.is-visible .lc-vs,
.lc-projet__inner.lc-reveal.is-visible .titre,
.lc-projet__inner.lc-reveal.is-visible p,
.lc-projet__inner.lc-reveal.is-visible .btn {
    opacity: 1;
    transform: none;
}

/* Décalages : phrase puis bouton du contact, arguments en cascade */
.lc-partenaire__inner.lc-reveal.is-visible .lc-partenaire__lead { transition-delay: 0.12s; }
.lc-partenaire__inner.lc-reveal.is-visible .lc-vs { transition-delay: 0.24s; }
.lc-projet__inner.lc-reveal.is-visible p { transition-delay: 0.12s; }
.lc-projet__inner.lc-reveal.is-visible .btn { transition-delay: 0.24s; }

.lc-ensemble__inner.lc-reveal p {
    opacity: 0;
    transform: translateY(20px);
}
.lc-ensemble__inner.lc-reveal.is-visible p {
    animation: lcCardIn 0.5s ease forwards;
}
.lc-ensemble__inner.is-visible p:nth-of-type(1) { animation-delay: 0.08s; }
.lc-ensemble__inner.is-visible p:nth-of-type(2) { animation-delay: 0.18s; }
.lc-ensemble__inner.is-visible p:nth-of-type(3) { animation-delay: 0.28s; }
.lc-ensemble__inner.is-visible p:nth-of-type(4) { animation-delay: 0.38s; }
.lc-ensemble__inner.is-visible p:nth-of-type(5) { animation-delay: 0.48s; }

/* Mobile */
@media (max-width: 768px) {
	.lc-brand {
		margin-left: 18px;
	}

	.lc-brand__full {
		font-size: 1.05rem;
		letter-spacing: 1px;
	}

	.lc-brand__mark {
		width: 38px;
		height: 38px;
	}

	.lc-brand__mark-letters {
		font-size: 1rem;
	}

	.lc-hero__inner {
		padding: 110px 5% 90px;
	}

	/* Trait du hero plus court et plus près du titre sur mobile */
	.lc-hero__title {
		padding-bottom: 32px;
		--lc-trait-w: 150px;
	}

	.lc-hero__tags {
		gap: 10px;
	}

	.lc-hero__tags li {
		padding: 9px 16px;
		font-size: 0.78rem;
	}

	body.lc-landing .navbar-toggler {
		margin-top: 22px;
		margin-right: 18px;
	}

	.lc-attentes__grid {
		margin-top: 40px;
	}

	.lc-attentes__grid p {
		padding: 22px 4px 22px 72px;
		font-size: 1.08rem;
	}

	.lc-attentes__grid p::before {
		left: 2px;
		width: 26px;
		height: 26px;
	}

	/* Recale le séparateur vertical (padding réduit sur mobile) */
	.lc-attentes__grid p::after {
		left: 50px;
		top: 16px;
		bottom: 16px;
	}

	.lc-apport__grid {
		gap: 18px;
		margin-top: 40px;
	}

	.lc-apport__grid .card {
		flex: 1 1 100%;
		max-width: 480px;
		padding: 28px 24px 30px 28px;
	}

	.lc-apport__grid .card ul {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}

	/* « Ce que je fais pour vous » : slider horizontal à défilement doux.
	   Le cadre du slider déborde jusqu'aux bords de l'écran (marges négatives
	   qui annulent le padding 8% de .content-after) puis réintroduit ce padding
	   en interne comme gouttière. Sans ça, `overflow-x` force le clip vertical
	   ET latéral : l'ombre des cartes (et le soulèvement au survol) était
	   « croquée » nette par le cadre. Le padding vertical laisse respirer
	   l'ombre ; scroll-padding réaligne le snap sur la gouttière.
	   CSS pur, aucune librairie JS. */
	.lc-apport__grid--services {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 40px -8% 0;         /* annule le padding latéral de la section */
		padding: 20px 8% 32px;      /* gouttière latérale + air pour l'ombre haut/bas */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 8%;    /* la carte s'aligne sur la gouttière, pas sur le bord */
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.lc-apport__grid--services::-webkit-scrollbar {
		display: none;
	}
	.lc-apport__grid .card.lc-scard {
		flex: 0 0 86%;
		max-width: 86%;
		scroll-snap-align: start;
	}

	/* Timeline méthode : nœuds et retraits resserrés sur mobile */
	.lc-methode__inner .accroche {
		margin-bottom: 48px;
	}

	/* Zigzag désactivé sur mobile : tout aligné à gauche */
	.lc-methode__inner p:not(.accroche),
	.lc-methode__inner p:not(.accroche):nth-of-type(2n),
	.lc-methode__inner p:not(.accroche):nth-of-type(2n+1) {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
		padding: 4px 0 4px 66px;
		font-size: 0.98rem;
	}

	.lc-methode__inner p:not(.accroche) strong {
		font-size: 1.18rem;
	}

	.lc-methode__inner p:not(.accroche)::before,
	.lc-methode__inner p:not(.accroche):nth-of-type(2n)::before,
	.lc-methode__inner p:not(.accroche):nth-of-type(2n+1)::before {
		left: 0;
		right: auto;
		font-size: 3rem;
	}

	/* Cartes « ensemble » : pleine largeur empilées sur mobile */
	.lc-ensemble__inner {
		gap: 16px;
	}
	.lc-ensemble__inner p {
		flex: 1 1 100%;
		max-width: 460px;
	}

	/* Comparatif « partenaire » : colonnes empilées sur mobile */
	.lc-vs {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lc-projet__inner .btn {
		padding: 16px 44px;
	}
}

/* ─── FOOTER ──────────────────────────────────────────── */
.site-footer {
    position: relative;
    background: var(--lc-hero-solid); /* aplat sans grain : rend comme le hero (~rgb 34) */
    color: var(--lc-fg);
    padding: 80px 8% 32px;
}

/* Texture carton, réglages identiques aux bandeaux (.lc-article__hero::after)
   et à la section réalisations : prolonge la matière premium jusqu'au pied. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("img/cardboard-flat.webp");
    background-size: 320px;
    background-repeat: repeat;
}

/* Contenu au-dessus de la texture (le ::before est en z-index 0). */
.site-footer__inner,
.site-footer__bottom {
    position: relative;
    z-index: 1;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1180px;
    margin: 0 auto;
    border-top:1px solid rgba(255, 255, 255, 0.08);
    padding-top:30px;
}

/* Colonne marque */
.site-footer__name {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-fg);
}

.site-footer__tagline {
    margin: 6px 0 0;
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-accent);
}

.site-footer__pitch {
    margin: 18px auto;
    max-width: 360px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* Titres de colonnes */
.site-footer__heading {
    margin: 0 0 22px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Listes de liens (menu + contact) */
.site-footer__menu,
.site-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu li,
.site-footer__contact li {
    margin-bottom: 12px;
}

.site-footer__menu a,
.site-footer__contact a,
.site-footer__menu a:visited,
.site-footer__contact a:visited {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.25s ease;
}

/* Survol : simple changement de couleur (accent) */
.site-footer__menu a:hover,
.site-footer__contact a:hover,
.site-footer__menu a:focus-visible,
.site-footer__contact a:focus-visible {
    color: var(--lc-accent);
}

/* CTA du footer : pilule contour cyan */
.site-footer__cta,
.site-footer__cta:visited {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 30px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-accent);
    background: transparent;
    border: 1px solid var(--lc-accent-soft);
    border-radius: var(--lc-btn-radius);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.site-footer__cta:hover,
.site-footer__cta:focus-visible {
    color: var(--lc-bg);
    background: var(--lc-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--lc-accent-glow);
}

/* Réseaux sociaux : lien avec icône */
.site-footer__social {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.site-footer__social-link,
.site-footer__social-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.25s ease;
}

.site-footer__social-icon {
    flex-shrink: 0;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    color: var(--lc-accent);
}

/* Barre de bas de page */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    max-width: 1180px;
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.site-footer__bottom a,
.site-footer__bottom a:visited {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.25s ease;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
    color: var(--lc-accent);
}

/* Footer responsive */
@media (max-width: 768px) {
    .site-footer {
        padding: 56px 6% 28px;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
    }
}

/* ════════════════════════════════════════════════════════
   HABILLAGE CLAIR ALTERNÉ DES SECTIONS DE CONTENU
   Hero, footer et burger inchangés (ils restent en :root sombre).
   Chaque bande redéfinit localement les tokens --lc-* → tous les
   styles existants (numéros, timeline, filets, hover) s'adaptent
   automatiquement. Ici on ne neutralise que les blancs codés en dur.
   ════════════════════════════════════════════════════════ */
.band-light {
    --lc-fg: #16181c;               /* ardoise froid */
    --lc-muted: #565a61;
    --lc-faint: #888d95;
    --lc-line: rgba(22, 24, 28, 0.12);
    --lc-surface: #ffffff;
    --lc-surface-2: #eef0f2;        /* perle très clair (hover) */
    --lc-accent: #8a7430;            /* or refroidi : contraste chaud/froid */
    --lc-accent-strong: #6f5d26;
    --lc-accent-soft: rgba(138, 116, 48, 0.5);
    --lc-accent-glow: rgba(138, 116, 48, 0.30);
}
/* Deux gris perle alternés (contraste de température qui fait ressortir l'or) */
.band-paper   { --lc-bg: #eceef0; }
.band-paper-2 { --lc-bg: #f6f7f8; }

/* Couleur de texte par défaut de la section (bat body.lc-landing main) */
.content-after.band-light { color: var(--lc-fg); }
/* Fin filet de séparation entre bandes claires successives */
.content-after.band-light + .content-after.band-light { border-top: 1px solid var(--lc-line); }

/* ─ Attentes : accroche + cartes numérotées ─ */
.band-light .lc-attentes__head .accroche { color: var(--lc-muted); }
.band-light .lc-attentes__grid p {
    border-color: var(--lc-line);
    color: var(--lc-fg);
}
.band-light .lc-attentes__grid p::after {
    background: var(--lc-line);
}
.band-light .lc-attentes__grid p:hover {
    background: var(--lc-surface-2);
}

/* ─ Apport : cartes prestations ─ */
.band-light .lc-apport__grid .card {
    border-color: var(--lc-line);
    background: var(--lc-surface);
    box-shadow: 0 12px 32px rgba(26, 23, 19, 0.05);
}
.band-light .lc-apport__grid .card p  { color: var(--lc-muted); }
.band-light .lc-apport__grid .card li { color: var(--lc-fg); }
.band-light .lc-apport__grid .card ul { border-top-color: var(--lc-line); }
.band-light .lc-apport__grid .card:hover {
    background: var(--lc-surface-2);
    border-color: var(--lc-accent-soft);
    box-shadow: 0 18px 44px rgba(26, 23, 19, 0.12);
}

/* ─ Méthode : timeline ─ */
.band-light .lc-methode__inner .accroche          { color: var(--lc-muted); }
.band-light .lc-methode__inner p:not(.accroche)   { color: var(--lc-muted); }
.band-light .lc-methode__inner p:not(.accroche) strong { color: var(--lc-fg); }
.band-light .lc-methode__inner p:not(.accroche)::before { color: var(--lc-accent); opacity: 0.18; }

/* ─ Qui je suis : prose ─ */
.band-light .lc-qui__inner .accroche                { color: var(--lc-muted); }
.band-light .lc-qui__inner p:not(.accroche)         { color: var(--lc-muted); }
.band-light .lc-qui__inner p:not(.accroche) strong  { color: var(--lc-fg); }
.band-light .lc-qui__inner p:not(.accroche):nth-of-type(2) { color: var(--lc-fg); }

/* ─ Parcours : frise verticale ─ */
.band-light .lc-parcours__inner .accroche              { color: var(--lc-muted); }
.band-light .lc-parcours__inner p:not(.accroche)       { color: var(--lc-muted); }
.band-light .lc-parcours__inner p:not(.accroche) strong { color: var(--lc-fg); }
.band-light .lc-parcours__inner p:not(.accroche):last-child strong { color: var(--lc-accent); }
.band-light .lc-parcours__inner p:not(.accroche)::after {
    background: linear-gradient(to bottom, var(--lc-accent-soft), var(--lc-line));
}

/* ─ Ce que je maîtrise : liste à intitulés ─ */
.band-light .lc-competences__inner .accroche               { color: var(--lc-muted); }
.band-light .lc-competences__inner p:not(.accroche)        { color: var(--lc-muted); }
.band-light .lc-competences__inner p:not(.accroche) strong { color: var(--lc-fg); }

/* ─ Ensemble : cartes à icônes ─ */
.band-light .lc-ensemble__inner p {
    border-color: var(--lc-line);
    background: var(--lc-surface);
    color: var(--lc-muted);
    box-shadow: 0 12px 32px rgba(26, 23, 19, 0.05);
}
.band-light .lc-ensemble__inner p:hover {
    background: var(--lc-surface-2);
    border-color: var(--lc-accent-soft);
    box-shadow: 0 18px 44px rgba(26, 23, 19, 0.12);
}

/* ─ Partenaire : accroche + comparatif Agence vs Moi ─ */
.band-light .lc-partenaire__lead { color: var(--lc-muted); }
.band-light .lc-vs__col {
    border-color: var(--lc-line);
    background: var(--lc-surface);
}
.band-light .lc-vs__col--me {
    border-color: var(--lc-accent-soft);
    background:
        linear-gradient(180deg, rgba(154, 123, 44, 0.10), rgba(154, 123, 44, 0.03)),
        var(--lc-surface);
    box-shadow: 0 18px 44px rgba(26, 23, 19, 0.10);
}
.band-light .lc-partenaire__inner .lc-vs__head { color: var(--lc-faint); border-bottom-color: var(--lc-line); }
.band-light .lc-partenaire__inner .lc-vs__col--me .lc-vs__head { color: var(--lc-accent); }
.band-light .lc-vs li { color: var(--lc-muted); }
.band-light .lc-vs__col--me li { color: var(--lc-fg); }
.band-light .lc-vs__col--them li::before { background-color: rgba(26, 23, 19, 0.30); }

/* ─ Projet (contact) ─ */
.band-light .lc-projet__inner p      { color: var(--lc-muted); }

/* ════════════════════════════════════════════════════════
   PAGE PRESTATIONS — une section par thème (Création de site,
   E-commerce, SEO/GEO & IA, Formation), en bandes claires
   alternées (band-paper / band-paper-2) comme l'accueil. Chaque
   section porte une ancre (#creation-site, #e-commerce, #seo-geo,
   #formation) ciblée par les liens « En savoir + » de l'accueil.
   Contenu détaillé dans les blocs réutilisables « Prestations-* ».
   Couleurs héritées des tokens --lc-* redéfinis par .band-light.
   ════════════════════════════════════════════════════════ */
/* Ancres de section : on dégage la hauteur du bandeau fixe (min-height 90px)
   pour que le titre ne passe pas dessous à l'arrivée du défilement doux. */
.lc-prestation {
    scroll-margin-top: 110px;
}

.lc-prestation__inner {
    max-width: 1080px;
    margin: 0 auto;
}

/* Révélation au scroll (fondu + translation), désactivée en reduced-motion */
.lc-prestation__inner.lc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-prestation__inner.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* En-tête centrée : accroche courte au-dessus du grand titre de section */
.lc-prestation__head {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}
.lc-prestation__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.82rem;
    color: var(--lc-accent);
}
.lc-prestation__head .accroche {
    margin: 26px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--lc-muted);
}

/* Chapô : deux paragraphes d'introduction, centrés et lisibles */
.lc-prestation__lead {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
}
.lc-prestation__lead p {
    margin: 16px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--lc-muted);
}

/* Cartes « ce que je fais » : reprend le langage visuel des cartes claires */
.lc-prestation__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 48px 0 0;
}
.lc-prestation__feature {
    flex: 1 1 300px;
    max-width: 360px;
    padding: 26px 28px;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    background: var(--lc-surface);
    box-shadow: 0 12px 32px rgba(26, 23, 19, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.lc-prestation__feature:hover {
    border-color: var(--lc-accent-soft);
    box-shadow: 0 18px 44px rgba(26, 23, 19, 0.12);
    transform: translateY(-4px);
}
.lc-prestation__feature h3 {
    margin: 0 0 10px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--lc-fg);
}
.lc-prestation__feature p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--lc-muted);
}

/* Déroulé du projet : étapes numérotées (compteur or) */
.lc-prestation__steps-title {
    margin: 52px 0 0;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.2rem;
    text-align: center;
    color: var(--lc-fg);
}
.lc-prestation__steps {
    counter-reset: lcstep;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 26px 0 0;
    padding: 0;
}
.lc-prestation__steps li {
    counter-increment: lcstep;
    position: relative;
    flex: 1 1 220px;
    padding: 18px 20px 18px 58px;
    border: 1px solid var(--lc-line);
    border-radius: 12px;
    background: var(--lc-surface);
    font-family: 'Roboto', sans-serif;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--lc-muted);
}
.lc-prestation__steps li::before {
    content: counter(lcstep, decimal-leading-zero);
    position: absolute;
    left: 18px;
    top: 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    color: var(--lc-accent);
}
.lc-prestation__steps li strong {
    color: var(--lc-fg);
}

/* Appel à l'action de fin de section (vers #contact de la page) */
.lc-prestation__foot {
    margin: 40px 0 0;
    text-align: center;
}
/* Bouton plein identique au CTA du hero (.lc-hero__cta), pour la cohérence
   avec l'accueil. Les tokens --lc-fg / --lc-bg sont inversés par .band-light
   (voir style.css) : sur la bande ivoire des prestations, on obtient donc un
   bouton sombre à texte clair — la version « adaptée » du bouton d'accueil. */
.lc-prestation__cta,
.lc-prestation__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 19px 52px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-bg);
    background: var(--lc-fg);
    border: 1px solid var(--lc-fg);
    border-radius: var(--lc-btn-radius);
    box-shadow: 0 12px 30px rgba(20, 22, 28, 0.22);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.lc-prestation__cta:hover,
.lc-prestation__cta:focus-visible {
    background: transparent;
    color: var(--lc-fg);
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(20, 22, 28, 0.28);
}

/* ════════════════════════════════════════════════════════
   PAGE CONTACT — même identité que l'accueil (fond sombre,
   accent or, Oswald/Roboto). Formulaire natif au thème,
   traité par lc_handle_contact_form() (functions.php).
   ════════════════════════════════════════════════════════ */

/* Base sombre de la page (le body n'a pas .lc-landing ici) */
body.lc-contact,
body.lc-contact #page,
body.lc-contact #content,
body.lc-contact main {
    background-color: var(--lc-bg);
    color: var(--lc-fg);
}

/* Burger blanc + menu clair, comme sur la landing */
body.lc-contact .navbar-toggler {
    background: transparent;
    margin-top: 28px;
    margin-right: 32px;
    animation: burgerPulseLight 2s ease-out infinite;
}
body.lc-contact .navbar-toggler.on-light {
    animation-name: burgerPulse;
}
body.lc-contact .navbar-toggler.is-open,
body.lc-contact .navbar-toggler:hover,
body.lc-contact .navbar-toggler:focus,
body.lc-contact .navbar-toggler:active {
    background: transparent;
    animation: none;
    box-shadow: none;
    outline: none;
}
body.lc-contact .navbar-toggler span {
    background-color: var(--lc-fg);
}
body.lc-contact #menuToggle ul li a,
body.lc-contact #menuToggle ul li a:hover,
body.lc-contact .current-menu-item a {
    color: var(--lc-fg);
}

/* Pas d'animation pulse sur le burger en mobile : inutile là où le burger est
   déjà l'élément d'appel évident. Couvre les trois variantes (base, landing,
   contact) et placé après elles pour l'emporter dans la cascade. */
@media (max-width: 768px) {
    .navbar-toggler,
    body.lc-landing .navbar-toggler,
    body.lc-landing .navbar-toggler.on-light,
    body.lc-contact .navbar-toggler,
    body.lc-contact .navbar-toggler.on-light {
        animation: none;
    }
}

/* Section : dégage la barre fixe (burger) en haut + halo or discret */
.lc-contact-section {
    position: relative; /* borne la texture (::after) à la section */
    padding: 150px 8% 100px;
    /* Aplat sans grain : rend comme le hero (~rgb 34), commun au footer qui suit. */
    background:
        radial-gradient(ellipse at 15% 0%, rgba(200, 162, 74, 0.08), transparent 55%),
        var(--lc-hero-solid);
}
/* Pas de filet doré en haut de la section contact */
.lc-contact-section.content-after::before {
    display: none;
}

/* Texture carton, mêmes réglages que le footer qui suit — la matière ne doit
   pas s'interrompre entre la section contact et le pied. */
.lc-contact-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("img/cardboard-flat.webp");
    background-size: 320px;
    background-repeat: repeat;
}

/* Contenu au-dessus de la texture (le ::after est en z-index 0). */
.lc-contact__grid {
    position: relative;
    z-index: 1;
}

/* Variante intégrée en bas de l'accueil : padding haut réduit (pas de barre
   fixe à dégager ici) et marge d'ancre pour l'arrivée du défilement doux. */
.lc-contact-section--inline {
    padding-top: 96px;
    scroll-margin-top: 24px;
}

/* Défilement doux vers #contact depuis les CTA de l'accueil */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Grille 2 colonnes : présentation | formulaire */
.lc-contact__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

/* ─ Colonne gauche : présentation ─ */
.lc-contact__eyebrow {
    margin: 0 0 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lc-accent);
}

.lc-contact__title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--lc-fg);
}

.lc-contact__lead {
    margin: 26px 0 0;
    max-width: 420px;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

.lc-contact__points {
    list-style: none;
    margin: 38px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.lc-contact__points li {
    position: relative;
    margin: 0;
    padding-left: 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

/* Pastille + icône (masque SVG teinté à l'accent) */
.lc-contact__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: rgba(200, 162, 74, 0.12);
    border: 1px solid var(--lc-accent-soft);
}
.lc-contact__points li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--lc-accent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.lc-contact__points li[data-icon="clock"]::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.lc-contact__points li[data-icon="chat"]::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.lc-contact__points li[data-icon="user"]::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.lc-contact__mail {
    display: inline-block;
    margin-top: 34px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--lc-fg);
    border-bottom: 1px solid var(--lc-accent-soft);
    padding-bottom: 3px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.lc-contact__mail:hover {
    color: var(--lc-accent);
    border-color: var(--lc-accent);
}

/* ─ Colonne droite : carte « verre » contenant le formulaire ─ */
.lc-contact__panel {
    position: relative;
    padding: 44px 44px 40px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(20, 20, 20, 0.6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
/* Bandeau d'état (erreur globale) */
.lc-contact__banner {
    margin: 0 0 26px;
    padding: 14px 18px;
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}
.lc-contact__banner--error {
    color: #ffcccc;
    background: rgba(220, 80, 80, 0.12);
    border: 1px solid rgba(220, 80, 80, 0.4);
}

/* ─ Formulaire : champs à label flottant ─ */
.lc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.lc-field {
    position: relative;
    margin-bottom: 22px;
}

.lc-field input,
.lc-field textarea,
.lc-field select {
    width: 100%;
    padding: 24px 16px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lc-line);
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Texte saisi en blanc, y compris avec l'autofill du navigateur */
.lc-field input:-webkit-autofill,
.lc-field textarea:-webkit-autofill,
.lc-field select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

.lc-field textarea {
    resize: vertical;
    min-height: 132px;
    line-height: 1.5;
}

/* Flèche personnalisée du select */
.lc-field--select::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 60%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--lc-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lc-field--select select option {
    color: #1a1713;
}

.lc-field label {
    position: absolute;
    left: 16px;
    top: 17px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--lc-muted);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s ease, color 0.2s ease;
}
.lc-field label span {
    color: var(--lc-accent);
}

/* Focus : cadre + halo or */
.lc-field input:focus,
.lc-field textarea:focus,
.lc-field select:focus {
    outline: none;
    color: #ffffff;
    border-color: var(--lc-accent-soft);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px var(--lc-accent-glow);
}

/* Remontée du label quand le champ est actif ou rempli */
.lc-field input:focus + label,
.lc-field input:not(:placeholder-shown) + label,
.lc-field textarea:focus + label,
.lc-field textarea:not(:placeholder-shown) + label,
.lc-field--select label {
    transform: translateY(-9px) scale(0.76);
    color: var(--lc-accent);
}
.lc-field--area label {
    top: 20px;
}

/* Champ en erreur */
.lc-field.has-error input,
.lc-field.has-error textarea {
    border-color: rgba(220, 80, 80, 0.7);
}
.lc-field__error {
    display: block;
    margin-top: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    color: #ff9d9d;
}

/* Case à cocher consentement */
.lc-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    margin: 4px 0 30px;
}
.lc-consent input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--lc-accent);
    cursor: pointer;
}
.lc-consent label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.lc-consent.has-error label {
    color: #ff9d9d;
}
.lc-consent .lc-field__error {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* Bouton d'envoi — reprend le CTA de l'accueil */
.lc-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 40px;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-bg);
    background: var(--lc-fg);
    border: 1px solid var(--lc-fg);
    border-radius: var(--lc-btn-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.lc-form__submit:hover,
.lc-form__submit:focus-visible {
    background: transparent;
    color: var(--lc-fg);
    border-color: var(--lc-fg);
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
    outline: none;
}

/* Honeypot : hors écran, jamais visible ni focusable au clavier normal */
.lc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─ Écran de confirmation ─ */
.lc-contact__success {
    text-align: center;
    padding: 20px 10px;
    animation: lcFadeUp 0.6s ease both;
    opacity: 0;
}
.lc-contact__success-icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: rgba(200, 162, 74, 0.12);
    border: 1px solid var(--lc-accent-soft);
}
.lc-contact__success-icon::after {
    content: '';
    width: 34px;
    height: 34px;
    margin: auto;
    background-color: var(--lc-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lc-contact__success h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--lc-fg);
    margin: 0 0 12px;
}
.lc-contact__success p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 auto 28px;
    max-width: 360px;
}
.lc-contact__again,
.lc-contact__again:visited {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-accent);
    padding: 12px 30px;
    border: 1px solid var(--lc-accent-soft);
    border-radius: var(--lc-btn-radius);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.lc-contact__again:hover {
    color: var(--lc-bg);
    background: var(--lc-accent);
    transform: translateY(-2px);
}

/* Révélation au scroll de la grille contact */
.lc-contact__grid.lc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-contact__grid.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ─ Responsive ─ */
@media (max-width: 900px) {
    .lc-contact__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .lc-contact__lead {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .lc-contact-section {
        padding: 120px 6% 72px;
    }
    .lc-contact__panel {
        padding: 32px 22px 30px;
        border-radius: 18px;
    }
    .lc-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    body.lc-contact .navbar-toggler {
        margin-top: 22px;
        margin-right: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-contact__grid.lc-reveal,
    .lc-contact__success {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ─── FIL D'ARIANE ────────────────────────────────────────
   Commun aux pages internes (structure d'article, .lc-article__hero) et au
   hero du Blog (.lc-blog__hero) — toujours sur fond sombre. Il remplace le
   lien « ← Blog » de l'article. Rendu par lc_breadcrumb() (functions.php). */
.lc-breadcrumb {
    margin: 0 0 22px;
}
.lc-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.lc-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lc-breadcrumb li + li::before {
    content: "›";
    color: var(--lc-accent);
    opacity: 0.7;
    font-size: 1.1em;
    line-height: 1;
}
.lc-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.25s ease;
}
.lc-breadcrumb a:hover {
    color: var(--lc-accent);
}
.lc-breadcrumb li[aria-current] {
    color: var(--lc-accent);
}

@media (max-width: 768px) {
    .lc-breadcrumb ol {
        font-size: 0.72rem;
        gap: 8px;
    }
}

/* ════════════════════════════════════════════════════════
   PAGE « BLOG » (templates/tutos.php) — même structure qu'un article :
   bandeau sombre (.lc-blog__hero, calqué sur .lc-article__hero) puis liste
   d'articles sur bande claire ivoire (band-paper-2). Scoping : body.lc-blog-page.
   ════════════════════════════════════════════════════════ */
.lc-blog {
    background: var(--lc-bg);
    color: var(--lc-fg);
}

/* En-tête : bandeau court (pas 100vh) pour garder les articles lisibles. */
.lc-blog__hero {
    position: relative;
    padding: 160px 8% 60px;
    text-align: center;
    /* Bandeau sombre identique au hero d'article (.lc-article__hero) et au hero
       de la landing (graphite --lc-hero). */
    background:
        radial-gradient(circle at 50% 0%, rgba(200, 162, 74, 0.10), transparent 60%),
        var(--lc-hero);
    overflow: hidden; /* borne le grain au bandeau */
}

/* Grain fin (film) posé sur le fond sombre pour casser la platitude, sans
   toucher au halo doré. SVG feTurbulence inline : aucune image externe, léger.
   mix-blend-mode: overlay → le bruit réagit au fond (rendu feutré, premium). */
.lc-blog__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Texture carton (papier fibreux) posée par-dessus le grain pour épaissir la
   matière — rendu premium. Image claire sur fond sombre : soft-light + faible
   opacité ne gardent que le relief des fibres, sans grisonner le graphite.
   Identique sur .lc-article__hero::after. Opacité/échelle réglables ici. */
.lc-blog__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("img/cardboard-flat.webp");
    background-size: 320px;
    background-repeat: repeat;
}

.lc-blog__hero-inner {
    position: relative; /* passe au-dessus du grain (::before, z-index 0) */
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.lc-blog__eyebrow {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-accent);
    margin: 0 0 18px;
}

.lc-blog__title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0;
    color: var(--lc-fg);
}

.lc-blog__sub {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.02rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 22px auto 0;
    max-width: 620px;
}

/* Liste des articles — bande claire (.band-light .band-paper) posée dans le
   template : elle redéfinit les tokens --lc-* en palette ivoire, exactement
   comme les sections de contenu de l'accueil. Les styles ci-dessous s'appuient
   donc sur var(--lc-*) et s'adaptent seuls au fond clair. */
.lc-blog__list {
    padding: 72px 8% 96px;
    background: var(--lc-bg);
    color: var(--lc-fg);
}

.lc-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}

.lc-blog__card {
    position: relative;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    background: var(--lc-surface);
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.lc-blog__card:hover {
    border-color: var(--lc-accent-soft);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(26, 23, 19, 0.14);
}

.lc-blog__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.lc-blog__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--lc-surface-2);
}

.lc-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.lc-blog__card:hover .lc-blog__thumb img {
    transform: scale(1.05);
}

/* Vignette de repli quand l'article n'a pas d'image à la une */
.lc-blog__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 40%, var(--lc-accent-glow), transparent 70%),
        var(--lc-surface-2);
}

.lc-blog__thumb--empty span {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--lc-accent);
    opacity: 0.7;
}

.lc-blog__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 28px;
}

.lc-blog__date {
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-accent);
    margin: 0 0 12px;
}

.lc-blog__card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.3px;
    margin: 0 0 14px;
    color: var(--lc-fg);
}

.lc-blog__excerpt {
    font-family: 'Roboto', sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--lc-muted);
    margin: 0 0 22px;
}

.lc-blog__more {
    margin-top: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lc-accent);
    transition: color 0.25s ease;
}

/* Même couleur de survol que les liens d'article (.lc-article__content a:hover) */
.lc-blog__card:hover .lc-blog__more {
    color: var(--lc-accent-strong);
}

.lc-blog__card:hover .lc-blog__more span {
    display: inline-block;
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

.lc-blog__empty {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: var(--lc-muted);
    padding: 40px 0;
}

/* Révélation au scroll (partagée avec animations.js : .lc-reveal → .is-visible) */
.lc-blog__hero-inner.lc-reveal,
.lc-blog__card.lc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lc-blog__hero-inner.lc-reveal.is-visible,
.lc-blog__card.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 768px) {
    .lc-blog__hero {
        padding: 130px 6% 44px;
    }
    .lc-blog__list {
        padding: 12px 6% 72px;
    }
    .lc-blog__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-blog__hero-inner.lc-reveal,
    .lc-blog__card.lc-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════
   ARTICLE DE BLOG — single.php
   Hero sombre (titre + méta) posé sur :root sombre, puis corps
   de l'article sur bande claire ivoire (.band-light .band-paper),
   comme les sections de contenu de l'accueil. Le corps s'appuie
   sur var(--lc-*) et hérite donc de la palette claire.
   ════════════════════════════════════════════════════════ */
.lc-article {
    background: var(--lc-bg);
    color: var(--lc-fg);
}

/* ─ Hero sombre ─ */
.lc-article__hero {
    position: relative;
    padding: 160px 8% 56px;
    text-align: center;
    /* Graphite du hero de la landing (--lc-hero), commun à tous les bandeaux. */
    background:
        radial-gradient(circle at 50% 0%, rgba(200, 162, 74, 0.10), transparent 60%),
        var(--lc-hero);
    overflow: hidden; /* borne le grain au bandeau */
}

/* Grain fin identique au hero de la liste Blog (.lc-blog__hero::before). */
.lc-article__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Texture carton par-dessus le grain — voir .lc-blog__hero::after. */
.lc-article__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("img/cardboard-flat.webp");
    background-size: 320px;
    background-repeat: repeat;
}

.lc-article__hero-inner {
    position: relative; /* passe au-dessus du grain (::before, z-index 0) */
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.lc-article__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-accent);
    margin: 0 0 22px;
}

.lc-article__back,
.lc-article__back:visited {
    color: var(--lc-accent);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.lc-article__back:hover {
    opacity: 0.7;
}

.lc-article__cat {
    color: rgba(255, 255, 255, 0.55);
}

.lc-article__title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
    margin: 0;
    color: var(--lc-fg);
}

/* Titre d'une page interne (template-parts/page-hero.php) : mêmes capitales
   Oswald que les titres de section (.content-after h2), et un corps au-dessus
   du leur, comme le hero de la liste Blog (.lc-blog__title). Un titre de page
   ne doit jamais paraître plus petit que les titres qu'il annonce. */
.lc-article__title--page {
    font-size: clamp(3rem, 8vw, 6.75rem);
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
}

.lc-article__meta {
    font-family: 'Roboto', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 22px 0 0;
}

/* Accroche d'une page interne : même corps et même interligne que les accroches
   de section (.accroche), pour rester lisible sous un titre de page. Largeur
   bornée pour garder deux ou trois lignes bien découpées. */
.lc-article__meta--page {
    max-width: 640px;
    margin: 26px auto 0;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);
}

.lc-article__meta .lc-article__sep,
.lc-article__eyebrow .lc-article__sep {
    margin: 0 10px;
    opacity: 0.6;
}

/* ─ Corps clair : mêmes teintes que « Ce que je fais pour vous »
   (bande ivoire .band-paper-2 + carte blanche). ─ */
.lc-article__body {
    padding: 64px 8% 88px;         /* espace en haut : la carte décolle du hero */
    background: var(--lc-bg);      /* ivoire #fbf8f2 via .band-paper-2 */
    color: var(--lc-fg);
}

.lc-article__wrap {
    max-width: 940px;
    margin: 0 auto;
}

/* Image de couverture : posée au-dessus de la carte, détachée du hero */
.lc-article__cover {
    margin: 0 0 32px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(26, 23, 19, 0.18);
}

.lc-article__cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Carte de contenu : reprend .lc-apport__grid .card (fond blanc = --lc-surface,
   bord fin, ombre douce). */
.lc-article__card {
    position: relative;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    background: var(--lc-surface);
    box-shadow: 0 12px 32px rgba(26, 23, 19, 0.05);
    overflow: hidden;
    padding: 48px 52px 44px;
}

/* Prose de l'article */
.lc-article__content {
    font-family: 'Roboto', sans-serif;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--lc-fg);
}

.lc-article__content > *:first-child {
    margin-top: 0;
}

.lc-article__content p {
    margin: 0 0 1.4em;
    color: var(--lc-muted);
}

.lc-article__content h2,
.lc-article__content h3,
.lc-article__content h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: var(--lc-fg);
    margin: 1.9em 0 0.6em;
}

.lc-article__content h2 { font-size: 1.9rem; }
.lc-article__content h3 { font-size: 1.5rem; }
.lc-article__content h4 { font-size: 1.2rem; }

.lc-article__content a {
    color: var(--lc-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.25s ease;
}

.lc-article__content a:hover {
    color: var(--lc-accent-strong);
}

.lc-article__content strong {
    color: var(--lc-fg);
}

.lc-article__content ul,
.lc-article__content ol {
    margin: 0 0 1.4em;
    padding-left: 1.4em;
    color: var(--lc-muted);
}

.lc-article__content li {
    margin: 0 0 0.5em;
}

.lc-article__content li::marker {
    color: var(--lc-accent);
}

.lc-article__content blockquote {
    margin: 1.8em 0;
    padding: 0.4em 0 0.4em 1.4em;
    border-left: 3px solid var(--lc-accent);
    font-style: italic;
    color: var(--lc-fg);
}

.lc-article__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.4em 0;
}

.lc-article__content figure {
    margin: 1.6em 0;
}

.lc-article__content figcaption {
    font-size: 0.85rem;
    color: var(--lc-faint);
    text-align: center;
    margin-top: 8px;
}

.lc-article__content pre {
    background: var(--lc-surface-2);
    border: 1px solid var(--lc-line);
    border-radius: 12px;
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 0.92rem;
    margin: 0 0 1.4em;
}

.lc-article__content code {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.92em;
}

.lc-article__content hr {
    border: 0;
    border-top: 1px solid var(--lc-line);
    margin: 2.4em 0;
}

/* Étiquettes (tags) */
.lc-article__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2.4em 0 0;
    padding: 1.6em 0 0;
    border-top: 1px solid var(--lc-line);
}

.lc-article__tags li a {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--lc-muted);
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    padding: 5px 14px;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.lc-article__tags li a:hover {
    border-color: var(--lc-accent-soft);
    color: var(--lc-accent);
}

/* Navigation article précédent / suivant */
.lc-article__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 48px 0 0;
}

.lc-article__nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    background: var(--lc-surface);
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.lc-article__nav-link:hover {
    border-color: var(--lc-accent-soft);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(26, 23, 19, 0.12);
}

.lc-article__nav-link--next {
    text-align: right;
}

.lc-article__nav-link--prev:only-child {
    grid-column: 1 / 2;
}

.lc-article__nav-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-accent);
}

.lc-article__nav-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--lc-fg);
}

/* Retour au blog */
.lc-article__back-bottom {
    margin: 40px 0 0;
    text-align: center;
}

.lc-article__back-bottom a {
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-accent);
    transition: color 0.25s ease;
}

.lc-article__back-bottom a:hover {
    color: var(--lc-accent-strong);
}

/* Entrée au chargement : le contenu d'article est important, il apparaît
   dès l'ouverture (pas d'attente de scroll), avec un léger effet en cascade. */
@keyframes lc-article-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.lc-article__in {
    opacity: 0;
    animation: lc-article-in 0.6s ease forwards;
}

.lc-article__hero-inner.lc-article__in { animation-delay: 0.05s; }
.lc-article__cover.lc-article__in       { animation-delay: 0.18s; }
.lc-article__card.lc-article__in        { animation-delay: 0.28s; }

@media (max-width: 768px) {
    .lc-article__hero {
        padding: 128px 6% 44px;
    }
    .lc-article__body {
        padding: 44px 6% 64px;
    }
    .lc-article__card {
        padding: 30px 24px;
    }
    .lc-article__cover {
        margin: 0 0 24px;
    }
    .lc-article__nav {
        grid-template-columns: 1fr;
    }
    .lc-article__nav-link--next {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-article__in {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════
   DERNIÈRES RÉALISATIONS — index typographique dépliable
   Générique de film : au repos, rien que du texte et des filets. Un clic sur
   une ligne la déplie et révèle la capture (js/realisations.js). Aucun état ne
   dépend du survol : souris, doigt et clavier voient exactement la même chose.
   Prolonge le motif des grands numéros de la section « Méthode », qui précède.

   L'or ne sert qu'à UNE chose ici : désigner la ligne ouverte. Au repos et au
   survol tout est blanc ou gris ; c'est l'ouverture, et elle seule, qui allume
   le numéro, le signe et le filet. Un accent qui sert à tout ne désigne rien.

   Deux habillages pour le même index :
     — accueil : bande sombre assumée au milieu du flux clair, --lc-hero-solid
       comme le footer, pour tomber sur le même perçu que le hero ;
     — page « Réalisations » : bande ivoire, sous le bandeau du hero.
   Les couleurs suivent les tokens --lc-*, donc .band-light retourne tout seul
   le texte, les filets et l'or. Restent quatre valeurs qui n'ont pas de token :
   le filet de balayage, le lavis de survol, le fond de vignette et son voile.
   Elles vivent ici en locales, redéfinies plus bas pour la bande claire — sans
   quoi elles resteraient blanches sur du papier, c'est-à-dire invisibles.
   ════════════════════════════════════════════════════════ */
.lc-realisations {
    --lc-real-sweep: rgba(255, 255, 255, 0.45);
    --lc-real-wash: rgba(255, 255, 255, 0.045);
    --lc-real-surface: var(--lc-hero);
    --lc-real-tint: rgba(255, 255, 255, 0.06);
    color: var(--lc-fg);
}

/* La teinte graphite n'est imposée que hors bande claire : sur .band-light,
   --lc-bg vient de .band-paper / .band-paper-2 et doit le rester. */
.lc-realisations:not(.band-light) {
    --lc-bg: var(--lc-hero-solid);
}

.lc-realisations.band-light {
    --lc-real-sweep: rgba(22, 24, 28, 0.35);
    --lc-real-wash: rgba(22, 24, 28, 0.05);
    /* Gris perle et non blanc : sur du papier, une vignette blanche s'évanouit.
       Sans effet quand une vraie capture est versée, elle la recouvre. */
    --lc-real-surface: var(--lc-surface-2);
    --lc-real-tint: rgba(22, 24, 28, 0.04);
}

/* Texture carton sur la bande sombre de l'accueil, réglages identiques aux
   bandeaux internes (.lc-article__hero::after). Réservée à la variante sombre :
   .content-after garantit position:relative, et :not(.band-light) exclut la
   page « Réalisations » où l'index est sur papier ivoire. */
.lc-realisations.content-after:not(.band-light)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("img/cardboard-flat.webp");
    background-size: 320px;
    background-repeat: repeat;
}

/* Contenu au-dessus de la texture (le ::after est en z-index 0). */
.lc-realisations__head,
.lc-realisations__list,
.lc-realisations__all {
    position: relative;
    z-index: 1;
}

/* Variante « page » : l'index est le contenu, pas une section parmi d'autres.
   Il porte donc lui-même son fond et ses marges (.content-after est absente,
   et avec elle le filet doré, qui ferait doublon sous le bandeau du hero). */
.lc-realisations--page {
    padding: 64px 8% 96px;
    background: var(--lc-bg);
    color: var(--lc-fg);
}

.lc-realisations__head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lc-realisations__head .accroche {
    margin: 32px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--lc-muted);
}

/* ─ La liste : un compteur, des filets, rien de plus ─ */
.lc-realisations__list {
    counter-reset: lcreal;
    list-style: none;
    max-width: 1100px;
    margin: 64px auto 0;
    padding: 0;
}

/* Sans en-tête au-dessus d'elle, la liste n'a rien dont s'écarter. */
.lc-realisations__list--flush {
    margin-top: 0;
}

.lc-realisations__item {
    counter-increment: lcreal;
    position: relative;
    border-top: 1px solid var(--lc-line);
}

.lc-realisations__item:last-child {
    border-bottom: 1px solid var(--lc-line);
}

/* Filet qui balaie la ligne, de gauche à droite. Neutre au survol : une simple
   invite. Or une fois la ligne ouverte : là il dit quelque chose. */
.lc-realisations__item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--lc-real-sweep);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
    pointer-events: none;
}

.lc-realisations__item:hover::after,
.lc-realisations__item:focus-within::after,
.lc-realisations__item.is-open::after {
    width: 100%;
}

/* La ligne ouverte passe au-dessus de ses sœurs, sinon la bordure supérieure
   de la suivante — peinte après, elle est plus loin dans le DOM — se pose sur
   le filet doré et le délave de sa propre teinte. */
.lc-realisations__item.is-open {
    z-index: 1;
}

.lc-realisations__item.is-open::after {
    background: var(--lc-accent);
}

/* ─ La ligne cliquable ─
   Un vrai <button>, remis à plat : c'est lui qui porte l'action. */
.lc-realisations__toggle {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 32px;
    width: 100%;
    padding: 30px 20px 30px 4px;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background 0.45s ease,
                padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lavis neutre, pas doré : le survol déplace la ligne, il ne la colore pas. */
.lc-realisations__toggle:hover,
.lc-realisations__toggle:focus-visible,
.lc-realisations__item.is-open .lc-realisations__toggle {
    padding-left: 24px;
    background: linear-gradient(90deg, var(--lc-real-wash), transparent 55%);
}

/* Le numéro : gris, il blanchit au survol, il ne passe à l'or qu'ouvert */
.lc-realisations__num {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    line-height: 1;
    color: var(--lc-muted);
    transition: color 0.45s ease;
}

.lc-realisations__num::before {
    content: counter(lcreal, decimal-leading-zero);
}

.lc-realisations__item:hover .lc-realisations__num,
.lc-realisations__item:focus-within .lc-realisations__num {
    color: var(--lc-fg);
}

.lc-realisations__item.is-open .lc-realisations__num {
    color: var(--lc-accent);
}

.lc-realisations__name {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--lc-fg);
    opacity: 0.82;
    transition: opacity 0.45s ease;
}

.lc-realisations__item:hover .lc-realisations__name,
.lc-realisations__item:focus-within .lc-realisations__name,
.lc-realisations__item.is-open .lc-realisations__name {
    opacity: 1;
}

/* ─ Le signe + qui pivote en − ─
   Deux barres croisées : la verticale s'efface en tournant à l'ouverture. */
.lc-realisations__sign {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    flex: none;
}

.lc-realisations__sign::before,
.lc-realisations__sign::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    margin-top: -0.5px;
    background: var(--lc-muted);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                background 0.35s ease;
}

.lc-realisations__sign::after {
    transform: rotate(90deg);
}

.lc-realisations__item:hover .lc-realisations__sign::before,
.lc-realisations__item:hover .lc-realisations__sign::after,
.lc-realisations__item:focus-within .lc-realisations__sign::before,
.lc-realisations__item:focus-within .lc-realisations__sign::after {
    background: var(--lc-fg);
}

.lc-realisations__item.is-open .lc-realisations__sign::before {
    background: var(--lc-accent);
}

.lc-realisations__item.is-open .lc-realisations__sign::after {
    transform: rotate(0deg);
    opacity: 0;
}

/* ─ Le volet ─
   Sans JS, c'est un bloc ordinaire : tout est visible, la section reste
   complète. Le script pose .is-enhanced sur la liste, et à partir de là le
   volet devient une grille dont l'unique piste passe de 0fr à 1fr — la seule
   façon d'animer une hauteur « auto » en CSS, dans les deux sens.

   visibility (et non display ou [hidden]) parce qu'elle s'anime, retire quand
   même le lien vers le site du client de l'ordre de tabulation, et le sort de
   l'arbre d'accessibilité. Sa bascule est décalée à la fin de la fermeture,
   d'où le `visibility 0s linear .55s` : sinon le contenu disparaîtrait avant
   même que le volet ait commencé à se refermer.

   Deux boîtes imbriquées, et c'est indispensable : __panel-clip porte la
   découpe et rien d'autre, __panel-in porte le padding. box-sizing:border-box
   est global sur ce thème, donc une boîte de hauteur nulle ne descend jamais
   sous son propre padding — les fusionner laissait 44 px de volet « fermé ». */
.lc-realisations__panel-in {
    display: grid;
    /* Média dominant, mais en proportions : ~625 px sur grand écran (contenu à
       1100 px), et qui rétrécit sans étrangler le texte entre 900 et 1100 px.
       Une colonne fixe en px écraserait le détail juste au-dessus du mobile. */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    padding: 28px 24px 40px;
}

.lc-realisations__list.is-enhanced .lc-realisations__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.55s;
}

.lc-realisations__list.is-enhanced .lc-realisations__item.is-open .lc-realisations__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
}

/* min-height:0 lève le minimum implicite des éléments de grille, sans quoi la
   piste refuserait de descendre sous la hauteur du contenu. */
.lc-realisations__list.is-enhanced .lc-realisations__panel-clip {
    overflow: hidden;
    min-height: 0;
}

.lc-realisations__list.is-enhanced .lc-realisations__panel-in {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lc-realisations__list.is-enhanced .lc-realisations__item.is-open .lc-realisations__panel-in {
    opacity: 1;
    transition: opacity 0.45s ease 0.15s;
}

/* ─ La capture ─ */
.lc-realisations__media {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid var(--lc-line);
    border-radius: 4px;
    background: var(--lc-real-surface);
}

.lc-realisations__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cadrer sur le haut de la capture (en-tête, hero du site) plutôt que sur
       son centre : c'est la partie la plus reconnaissable, et le format 3/2
       tronque forcément une capture haute. */
    object-position: top;
}

/* Carrousel : la capture principale et les images de la galerie tiennent dans
   le même cadre média — une seule zone visuelle, balayable au doigt sur mobile.
   La chaîne height:100% remplit la boîte dont la hauteur vient de l'aspect-ratio. */
.lc-realisations__carousel,
.lc-realisations__carousel .carousel-inner,
.lc-realisations__carousel .carousel-item {
    height: 100%;
}

.lc-realisations__carousel .carousel-control-prev,
.lc-realisations__carousel .carousel-control-next {
    width: 14%;
    opacity: 1; /* Bootstrap plafonne à 0.5 : on veut la flèche pleinement lisible. */
}

/* Pastille sombre translucide sous la flèche : elle garantit le contraste quelle
   que soit l'image derrière (capture claire comme foncée), et donne à la flèche
   une cible cliquable nette au doigt sur mobile. */
.lc-realisations__carousel .carousel-control-prev::before,
.lc-realisations__carousel .carousel-control-next::before {
    content: "";
    position: absolute;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
}

.lc-realisations__carousel .carousel-control-prev:hover::before,
.lc-realisations__carousel .carousel-control-next:hover::before {
    background: rgba(0, 0, 0, 0.65);
}

/* Chevrons blancs sur la pastille sombre : l'or du thème (ton moyen) manquait de
   contraste sur fond foncé ; le blanc ressort franchement. Le chevron d'origine
   (fin, en « fill ») est remplacé par un tracé « stroke » épais : c'est
   stroke-width qui donne l'épaisseur, et mask-size l'agrandit. */
.lc-realisations__carousel .carousel-control-prev-icon,
.lc-realisations__carousel .carousel-control-next-icon {
    position: relative; /* passe au-dessus de la pastille ::before. */
    width: 1.7rem;
    height: 1.7rem;
    background-image: none;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.lc-realisations__carousel .carousel-control-prev-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M10.5 2.5 5 8l5.5 5.5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M10.5 2.5 5 8l5.5 5.5'/%3e%3c/svg%3e");
}

.lc-realisations__carousel .carousel-control-next-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5.5 2.5 11 8l-5.5 5.5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5.5 2.5 11 8l-5.5 5.5'/%3e%3c/svg%3e");
}

/* Description saisie dans l'éditeur, posée sous les tags dans la colonne détail. */
.lc-realisations__desc {
    max-width: 52ch;
    font-family: 'Roboto', sans-serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--lc-muted);
}

.lc-realisations__desc > :first-child {
    margin-top: 0;
}

.lc-realisations__desc > :last-child {
    margin-bottom: 0;
}

/* Vignette de substitution, tant qu'aucune capture n'est versée en admin.
   Neutre : une vraie capture n'aurait pas de halo doré, celle-ci non plus. */
.lc-realisations__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 50% 0%, var(--lc-real-tint), transparent 62%),
                var(--lc-real-surface);
}

.lc-realisations__ph span {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--lc-muted);
}

/* ─ Secteur, année, et le lien vers le site du client ─ */
.lc-realisations__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}

.lc-realisations__tags {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--lc-muted);
}

.lc-realisations__secteur + .lc-realisations__annee::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 18px;
    border-radius: 50%;
    background: var(--lc-muted);
    vertical-align: middle;
}

/* Lien « visiter le site » : libellé et flèche pleine à la couleur du texte. */
.lc-realisations__visit,
.lc-realisations__visit:visited {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: var(--lc-fg);
    transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}

.lc-realisations__visit:hover,
.lc-realisations__visit:focus-visible {
    gap: 20px;
    color: var(--lc-accent);
}

.lc-realisations__arrow {
    font-size: 0.72rem;
    line-height: 1;
    color: inherit;
}

/* ─ Lien vers la page complète ─ */
.lc-realisations__all {
    margin: 56px 0 0;
    text-align: center;
}

/* Bouton identique au CTA du hero (.lc-hero__cta) pour la cohérence.
   On reprend le même bloc plein, sans l'animation d'entrée propre au hero. */
.lc-realisations__all a,
.lc-realisations__all a:visited {
    display: inline-block;
    padding: 19px 52px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lc-bg);
    background: var(--lc-fg);
    border: 1px solid var(--lc-fg);
    border-radius: var(--lc-btn-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.lc-realisations__all a:hover,
.lc-realisations__all a:focus-visible {
    background: transparent;
    color: var(--lc-fg);
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

/* La flèche suit la couleur du texte du bouton (elle ne reste pas dorée). */
.lc-realisations__all a span[aria-hidden] {
    color: currentColor;
}

/* ─ Révélation au défilement : en-tête, puis lignes en cascade ─ */
.lc-realisations__head.lc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lc-realisations__head.lc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.lc-realisations__list.lc-reveal .lc-realisations__item {
    opacity: 0;
    transform: translateY(24px);
}
.lc-realisations__list.lc-reveal.is-visible .lc-realisations__item {
    animation: lcCardIn 0.55s ease forwards;
}
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(1) { animation-delay: 0.05s; }
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(2) { animation-delay: 0.15s; }
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(3) { animation-delay: 0.25s; }
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(4) { animation-delay: 0.35s; }
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(5) { animation-delay: 0.45s; }
/* La page « Réalisations » les affiche toutes : au-delà de cinq lignes, la
   cascade cesse de s'allonger — on attendrait sinon le générique de fin. */
.lc-realisations__list.is-visible .lc-realisations__item:nth-child(n+6) { animation-delay: 0.5s; }

/* ─ Sous 900 px : le volet passe en une colonne, sous le nom ─ */
@media (max-width: 900px) {
    .lc-realisations--page {
        padding: 40px 6% 72px;
    }
    .lc-realisations__toggle {
        gap: 0 20px;
        padding: 24px 8px 24px 4px;
    }
    .lc-realisations__panel-in {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px 12px 32px;
    }
    .lc-realisations__detail {
        gap: 20px;
    }
}

/* Mouvement réduit : on coupe balayages, cascades et le glissement du volet.
   Le dépliage, lui, reste — c'est une action, pas une décoration. Il devient
   instantané, et visibility bascule sans délai pour rester synchrone. */
@media (prefers-reduced-motion: reduce) {
    .lc-realisations__item::after,
    .lc-realisations__num,
    .lc-realisations__name,
    .lc-realisations__sign::before,
    .lc-realisations__sign::after,
    .lc-realisations__toggle,
    .lc-realisations__visit,
    .lc-realisations__all a {
        transition: none;
    }
    .lc-realisations__head.lc-reveal,
    .lc-realisations__list.lc-reveal .lc-realisations__item {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .lc-realisations__list.is-enhanced .lc-realisations__panel,
    .lc-realisations__list.is-enhanced .lc-realisations__item.is-open .lc-realisations__panel {
        transition: none;
    }
    .lc-realisations__list.is-enhanced .lc-realisations__panel-in,
    .lc-realisations__list.is-enhanced .lc-realisations__item.is-open .lc-realisations__panel-in {
        opacity: 1;
        transition: none;
    }
}

/*--------------------------------------------------------------
# Transitions entre pages (View Transitions API — cross-document)
--------------------------------------------------------------
Fondu enchaîné automatique à chaque navigation. API CSS pure : les
navigateurs qui ne la supportent pas (Firefox pour l'instant) ignorent
simplement la règle et affichent la navigation normale — aucune régression.
--------------------------------------------------------------*/
@view-transition {
    navigation: auto;
}

/* Rythme du fondu : assez court pour rester vif, assez long pour être perçu. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease;
}

/* Mouvement réduit : on désactive complètement la transition de page. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════
   PAGES SYSTÈME — 404, recherche, archives
   Réutilisent les coquilles « lc-article » (404) et « lc-blog » (archives,
   recherche). Ci-dessous : éléments propres à ces pages, posés dans la bande
   claire ivoire (tokens --lc-* déjà redéfinis par .band-light .band-paper-2).
   ════════════════════════════════════════════════════════ */

/* ─ 404 : actions et recherche dans la carte de contenu ─ */
.lc-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 8px;
}

.lc-404__btn,
.lc-404__btn:visited {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1px solid var(--lc-line);
    color: var(--lc-fg);
    background: var(--lc-surface);
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.lc-404__btn:hover {
    border-color: var(--lc-accent-soft);
    color: var(--lc-accent-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(26, 23, 19, 0.10);
}

.lc-404__btn--primary,
.lc-404__btn--primary:visited {
    background: var(--lc-accent);
    border-color: var(--lc-accent);
    color: #1a1713;
}

.lc-404__btn--primary:hover {
    background: var(--lc-accent-strong);
    border-color: var(--lc-accent-strong);
    color: #1a1713;
}

/* ─ Pagination (archives, recherche) — the_posts_pagination ─ */
.lc-pagination {
    max-width: 1180px;
    margin: 48px auto 0;
}

.lc-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.lc-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid var(--lc-line);
    background: var(--lc-surface);
    color: var(--lc-fg);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.lc-pagination a.page-numbers:hover {
    border-color: var(--lc-accent-soft);
    color: var(--lc-accent-strong);
}

.lc-pagination .page-numbers.current {
    background: var(--lc-accent);
    border-color: var(--lc-accent);
    color: #1a1713;
}

.lc-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

@media (max-width: 600px) {
    .lc-404__actions {
        flex-direction: column;
    }
    .lc-404__btn {
        text-align: center;
    }
}

/* ─── CTA vers le contact : bouton plus fin sur mobile ─────
   Sur desktop, tous ces boutons pleins (« Discutons de votre projet »,
   « Parlons de votre projet », « Voir toutes les réalisations »…) partagent
   le gabarit du CTA hero (padding 19px 52px / 1.25rem). Sur téléphone, ce
   gabarit rendait les boutons trop épais : on réduit le rembourrage vertical,
   la police et l'espacement pour une pilule plus élancée, sans toucher au
   desktop. Placé en fin de feuille pour l'emporter dans la cascade. */
@media (max-width: 768px) {
    .lc-hero__cta,
    .lc-hero__cta:visited,
    .lc-prestation__cta,
    .lc-prestation__cta:visited,
    .lc-projet__inner .btn,
    .lc-realisations__all a {
        padding: 14px 34px;
        font-size: 1.02rem;
        letter-spacing: 1px;
    }
}

/* Écrans très étroits : on resserre encore pour éviter le retour à la ligne. */
@media (max-width: 400px) {
    .lc-hero__cta,
    .lc-hero__cta:visited,
    .lc-prestation__cta,
    .lc-prestation__cta:visited,
    .lc-projet__inner .btn,
    .lc-realisations__all a {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* ─── Bandeau (topbar) plus fin sur mobile ────────────────
   Sur desktop le bandeau fait 90px de haut avec un burger de 50px et le nom
   en 1.3rem — trop épais sur téléphone. On abaisse la hauteur du bandeau, on
   réduit légèrement logo/monogramme et on resserre les marges latérales.
   IMPORTANT : on ne touche PAS aux barres du burger (.navbar-toggler span) :
   leur animation hamburger→croix (.is-open) est calibrée sur leur hauteur/
   marge (translateY 10px), la modifier casserait l'alignement de la croix.
   Placé en fin de feuille pour l'emporter dans la cascade. */
@media (max-width: 768px) {
    .navbar.fixed-top.lc-topbar {
        min-height: 66px;
    }
    .navbar-toggler {
        margin-right: 18px;
    }
    .lc-brand {
        margin-left: 20px;
    }
    .lc-brand__full {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .lc-brand__mark {
        width: 40px;
        height: 40px;
    }
    .lc-brand__mark-letters {
        font-size: 1.05rem;
    }
}

/* ─── Logo masqué quand le volet de menu est ouvert ───────
   La barre fixe (z-index 1046) passe volontairement AU-DESSUS du volet
   (z-index 1045) pour que le burger serve de bouton « fermer ». Effet de
   bord : le logo, lui aussi dans la barre, flottait par-dessus le menu
   déplié. On l'escamote tant que le volet est ouvert (classe .is-open posée
   sur le burger par navigation.js), le burger-croix restant seul visible.
   On agit sur `visibility` et non `opacity` : l'opacité du logo est déjà
   figée à 1 par l'animation lcFadeDown (fill forwards), qui l'emporterait
   sur une règle opacity. `:has()` sélectionne la barre selon l'état du
   burger, sans JS supplémentaire. */
.lc-topbar:has(.navbar-toggler.is-open) .lc-brand {
    visibility: hidden;
    transition: visibility 0s linear 0.15s;
}