/*
Theme Name: Nordics Digital
Theme URI: https://nordicsdigital.com
Author: Nordics Digital Limited
Description: Custom theme for Nordics Digital — API work, systems integration and customer portals. Engagements scoped in writing, delivered, then invoiced. No checkout.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: ndl
*/

/* =========================================================================
   1. Jetons
   -------------------------------------------------------------------------
   Parti pris : contraste dur, une seule couleur, et du monospace pour les
   titres. Cinq sites existent déjà dans cette famille de projets — trois
   sombres, un crème, un papier chaud. Le blanc franc, les blocs noirs pleins
   et le bleu de cobalt donnent immédiatement autre chose.

   Le monospace en grand n'est pas un effet de style : ce cabinet vend du
   travail d'interface, et le monospace est la typographie dans laquelle ce
   travail s'écrit. La grammaire visuelle suit — diagrammes de séquence,
   lignes de vie verticales, flèches de requête et de réponse.
   ========================================================================= */

:root {
	--blanc:    #ffffff;
	--brume:    #f3f4f7;
	--brume-2:  #e7e9ef;
	--encre:    #080a0f;
	--encre-2:  #3d4553;
	--encre-3:  #767f91;

	--trait:      #dde0e8;
	--trait-fort: #b9bfcd;

	--cobalt:      #1f3ae0;
	--cobalt-pale: #eaedfd;

	--mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	           "Liberation Mono", "Courier New", monospace;
	--corps:   ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
	           Roboto, "Helvetica Neue", Arial, sans-serif;

	--large:  1300px;
	--etroit: 1000px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--blanc);
	color: var(--encre);
	font-family: var(--corps);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--mono);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1.06;
	margin: 0 0 20px;
	text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.6vw, 82px); }
h2 { font-size: clamp(27px, 3.5vw, 48px); }
h3 { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.03em; }
p  { margin: 0 0 18px; }
a  { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.ndl-shell  { max-width: var(--large);  margin-inline: auto; padding-inline: clamp(20px, 5vw, 58px); }
.ndl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ndl-repere {
	display: block;
	font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--cobalt);
	margin-bottom: 20px;
}
.ndl-lead { font-size: clamp(16.5px, 1.4vw, 19px); color: var(--encre-2); max-width: 66ch; }

.ndl-section { padding-block: clamp(70px, 8.5vw, 124px); position: relative; }
.ndl-section--trait { border-top: 2px solid var(--encre); }
.ndl-section--brume { background: var(--brume); }
.ndl-section--encre { background: var(--encre); color: var(--blanc); }
.ndl-section--encre h2, .ndl-section--encre h3 { color: var(--blanc); }
.ndl-section--encre .ndl-lead { color: rgba(255, 255, 255, .68); }
.ndl-section--encre .ndl-repere { color: #8fa2ff; }

.ndl-entete { max-width: 72ch; margin-bottom: clamp(36px, 4.5vw, 62px); }

/* =========================================================================
   2. Boutons
   ========================================================================= */

.ndl-btn {
	display: inline-flex; align-items: center; gap: 11px;
	font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
	text-transform: uppercase; text-decoration: none;
	padding: 17px 28px; border: 2px solid var(--encre); cursor: pointer;
	background: var(--encre); color: var(--blanc);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ndl-btn:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.ndl-btn--vide { background: transparent; color: var(--encre); }
.ndl-btn--vide:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.ndl-section--encre .ndl-btn { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.ndl-section--encre .ndl-btn:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.ndl-lien {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--encre); text-decoration: none;
	border-bottom: 2px solid var(--cobalt); padding-bottom: 4px;
}
.ndl-lien:hover { color: var(--cobalt); }

/* =========================================================================
   3. En-tête
   ========================================================================= */

.ndl-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 2px solid var(--encre);
}
.ndl-header__int {
	max-width: var(--large); margin-inline: auto;
	padding: 13px clamp(20px, 5vw, 58px);
	display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
}
.ndl-marque { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.ndl-marque__signe { width: 34px; height: 34px; flex: none; }
.ndl-marque__nom {
	font-family: var(--mono); font-weight: 600; font-size: 16px;
	letter-spacing: -0.04em; color: var(--encre); line-height: 1.1;
}
.ndl-marque__sous {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
	text-transform: uppercase; color: var(--encre-3);
}

.ndl-nav ul { display: flex; gap: clamp(12px, 1.7vw, 26px); list-style: none; margin: 0; padding: 0; }
.ndl-nav a {
	font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
	color: var(--encre-2); text-decoration: none;
}
.ndl-nav a:hover { color: var(--cobalt); }
@media (max-width: 980px) { .ndl-nav { display: none; } }

/* =========================================================================
   4. Hero
   ========================================================================= */

.ndl-hero { border-bottom: 2px solid var(--encre); overflow: hidden; }
.ndl-hero__grille { display: grid; gap: 0; }
@media (min-width: 1000px) { .ndl-hero__grille { grid-template-columns: 1.08fr .92fr; } }
.ndl-hero__texte { padding-block: clamp(64px, 8vw, 118px); padding-right: clamp(0px, 4vw, 56px); }
.ndl-hero__visuel {
	border-left: 2px solid var(--encre);
	background: var(--brume);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(28px, 4vw, 56px);
	margin-right: calc(-1 * clamp(20px, 5vw, 58px));
}
@media (max-width: 999px) {
	.ndl-hero__visuel { border-left: 0; border-top: 2px solid var(--encre); margin-inline: calc(-1 * clamp(20px, 5vw, 58px)); }
}
.ndl-hero h1 em { font-style: normal; color: var(--cobalt); }
.ndl-hero__accroche { font-size: clamp(16.5px, 1.45vw, 19.5px); color: var(--encre-2); max-width: 54ch; margin-top: 26px; }
.ndl-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 34px; }
.ndl-hero__note { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }

/* =========================================================================
   5. Diagramme de séquence
   ========================================================================= */

.ndl-sequence { width: 100%; }
.ndl-sequence svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   6. Bande de repères
   ========================================================================= */

.ndl-bande { border-bottom: 2px solid var(--encre); background: var(--encre); overflow: hidden; padding-block: 15px; }
.ndl-bande__piste { display: flex; gap: 40px; white-space: nowrap; animation: ndl-defile 44s linear infinite; }
.ndl-bande span {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
	text-transform: uppercase; color: rgba(255,255,255,.62);
	display: inline-flex; align-items: center; gap: 40px;
}
.ndl-bande span::after { content: ""; width: 6px; height: 6px; background: #8fa2ff; }
@keyframes ndl-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ndl-bande__piste { animation: none; } }

/* =========================================================================
   7. Prix
   ========================================================================= */

.ndl-prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ndl-prix__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.ndl-prix__principal {
	font-family: var(--mono); font-weight: 600;
	font-size: clamp(24px, 2.5vw, 33px); letter-spacing: -0.05em;
	color: var(--encre); line-height: 1;
}

/* =========================================================================
   8. Cartes
   ========================================================================= */

.ndl-grille { display: grid; gap: 2px; background: var(--encre); border: 2px solid var(--encre); }
@media (min-width: 760px)  { .ndl-grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .ndl-grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ndl-grille--3 { grid-template-columns: repeat(3, 1fr); } }

.ndl-carte {
	background: var(--blanc); padding: clamp(24px, 2.8vw, 34px);
	display: flex; flex-direction: column; gap: 14px;
	transition: background .15s ease;
}
.ndl-carte:hover { background: var(--cobalt-pale); }
.ndl-carte__index {
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
	color: var(--cobalt); display: block;
}
.ndl-carte__etiquette {
	font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--encre-3);
	border: 1px solid var(--trait-fort); padding: 4px 10px; align-self: flex-start;
}
.ndl-carte h3 { margin: 0; }
.ndl-carte__resume { margin: 0; font-size: 15.5px; color: var(--encre-2); }
.ndl-carte__liste { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--trait); list-style: none; display: grid; gap: 9px; }
.ndl-carte__liste li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.ndl-carte__liste li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--cobalt); font-size: 12px; }
.ndl-carte__pied { margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* =========================================================================
   9. Étapes
   ========================================================================= */

.ndl-etapes { display: grid; gap: 2px; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.16); }
@media (min-width: 900px) { .ndl-etapes { grid-template-columns: repeat(4, 1fr); } }
.ndl-etape { background: var(--encre); padding: clamp(22px, 2.4vw, 32px); }
.ndl-etape__num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: #8fa2ff; display: block; margin-bottom: 14px; }
.ndl-etape h3 { font-size: 17px; margin-bottom: 10px; }
.ndl-etape p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.66); }

/* =========================================================================
   10. FAQ
   ========================================================================= */

.ndl-faq { border: 2px solid var(--encre); }
.ndl-faq details { border-bottom: 1px solid var(--trait); background: var(--blanc); }
.ndl-faq details:last-child { border-bottom: 0; }
.ndl-faq details[open] { background: var(--brume); }
.ndl-faq summary {
	cursor: pointer; list-style: none; padding: 21px clamp(18px, 2.6vw, 28px);
	font-family: var(--mono); font-weight: 500; font-size: 16.5px; letter-spacing: -0.025em;
	display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.ndl-faq summary::-webkit-details-marker { display: none; }
.ndl-faq summary::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--cobalt); flex: none; }
.ndl-faq details[open] summary::after { content: "−"; }
.ndl-faq__corps { padding: 0 clamp(18px, 2.6vw, 28px) 24px; color: var(--encre-2); font-size: 15.5px; max-width: 80ch; }
.ndl-faq__corps p { margin: 0 0 13px; }
.ndl-faq__corps p:last-child { margin: 0; }

/* =========================================================================
   11. Formulaire
   ========================================================================= */

.ndl-form { max-width: 880px; }
.ndl-form__grille { display: grid; gap: 18px; }
@media (min-width: 720px) { .ndl-form__grille { grid-template-columns: 1fr 1fr; } }
.ndl-champ { display: flex; flex-direction: column; gap: 7px; }
.ndl-champ--large { grid-column: 1 / -1; }
.ndl-champ label {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--encre-3);
}
.ndl-champ label .requis { color: var(--cobalt); }
.ndl-champ input, .ndl-champ select, .ndl-champ textarea {
	width: 100%; padding: 14px 16px;
	background: var(--blanc); color: var(--encre);
	border: 2px solid var(--trait-fort);
	font-family: var(--corps); font-size: 16px; line-height: 1.5;
	transition: border-color .15s ease;
	appearance: none;
}
.ndl-champ textarea { resize: vertical; min-height: 148px; }
.ndl-champ select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767f91' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
	padding-right: 42px; cursor: pointer;
}
.ndl-champ input:focus, .ndl-champ select:focus, .ndl-champ textarea:focus {
	outline: none; border-color: var(--cobalt);
}
.ndl-champ__aide { font-size: 12.5px; color: var(--encre-3); line-height: 1.5; }
.ndl-form__pied { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--encre); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ndl-form__note { font-size: 12.5px; color: var(--encre-3); max-width: 54ch; line-height: 1.6; margin: 0; }
.ndl-form__etat { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--cobalt); background: var(--cobalt-pale); font-size: 15px; }
.ndl-form__etat--erreur { border-left-color: #c2270a; background: #fdeeea; }

/* =========================================================================
   12. Pied de page
   ========================================================================= */

.ndl-footer { border-top: 2px solid var(--encre); background: var(--encre); color: rgba(255,255,255,.72); padding-block: clamp(52px, 6.5vw, 86px) 38px; }
.ndl-footer__haut { display: grid; gap: 42px; }
@media (min-width: 900px) { .ndl-footer__haut { grid-template-columns: 1.7fr 1fr 1fr; } }
.ndl-footer h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8fa2ff; margin-bottom: 16px; }
.ndl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ndl-footer a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 14.5px; }
.ndl-footer a:hover { color: #fff; }
.ndl-footer__desc { font-size: 14.5px; color: rgba(255,255,255,.7); max-width: 44ch; }

.ndl-identite { margin-top: 50px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.18); }
.ndl-identite dl { display: grid; gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); margin: 0; }
@media (min-width: 700px)  { .ndl-identite dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ndl-identite dl { grid-template-columns: repeat(3, 1fr); } }
.ndl-identite div { background: var(--encre); padding: 14px 18px; }
.ndl-identite dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 5px; }
.ndl-identite dd { margin: 0; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.9); }
.ndl-mentions { margin-top: 26px; font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.55); max-width: 96ch; }
.ndl-mentions strong { color: rgba(255,255,255,.8); font-weight: 600; }

/* =========================================================================
   13. Prose des documents légaux
   ========================================================================= */

.ndl-prose { max-width: 74ch; }
.ndl-prose h1 { font-size: clamp(30px, 4.2vw, 52px); margin-bottom: 32px; }
.ndl-prose h2 { font-size: clamp(19px, 2vw, 26px); margin: 50px 0 15px; }
.ndl-prose h3 { font-size: 17px; margin: 30px 0 11px; }
.ndl-prose p, .ndl-prose li { color: var(--encre-2); font-size: 16px; }
.ndl-prose ul { padding-left: 20px; }
.ndl-prose li { margin-bottom: 9px; }
.ndl-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.ndl-prose caption { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); padding-bottom: 11px; }
.ndl-prose th, .ndl-prose td { border: 1px solid var(--trait); padding: 11px 13px; text-align: left; vertical-align: top; color: var(--encre-2); }
.ndl-prose th { background: var(--brume); color: var(--encre); font-weight: 600; }

.ndl-bloc-entreprise { border: 2px solid var(--encre); background: var(--brume); padding: 24px 28px; margin-bottom: 38px; }
.ndl-bloc-entreprise dl { display: grid; gap: 13px 28px; margin: 0; }
@media (min-width: 720px) { .ndl-bloc-entreprise dl { grid-template-columns: repeat(2, 1fr); } }
.ndl-bloc-entreprise dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.ndl-bloc-entreprise dd { margin: 4px 0 0; font-size: 14.5px; color: var(--encre); }

.ndl-autres { margin-top: 60px; padding-top: 28px; border-top: 2px solid var(--encre); }
.ndl-autres h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 15px; }
.ndl-autres ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px 20px; }

/* =========================================================================
   14. Révélation
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].ndl-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* =========================================================================
   15. Sections approfondies
   ========================================================================= */

.ndl-detail { border-top: 2px solid var(--encre); padding-block: clamp(56px, 6.5vw, 96px); }
.ndl-detail:first-of-type { border-top: 0; padding-top: 0; }
.ndl-detail__grille { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; }
@media (min-width: 1000px) { .ndl-detail__grille { grid-template-columns: 0.95fr 1.05fr; } }

.ndl-detail__num {
	font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
	color: var(--cobalt); display: block; margin-bottom: 14px;
}
.ndl-detail h3 { font-size: clamp(23px, 2.6vw, 34px); margin-bottom: 18px; }
.ndl-detail p { color: var(--encre-2); font-size: 16.5px; max-width: 60ch; }
.ndl-detail__citation {
	margin: 22px 0; padding: 16px 20px; background: var(--cobalt-pale);
	border-left: 3px solid var(--cobalt);
	font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--encre);
}
.ndl-detail__livrables { margin: 24px 0 0; padding: 20px 0 0; border-top: 2px solid var(--encre); }
.ndl-detail__livrables h4 {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
	text-transform: uppercase; color: var(--encre-3); margin: 0 0 12px;
}
.ndl-detail__livrables ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ndl-detail__livrables li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--encre-2); }
.ndl-detail__livrables li::before { content: "→"; position: absolute; left: 0; color: var(--cobalt); font-size: 12px; }

.ndl-detail__visuel { position: sticky; top: 90px; }
@media (max-width: 999px) { .ndl-detail__visuel { position: static; } }
.ndl-detail__legende {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--encre-3);
	margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--trait);
}

/* =========================================================================
   16. Pied de page — colonnes de données côte à côte
   ========================================================================= */

.ndl-footer__legal { display: grid; gap: 2px; background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.16); margin-top: 46px; }
@media (min-width: 620px)  { .ndl-footer__legal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ndl-footer__legal { grid-template-columns: repeat(4, 1fr); } }
.ndl-footer__legal a {
	background: var(--encre); padding: 15px 18px; display: block;
	font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
	color: rgba(255,255,255,.78); text-decoration: none;
}
.ndl-footer__legal a:hover { background: var(--cobalt); color: #fff; }

.ndl-footer__titre {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
	text-transform: uppercase; color: #8fa2ff; margin: 46px 0 14px;
}
.ndl-bas {
	margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.5);
}