/*
 * FK Design — design system (Editorial Tech Premium)
 * Source de vérité unique pour le CSS du site. Chargé par functions.php.
 *
 * Organisation :
 *  1. Polices locales (@font-face)
 *  2. Variables (couleurs, typographies, espacements)
 *  3. Accessibilité globale (lien d'évitement, focus, mouvement réduit)
 *  4. Correctifs ciblés (existant)
 *  5. Composants .fk2-* (utilisables dès maintenant, appliqués par la refonte)
 *  6. Header / footer (activés par la classe body.fk-refonte)
 */

/* ---------------------------------------------------------------
 * 1. Polices locales
 * Sous-ensembles latin et latin étendu, hébergées sur le site (RGPD).
 * ------------------------------------------------------------- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-400-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-400-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/manrope-500-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/manrope-500-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------
 * 2. Variables
 * Contrastes mesurés (WCAG) : voir docs/ du dépôt.
 *  - #747872 (muted) : 4,08:1 sur ivoire → insuffisant en texte courant ;
 *    on utilise --fk-muted-on-light (5,65:1) et --fk-muted-on-dark (7,68:1).
 *  - #8FAF9B (sage) : 7,84:1 sur fond sombre, 2,17:1 sur ivoire → réservé au sombre ;
 *  - #587363 (sage dark) : 4,71:1 sur ivoire, 5,19:1 sur blanc → texte/boutons sur clair.
 * ------------------------------------------------------------- */
:root{
	--fk-dark:#101214;
	--fk-surface:#181B1F;
	--fk-ivory:#F5F4F0;
	--fk-white:#FFFFFF;
	--fk-warm:#D9D7D0;
	--fk-text:#181B1F;
	--fk-muted:#747872;
	--fk-muted-on-light:#5E625C;
	--fk-muted-on-dark:#A3A7A0;
	--fk-sage:#8FAF9B;
	--fk-sage-dark:#587363;

	--fk-font-heading:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
	--fk-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--fk-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

	--fk-space-1:.25rem;
	--fk-space-2:.5rem;
	--fk-space-3:1rem;
	--fk-space-4:1.5rem;
	--fk-space-5:2.5rem;
	--fk-space-6:4rem;
	--fk-space-7:6rem;
	--fk-space-8:9rem;
	--fk-container:1280px;
	--fk-radius:6px;
	--fk-focus:#8FAF9B;
	--fk-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------
 * 3. Accessibilité globale
 * ------------------------------------------------------------- */
.fk-skip{
	position:absolute;
	left:12px;
	top:-80px;
	z-index:100000;
	padding:12px 18px;
	background:#101214;
	color:#fff;
	border:2px solid #8FAF9B;
	border-radius:6px;
	font:600 15px/1.2 var(--fk-font-body);
	text-decoration:none;
}
.fk-skip:focus{top:12px}

/* Priorité volontairement élevée : Divi neutralise l'outline sur plusieurs éléments (RGAA 10.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
	outline:3px solid var(--fk-focus) !important;
	outline-offset:3px !important;
}
#top-menu a:focus-visible,
.mobile_menu_bar:focus-visible{
	outline:3px solid var(--fk-focus);
	outline-offset:4px;
}

.fk-sr-only{
	position:absolute;
	width:1px;height:1px;
	margin:-1px;padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

/* ---------------------------------------------------------------
 * 4. Correctifs ciblés sur l'existant
 * ------------------------------------------------------------- */
/* Tableaux des pages légales : défilement dans le conteneur, jamais sur la page (RGAA, responsive). */
.fk-legal{overflow-x:auto}
.fk-legal table{min-width:560px}

/* ---------------------------------------------------------------
 * 5. Composants .fk2-*
 * Préfixe distinct de l'ancien .fk pour cohabiter pendant la migration.
 * ------------------------------------------------------------- */
.fk2{font-family:var(--fk-font-body);font-size:1.0625rem;line-height:1.65;color:var(--fk-text)}
.fk2 h1,.fk2 h2,.fk2 h3,.fk2 h4{font-family:var(--fk-font-heading);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0;padding:0;color:inherit}
.fk2 h1{font-size:clamp(2.5rem,6.2vw,5rem);font-weight:700}
.fk2 h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.fk2 h3{font-size:clamp(1.25rem,2vw,1.5rem)}
.fk2 p{margin:0 0 1em;padding:0}
.fk2 a{color:var(--fk-sage-dark);text-underline-offset:.2em}

.fk2-container{width:min(var(--fk-container),92%);margin-inline:auto}

.fk2-label{
	display:inline-block;
	font:500 .8125rem/1.4 var(--fk-font-mono);
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--fk-muted-on-light);
	margin-bottom:var(--fk-space-3);
}

/* Sections */
.fk2-sec{padding-block:clamp(4rem,9vw,8rem)}
.fk2-sec--dark{background:var(--fk-dark);color:var(--fk-ivory)}
.fk2-sec--dark .fk2-label{color:var(--fk-sage)}
.fk2-sec--dark p{color:var(--fk-muted-on-dark)}
.fk2-sec--dark a{color:var(--fk-sage)}
.fk2-sec--light{background:var(--fk-ivory);color:var(--fk-text)}
.fk2-sec--light p{color:var(--fk-muted-on-light)}
.fk2-sec--white{background:var(--fk-white);color:var(--fk-text)}
.fk2-lead{font-size:clamp(1.125rem,1.6vw,1.3125rem);max-width:60ch}

/* Boutons */
.fk2-btns{display:flex;flex-wrap:wrap;gap:var(--fk-space-3);margin-top:var(--fk-space-4)}
.fk2-btn{
	display:inline-flex;
	align-items:center;
	gap:.6em;
	min-height:48px;
	padding:.85rem 1.6rem;
	border:1px solid transparent;
	border-radius:var(--fk-radius);
	font:600 1rem/1.2 var(--fk-font-body);
	text-decoration:none;
	cursor:pointer;
	transition:background-color .2s var(--fk-ease),color .2s var(--fk-ease),border-color .2s var(--fk-ease);
}
/* Flèche décorative : texte alternatif vide pour qu'elle ne soit pas lue (repli sans alternative pour les anciens navigateurs). */
.fk2-btn::after{content:"→";content:"→" / "";transition:transform .2s var(--fk-ease)}
.fk2-btn:hover::after{transform:translateX(4px)}
.fk2-btn--primary{background:var(--fk-sage);color:var(--fk-dark)}
.fk2-btn--primary:hover{background:#A6C2B1;color:var(--fk-dark)}
.fk2-btn--primary:active{background:#7E9C8A}
.fk2-btn--secondary{background:transparent;color:inherit;border-color:currentColor}
.fk2-btn--secondary:hover{background:rgba(143,175,155,.16)}
.fk2-sec--light .fk2-btn--primary,
.fk2-sec--white .fk2-btn--primary{background:var(--fk-sage-dark);color:var(--fk-white)}
.fk2-sec--light .fk2-btn--primary:hover,
.fk2-sec--white .fk2-btn--primary:hover{background:#4A6354;color:var(--fk-white)}
.fk2-btn[disabled],.fk2-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* Liste éditoriale de services */
.fk2-list{list-style:none;margin:var(--fk-space-5) 0 0;padding:0;border-top:1px solid currentColor}
.fk2-list li{border-bottom:1px solid rgba(128,128,128,.35)}
.fk2-list a{
	display:grid;
	grid-template-columns:4rem 1fr auto;
	align-items:baseline;
	gap:var(--fk-space-3);
	padding:var(--fk-space-4) 0;
	color:inherit;
	text-decoration:none;
	transition:padding-left .25s var(--fk-ease),color .2s var(--fk-ease);
}
.fk2-list .n{font:500 .875rem var(--fk-font-mono)}
.fk2-list .t{font:600 clamp(1.4rem,3vw,2.25rem)/1.15 var(--fk-font-heading);letter-spacing:-.02em;text-transform:uppercase}
.fk2-list .d{grid-column:2;max-width:56ch;font-size:1rem;opacity:.85}
.fk2-list a:hover,.fk2-list a:focus-visible{padding-left:var(--fk-space-3);color:var(--fk-sage-dark)}
.fk2-sec--dark .fk2-list a:hover,.fk2-sec--dark .fk2-list a:focus-visible{color:var(--fk-sage)}

/* Grille d'axes (01 — CRÉER …) */
.fk2-axes{display:grid;gap:var(--fk-space-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--fk-space-5)}
.fk2-axes h3{font:500 .8125rem var(--fk-font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--fk-space-2)}

/* Projets */
.fk2-projects{display:grid;gap:var(--fk-space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:var(--fk-space-5)}
.fk2-project{display:block;color:inherit;text-decoration:none}
.fk2-project img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:var(--fk-radius);background:var(--fk-warm)}
.fk2-project .k{display:block;margin-top:var(--fk-space-3);font:500 .75rem var(--fk-font-mono);letter-spacing:.08em;text-transform:uppercase}
.fk2-project .n{display:block;margin-top:var(--fk-space-1);font:600 1.375rem/1.2 var(--fk-font-heading)}
.fk2-project .m{display:block;margin-top:var(--fk-space-1);font:500 .75rem var(--fk-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fk-muted-on-light)}
.fk2-project .l{display:inline-block;margin-top:var(--fk-space-2);font-weight:600}
.fk2-sec--dark .fk2-project .m{color:var(--fk-muted-on-dark)}
.fk2-project:hover .n{text-decoration:underline;text-underline-offset:.2em}

/* Formulaires (Contact Form 7) */
.fk2 .wpcf7 label{display:block;font-weight:500;margin-bottom:var(--fk-space-3)}
.fk2 .wpcf7 input[type=text],
.fk2 .wpcf7 input[type=email],
.fk2 .wpcf7 input[type=tel],
.fk2 .wpcf7 select,
.fk2 .wpcf7 textarea{
	width:100%;
	margin-top:var(--fk-space-1);
	padding:.8rem .9rem;
	background:var(--fk-white);
	color:var(--fk-text);
	border:1px solid #8a8d86;
	border-radius:var(--fk-radius);
	font:inherit;
}
.fk2 .wpcf7 .wpcf7-not-valid{border-color:#a1260f;border-width:2px}
.fk2 .wpcf7-not-valid-tip{color:#a1260f;font-size:.9rem;margin-top:var(--fk-space-1)}
.fk2 .wpcf7 form .wpcf7-response-output{margin:var(--fk-space-3) 0 0;padding:var(--fk-space-3);border:2px solid var(--fk-sage-dark);border-radius:var(--fk-radius)}
.fk2 .wpcf7 form.invalid .wpcf7-response-output,
.fk2 .wpcf7 form.failed .wpcf7-response-output{border-color:#a1260f}

/* Animations d'apparition : discrètes, désactivées en mouvement réduit */
.fk-js .fk2-reveal:not(.in){opacity:0;transform:translateY(12px)}
.fk2-reveal{transition:opacity .5s var(--fk-ease),transform .5s var(--fk-ease)}

@media (max-width:700px){
	.fk2-list a{grid-template-columns:2.5rem 1fr}
	.fk2-list .d{grid-column:2}
	.fk2-list .arrow{display:none}
}

/* ---------------------------------------------------------------
 * 6. Header / footer (opt-in via body.fk-refonte, posé par la refonte)
 * ------------------------------------------------------------- */
body.fk-refonte{font-family:var(--fk-font-body);background:var(--fk-dark);color:var(--fk-ivory)}
body.fk-refonte #main-header{background:rgba(16,18,20,.92);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.08)}
body.fk-refonte #main-header .container{width:min(var(--fk-container),92%)}
body.fk-refonte #top-menu a{font:500 .9375rem var(--fk-font-body);color:var(--fk-ivory);opacity:1}
body.fk-refonte #top-menu li.current-menu-item>a,
body.fk-refonte #top-menu a:hover{color:var(--fk-sage)}
body.fk-refonte #main-footer{background:var(--fk-dark);border-top:1px solid rgba(255,255,255,.08)}
body.fk-refonte #footer-bottom{background:transparent}
body.fk-refonte #footer-bottom a,
body.fk-refonte #footer-bottom{color:var(--fk-muted-on-dark)}