/* ==========================================================================
   WPQM Manufacturing — site public
   1. Variables      5. Mise en page      9. Architecture ISA-95
   2. Base           6. En-tete          10. Blog
   3. Utilitaires    7. Composants       11. Formulaires
   4. Boutons        8. Sections         12. Pied de page / responsive
   ========================================================================== */

/* --- 1. Variables -------------------------------------------------------- */

:root {
    /* Bleu foncé */
    --bleu-900: #081a29;
    --bleu-800: #0e2b43;
    --bleu-700: #14405f;
    --bleu-600: #1b587f;

    /* Gris acier */
    --acier-700: #33475a;
    --acier-600: #46596b;
    --acier-500: #6a7f92;
    --acier-300: #a9b8c6;
    --acier-200: #ccd6df;
    --acier-100: #e7edf2;
    --acier-50:  #f5f8fa;

    --blanc:     #ffffff;

    /* Accents industrie 4.0 */
    --cyan:      #00b3c8;
    --cyan-dark: #017d8e;
    --ambre:       #f2a900;
    --ambre-fonce: #d99a00;
    --rouge:     #c0392b;
    --vert:      #1e8457;

    --shell:     1280px;
    --rayon:     4px;
    --rayon-lg:  8px;

    --ombre-sm:  0 1px 2px rgba(8, 26, 41, .08);
    --ombre:     0 4px 16px rgba(8, 26, 41, .09);
    --ombre-lg:  0 18px 48px rgba(8, 26, 41, .16);

    --transition: 180ms ease;
}

/* --- 2. Base ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--acier-700);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.2;
    color: var(--bleu-900);
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--bleu-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cyan-dark); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

img, svg { max-width: 100%; }

figure { margin: 0; }

address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--cyan-dark);
    outline-offset: 2px;
}

/* Sur fond sombre le cyan fonce tombe a 2,99 de contraste : le cercle
   de focus y reprend le cyan clair, qui donne 5,73. */
.hero :focus-visible,
.topbar :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.isa__detail :focus-visible {
    outline-color: var(--cyan);
}

/* --- 3. Utilitaires ------------------------------------------------------ */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}

.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;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--bleu-900);
    color: var(--blanc);
}

.skip-link:focus { left: 16px; top: 12px; }

.icon { width: 24px; height: 24px; flex: none; }
.icon--xs { width: 16px; height: 16px; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyan-dark);
}

.lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--acier-600);
}

.measure { max-width: 68ch; }

.tag {
    display: inline-block;
    padding: 3px 10px;
    margin: 0 6px 6px 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acier-500);
    border: 1px solid var(--acier-200);
    border-radius: 999px;
}

.alert {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--vert);
    border-radius: var(--rayon);
    background: var(--acier-50);
    color: var(--bleu-800);
}

.alert--warning { border-color: var(--ambre); }
.alert--danger  { border-color: var(--rouge); }

/* Apparition au défilement (désactivée si l'utilisateur préfère moins d'animation) */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

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

/* --- 4. Boutons ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blanc);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: var(--bleu-700);
    border: 1px solid transparent;
    border-radius: var(--rayon);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover { background: var(--bleu-600); color: var(--blanc); }

.btn--accent { background: var(--ambre); color: var(--bleu-900); }
.btn--accent:hover { background: var(--ambre-fonce); color: var(--bleu-900); }

.btn--ghost {
    color: var(--blanc);
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
}

.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--blanc); }

.btn--outline {
    color: var(--bleu-700);
    background: transparent;
    border-color: var(--acier-200);
}

.btn--outline:hover { background: var(--acier-50); color: var(--bleu-700); border-color: var(--acier-300); }

.btn--lg { padding: 15px 30px; font-size: 1.02rem; }
.btn--block { width: 100%; justify-content: center; }

/* --- 5. Mise en page ----------------------------------------------------- */

.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--acier-50); }

.section--dark {
    background: var(--bleu-900);
    color: var(--acier-200);
}

.section--dark h2,
.section--dark h3 { color: var(--blanc); }

.section--dark .lead { color: var(--acier-300); }

.section__head { max-width: 72ch; margin-bottom: 44px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- 6. En-tete ---------------------------------------------------------- */

.topbar {
    background: var(--bleu-900);
    color: var(--acier-300);
    font-size: .82rem;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 40px;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.topbar__item:hover { color: var(--blanc); }

.langs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.langs__link {
    padding: 2px 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .06em;
    color: var(--acier-300);
    text-decoration: none;
    border-radius: var(--rayon);
}

.langs__link:hover { color: var(--blanc); background: rgba(255, 255, 255, .1); }
.langs__link.is-active { color: var(--bleu-900); background: var(--cyan); }

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--blanc);
    border-bottom: 1px solid var(--acier-100);
    transition: box-shadow var(--transition);
}

.masthead.is-stuck { box-shadow: var(--ombre); }

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 74px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: inherit;
}

.logo img { display: block; width: auto; height: 44px; }

.burger {
    display: none;
    margin-left: auto;
    padding: 8px;
    color: var(--bleu-900);
    background: transparent;
    border: 1px solid var(--acier-200);
    border-radius: var(--rayon);
    cursor: pointer;
}

.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

.mainnav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.mainnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainnav__list li { margin: 0; }

.mainnav__link {
    display: block;
    padding: 8px 10px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--acier-700);
    text-decoration: none;
    border-radius: var(--rayon);
    transition: color var(--transition), background var(--transition);
}

.mainnav__link:hover { color: var(--bleu-700); background: var(--acier-50); }

.mainnav__link.is-active {
    color: var(--bleu-900);
    box-shadow: inset 0 -2px 0 var(--cyan-dark);
    border-radius: 0;
}

/* Dans la barre, le bouton reste compact pour que le menu tienne
   sur une seule ligne. */
.mainnav__cta { padding: 10px 16px; font-size: .86rem; }

/* --- 7. Composants ------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--acier-200); }

.card__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 18px;
    color: var(--bleu-700);
    background: var(--acier-50);
    border-radius: var(--rayon);
}

.card__title { margin-bottom: .4em; }
.card__text { margin: 0; color: var(--acier-600); font-size: .95rem; }

.card--link { text-decoration: none; color: inherit; }

.card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--bleu-600);
}

/* Cartes des piliers W / P / Q / M */

.pillar {
    position: relative;
    overflow: hidden;
    padding-top: 32px;
}

.pillar__letter {
    position: absolute;
    top: -14px; right: 10px;
    font-size: 5.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--acier-50);
    pointer-events: none;
}

.pillar__icon { color: var(--cyan-dark); }
.pillar__name { margin-bottom: .2em; font-size: 1.1rem; }
.pillar__label { margin: 0 0 .9em; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acier-500); }

/* Listes à puces marquées */

.ticks { margin: 0; padding: 0; list-style: none; }

.ticks li {
    position: relative;
    padding-left: 28px;
    margin-bottom: .6em;
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 4px; top: .55em;
    width: 9px; height: 9px;
    background: var(--cyan-dark);
    transform: rotate(45deg);
}

.section--dark .ticks li::before { background: var(--cyan); }

/* Indicateurs chiffrés */

.kpi {
    padding: 26px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--rayon-lg);
    background: rgba(255, 255, 255, .04);
}

.kpi__value {
    margin: 0 0 6px;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: -.02em;
}

.kpi__label { margin: 0; font-size: .88rem; color: var(--acier-300); }

/* Étapes numérotées */

.steps { counter-reset: step; display: grid; gap: 4px; }

.step {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 22px;
    padding: 24px 0;
    border-top: 1px solid var(--acier-100);
}

.step:last-child { border-bottom: 1px solid var(--acier-100); }

.step__num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--acier-200);
    line-height: 1;
}

.step__title { margin-bottom: .3em; }
.step__text { margin: 0; color: var(--acier-600); }

/* Citations */

.quote {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-left: 3px solid var(--cyan-dark);
    border-radius: var(--rayon-lg);
}

.quote__text { margin: 0 0 18px; font-size: 1.02rem; color: var(--bleu-800); }
.quote__author { margin: 0; font-weight: 700; font-size: .92rem; color: var(--bleu-900); }
.quote__role { margin: 0; font-size: .85rem; color: var(--acier-500); }

/* Bandeau d'appel à l'action */

.cta-band { padding: 56px 0; background: var(--bleu-800); color: var(--acier-200); }

.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-band__title { margin-bottom: .3em; color: var(--blanc); }
.cta-band__text { margin: 0; max-width: 62ch; color: var(--acier-300); }

/* --- 8. Sections --------------------------------------------------------- */

/* Bannière d'accueil */

.hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 96px;
    color: var(--acier-200);
    background:
        radial-gradient(900px 420px at 78% 18%, rgba(0, 179, 200, .20), transparent 62%),
        linear-gradient(160deg, var(--bleu-900) 0%, var(--bleu-800) 58%, var(--bleu-700) 100%);
}

/* Trame technique discrète */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
    align-items: center;
}

.hero__eyebrow { color: var(--cyan); }
.hero h1 { color: var(--blanc); margin-bottom: .45em; }
.hero__text { font-size: 1.08rem; color: var(--acier-300); max-width: 60ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero__badge {
    padding: 5px 13px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cyan);
    border: 1px solid rgba(0, 179, 200, .4);
    border-radius: 999px;
}

/* Schéma animé de la bannière */

.stack { display: grid; gap: 10px; }

.stack__row {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    border-left: 3px solid var(--cyan);
    border-radius: var(--rayon);
    backdrop-filter: blur(2px);
}

.stack__row:nth-child(1) { border-left-color: var(--ambre); }
.stack__row:nth-child(2) { border-left-color: var(--cyan); }
.stack__row:nth-child(3) { border-left-color: var(--cyan-dark); }
.stack__row:nth-child(4) { border-left-color: var(--acier-500); }
.stack__row:nth-child(5) { border-left-color: var(--acier-600); }

.stack__level {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acier-300);
}

.stack__name { font-weight: 600; color: var(--blanc); font-size: .95rem; }
.stack__meta { display: block; font-size: .76rem; color: var(--acier-300); font-weight: 400; }

/* Deux sens de circulation, comme sur la page Architecture :
   la descente des ordres a gauche, la remontee des mesures a droite. */

.stack__flow {
    position: relative;
    height: 26px;
    width: 14px;
    margin: 0 0 0 34px;
}

.stack__flow::before,
.stack__flow::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
}

.stack__flow::before { left: 0;   background: linear-gradient(var(--cyan), transparent); }
.stack__flow::after  { left: 10px; background: linear-gradient(transparent, var(--ambre)); }

.stack__dot {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
}

.stack__dot--down { left: -3px; background: var(--cyan);  animation: flow-down 2.6s linear infinite; }
.stack__dot--up   { left: 7px;  background: var(--ambre); animation: flow-up 2.6s linear infinite; }

@keyframes flow-down {
    0%   { top: -4px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 24px; opacity: 0; }
}

@keyframes flow-up {
    0%   { top: 24px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: -4px; opacity: 0; }
}

/* Bannière de page intérieure */

.page-hero {
    padding: 62px 0 54px;
    color: var(--acier-200);
    background: linear-gradient(140deg, var(--bleu-900), var(--bleu-700));
}

.page-hero h1 { color: var(--blanc); margin-bottom: .35em; }
.page-hero__text { max-width: 72ch; color: var(--acier-300); font-size: 1.05rem; margin: 0; }

.breadcrumb {
    margin-bottom: 18px;
    font-size: .8rem;
    color: var(--acier-300);
}

.breadcrumb a { color: var(--acier-300); text-decoration: none; }
.breadcrumb a:hover { color: var(--blanc); }
.breadcrumb span { margin: 0 8px; opacity: .5; }

/* Blocs de service détaillés */

.service {
    padding: 56px 0;
    border-top: 1px solid var(--acier-100);
    scroll-margin-top: 110px;
}

.service:first-of-type { border-top: 0; }

.service__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.service__badge {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    flex: none;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--blanc);
    background: var(--bleu-700);
    border-radius: var(--rayon);
}

.service:nth-of-type(2) .service__badge { background: var(--bleu-600); }
.service:nth-of-type(3) .service__badge { background: var(--cyan-dark); }
.service:nth-of-type(4) .service__badge { background: var(--acier-600); }

.service__title { margin-bottom: .15em; }
.service__label { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acier-500); }

.service__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }

.service__items { display: grid; gap: 2px; }

.service__item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--acier-100);
}

.service__item:first-child { border-top: 1px solid var(--acier-100); }
.service__item h4 { margin: 0 0 .2em; }
.service__item p { margin: 0; font-size: .93rem; color: var(--acier-600); }
.service__item .icon { color: var(--cyan-dark); margin-top: 3px; }

/* Numero repris du repere pose sur le schema de la section */
.service__num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    font-size: .76rem;
    font-weight: 800;
    color: var(--blanc);
    background: var(--bleu-900);
    border-radius: 50%;
}

.panel {
    padding: 26px;
    background: var(--acier-50);
    border-radius: var(--rayon-lg);
}

.panel + .panel { margin-top: 20px; }
.panel__title { margin-bottom: .6em; font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--acier-500); }
.panel p { font-size: .94rem; }
.panel .ticks li { font-size: .92rem; }

/* Schemas industriels (SVG inscrit dans la page) */

.figure {
    margin: 30px 0 34px;
    padding: 24px 26px 20px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
}

/* Le schema s'adapte a la largeur disponible et reste centre : pas de
   defilement lateral, y compris sur telephone. */
.figure__canvas { display: flex; justify-content: center; }

.diagram {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
}

.diagram text { font-family: inherit; }

.figure__caption {
    margin-top: 18px;
    padding-top: 16px;
    font-size: .92rem;
    color: var(--acier-600);
    border-top: 1px solid var(--acier-100);
}

.figure__caption strong {
    display: block;
    margin-bottom: .3em;
    font-size: .95rem;
    color: var(--bleu-900);
}

.brochure {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 20px;
    text-decoration: none;
    color: var(--bleu-800);
    background: var(--blanc);
    border: 1px solid var(--acier-200);
    border-radius: var(--rayon);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.brochure:hover { border-color: var(--cyan-dark); box-shadow: var(--ombre-sm); color: var(--bleu-800); }
.brochure strong { display: block; font-size: .94rem; }
.brochure small { color: var(--acier-500); font-size: .78rem; }
.brochure .icon { color: var(--cyan-dark); }

/* Secteurs */

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

/* Trois colonnes franches, et non un auto-fit qui en donne deux ou
   quatre selon la largeur restante. */
.tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) { .tuiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tuiles--3 { grid-template-columns: 1fr; } }

.tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 26px 20px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Filet de tete qui se deploie au survol, plutot qu'un aplat permanent
   qui alourdirait six cartes cote a cote. */
.tuile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan-dark), var(--bleu-600));
    transition: width 260ms ease;
}

.tuile:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: var(--acier-200); }
.tuile:hover::before { width: 100%; }

.tuile__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.tuile__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    color: var(--cyan-dark);
    background: rgba(0, 179, 200, .1);
    border-radius: var(--rayon);
}

.tuile__nom { margin: 0; font-size: 1.12rem; }

.tuile__num {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--acier-300);
}
.tuile__texte { margin: 0 0 18px; font-size: .94rem; color: var(--acier-600); }
.tuile__texte:last-child { margin-bottom: 0; }

.tuile__label {
    display: block;
    margin: 0 0 10px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acier-500);
}

/* Les enjeux en pastilles : plus rapides a parcourir qu'une liste a puces */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }

.chip {
    margin: 0;
    padding: 5px 11px;
    font-size: .8rem;
    color: var(--acier-700);
    background: var(--acier-50);
    border: 1px solid var(--acier-100);
    border-radius: 999px;
}

.tuile__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--acier-100);
}

.tuile__pied .tuile__label { margin: 0; }

.piliers { display: flex; gap: 6px; }

.pilier {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    font-size: .78rem;
    font-weight: 800;
    border-radius: var(--rayon);
}

.pilier--haute   { color: var(--blanc); background: var(--bleu-700); }
.pilier--moyenne { color: var(--acier-500); border: 1.5px solid var(--acier-200); }

/* Lecture croisée secteurs × piliers */

.matrice-cadre {
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
    overflow: hidden;
}

.matrice { width: 100%; border-collapse: collapse; }

.matrice th,
.matrice td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--acier-100);
}

.matrice thead th {
    background: var(--acier-50);
    border-bottom: 1px solid var(--acier-200);
}

.matrice thead th:first-child,
.matrice tbody th {
    text-align: left;
    font-weight: 700;
    color: var(--bleu-900);
}

.matrice tbody th { font-size: .95rem; }
.matrice tbody tr:last-child th,
.matrice tbody tr:last-child td { border-bottom: 0; }
.matrice tbody tr:hover { background: var(--acier-50); }

.matrice__lettre {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bleu-700);
}

.matrice__nom {
    display: block;
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acier-500);
}

/* Le niveau se lit à la forme autant qu'à la couleur : losange plein
   pour la priorité, cercle creux pour le reste. */
.jauge { display: inline-block; vertical-align: middle; }

.jauge--haute {
    width: 13px;
    height: 13px;
    background: var(--cyan-dark);
    transform: rotate(45deg);
}

.jauge--moyenne {
    width: 10px;
    height: 10px;
    border: 2px solid var(--acier-300);
    border-radius: 50%;
}

.matrice-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 16px 0 0;
    font-size: .88rem;
    color: var(--acier-600);
}

.matrice-legende span { display: inline-flex; align-items: center; gap: 9px; }

/* Études de cas */

.case {
    padding: 34px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
    margin-bottom: 26px;
}

.case__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--acier-100);
}

.case__client { margin: 0; font-size: 1.15rem; }

.case__sector {
    padding: 4px 12px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cyan-dark);
    background: rgba(0, 179, 200, .1);
    border-radius: 999px;
}

.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.case__label { margin-bottom: .5em; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--acier-500); }
.case__grid p { font-size: .94rem; margin: 0; }
.case__results { margin: 0; padding: 0; list-style: none; }

.case__results li {
    position: relative;
    padding-left: 26px;
    margin-bottom: .55em;
    font-size: .94rem;
    font-weight: 600;
    color: var(--bleu-800);
}

.case__results li::before {
    content: "";
    position: absolute;
    left: 2px; top: .45em;
    width: 12px; height: 7px;
    border-left: 2px solid var(--vert);
    border-bottom: 2px solid var(--vert);
    transform: rotate(-45deg);
}

/* --- 9. Architecture ISA-95 ----------------------------------------------
   Accordeon : chaque niveau porte son detail juste en dessous. Ouvrir un
   niveau referme le precedent. Les panneaux sont ouverts dans le HTML et
   replies par isa95.js : sans JavaScript, tout reste lisible.
   -------------------------------------------------------------------------- */

.isa { display: grid; gap: 6px; }

.isa__item { display: grid; }

/* Enchainement d'un niveau au suivant, repris de la pile de l'accueil.
   Deux traits paralleles : a gauche la descente des ordres, a droite la
   remontee des mesures. La legende reprend les memes couleurs. */

.isa__chain {
    position: relative;
    height: 24px;
    width: 14px;
    margin-left: 32px;
}

.isa__chain::before,
.isa__chain::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
}

.isa__chain::before { left: 0;   background: linear-gradient(var(--cyan-dark), rgba(1, 125, 142, .16)); }
.isa__chain::after  { left: 10px; background: linear-gradient(rgba(242, 169, 0, .16), var(--ambre)); }

.isa__chain-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.isa__chain-dot--down { left: -3px; background: var(--cyan-dark);  animation: isa-flow-down 2.6s linear infinite; }
.isa__chain-dot--up   { left: 7px;  background: var(--ambre); animation: isa-flow-up 2.6s linear infinite; }

@keyframes isa-flow-down {
    0%   { top: -4px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 22px; opacity: 0; }
}

@keyframes isa-flow-up {
    0%   { top: 22px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: -4px; opacity: 0; }
}

.isa__level {
    display: grid;
    grid-template-columns: 92px 1fr auto auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    font: inherit;
    text-align: left;
    color: var(--acier-700);
    background: var(--blanc);
    border: 1px solid var(--acier-200);
    border-left: 4px solid var(--acier-300);
    border-radius: var(--rayon);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.isa__level:hover { border-color: var(--acier-300); box-shadow: var(--ombre-sm); }

/* Niveau ouvert : il se soude au panneau qui le suit. */
.isa__level[aria-expanded="true"] {
    border-color: var(--cyan-dark);
    border-left-color: var(--cyan-dark);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.isa__code {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acier-500);
}

.isa__level[aria-expanded="true"] .isa__code { color: var(--cyan-dark); }

.isa__name { font-weight: 700; color: var(--bleu-900); font-size: .98rem; }
.isa__systems { display: block; font-size: .8rem; font-weight: 400; color: var(--acier-500); }

.isa__level .icon { color: var(--acier-300); }
.isa__level[aria-expanded="true"] .icon { color: var(--cyan-dark); }

.isa__chevron { transition: transform var(--transition); }
.isa__level[aria-expanded="true"] .isa__chevron { transform: rotate(180deg); }

/* Panneau de detail, replie sous son niveau */

.isa__detail {
    padding: 24px 28px 26px;
    color: var(--acier-200);
    background: var(--bleu-900);
    border-radius: 0 0 var(--rayon) var(--rayon);
}

.isa__detail[hidden] { display: none; }

.isa__detail-desc { margin: 0; color: var(--acier-300); font-size: .95rem; max-width: 76ch; }

.isa__facts { margin: 20px 0 0; }

.isa__facts > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 10px 0;
    font-size: .88rem;
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.isa__facts dt {
    margin: 0;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cyan);
}

.isa__facts dd { margin: 0; color: var(--acier-200); }

@media (prefers-reduced-motion: no-preference) {
    .isa__detail { animation: isa-reveal 220ms ease; }
}

@keyframes isa-reveal {
    from { opacity: 0; transform: translateY(-6px); }
}

/* Sens de circulation des donnees */

.isa__hint { margin: 16px 0 0; font-size: .82rem; color: var(--acier-500); }

.isa__flows {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.isa__flow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    margin: 0;
    padding: 14px 16px;
    font-size: .86rem;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon);
}

.isa__flow .icon { color: var(--cyan-dark); margin-top: 2px; }

/* Chaque sens porte la couleur de son trait dans l'enchainement. */
.isa__flow--down { border-left: 3px solid var(--cyan-dark); }
.isa__flow--up   { border-left: 3px solid var(--ambre); }
.isa__flow--up .icon { color: var(--ambre); }

/* --- 10. Blog ------------------------------------------------------------ */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }

.filters__link {
    padding: 7px 15px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--acier-600);
    text-decoration: none;
    background: var(--acier-50);
    border: 1px solid var(--acier-100);
    border-radius: 999px;
    transition: background var(--transition), color var(--transition);
}

.filters__link:hover { background: var(--acier-100); color: var(--bleu-700); }
.filters__link.is-active { background: var(--bleu-800); border-color: var(--bleu-800); color: var(--blanc); }

.post { display: flex; flex-direction: column; }
.post__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: .78rem; color: var(--acier-500); }
.post__cat { font-weight: 700; color: var(--cyan-dark); text-transform: uppercase; letter-spacing: .07em; }
.post__title { font-size: 1.1rem; margin-bottom: .45em; }
.post__title a { color: var(--bleu-900); text-decoration: none; }
.post__title a:hover { color: var(--bleu-600); }
.post__excerpt { margin: 0 0 18px; font-size: .94rem; color: var(--acier-600); }

.article { max-width: 72ch; margin: 0 auto; }
.article h2 { margin-top: 1.8em; font-size: 1.4rem; }
.article h3 { margin-top: 1.5em; }
.article p, .article li { font-size: 1.02rem; }
.article blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--cyan-dark);
    color: var(--bleu-800);
    font-size: 1.05rem;
}

.article__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-weight: 600; text-decoration: none; }

/* --- 11. Formulaires ----------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: start; }

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field__label { font-size: .85rem; font-weight: 700; color: var(--bleu-800); }
.field__label .req { color: var(--rouge); }

.field__input,
.field__select,
.field__textarea {
    padding: 12px 14px;
    font: inherit;
    font-size: .96rem;
    color: var(--bleu-900);
    background: var(--blanc);
    border: 1px solid var(--acier-200);
    border-radius: var(--rayon);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    border-color: var(--cyan-dark);
    box-shadow: 0 0 0 3px rgba(0, 179, 200, .16);
    outline: none;
}

.field__textarea { min-height: 150px; resize: vertical; }

.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea { border-color: var(--rouge); }

.field__error { font-size: .83rem; color: var(--rouge); }

.field--check { flex-direction: row; align-items: flex-start; gap: 11px; }
.field--check input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--cyan-dark); }
.field--check label { font-size: .88rem; color: var(--acier-600); font-weight: 400; }

/* Piège à robots : invisible pour les humains, rempli par les automates. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.info-card {
    padding: 28px;
    background: var(--acier-50);
    border-radius: var(--rayon-lg);
}

.info-card + .info-card { margin-top: 20px; }
.info-card h2 { font-size: 1.05rem; margin-bottom: .7em; }
.info-card__list { margin: 0; padding: 0; list-style: none; }

.info-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: .7em;
    font-size: .94rem;
}

.info-card__list .icon { color: var(--cyan-dark); margin-top: 3px; }
.info-card__list a { color: var(--bleu-700); text-decoration: none; }
.info-card__list a:hover { text-decoration: underline; }

/* --- 12. Pied de page ---------------------------------------------------- */

.footer { background: var(--bleu-900); color: var(--acier-300); font-size: .92rem; }

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding-top: 62px;
    padding-bottom: 48px;
}

.footer__col--wide { max-width: 38ch; }
.footer__logo { display: block; width: auto; height: 42px; margin-bottom: 18px; }
.footer__about { font-size: .92rem; color: var(--acier-300); }
.footer__standards { margin: 18px 0 0; }
.footer__standards .tag { color: var(--acier-300); border-color: rgba(255, 255, 255, .2); }

.footer__title {
    margin-bottom: 1em;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blanc);
}

.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: .55em; }

.footer__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--acier-300);
    text-decoration: none;
}

.footer__list a:hover { color: var(--cyan); }
.footer__address { margin-bottom: 1em; color: var(--acier-300); }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }

.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: .84rem;
    color: var(--acier-500);
}

.footer__bottom-inner a { color: var(--acier-300); text-decoration: none; }
.footer__bottom-inner a:hover { color: var(--cyan); }

/* --- Adaptation aux écrans réduits --------------------------------------- */

/* Sous 1240 px, le bouton quitte la barre : le menu occupe la ligne. */
@media (max-width: 1240px) {
    .mainnav__cta { display: none; }
}

@media (max-width: 1080px) {
    .hero__inner { grid-template-columns: 1fr; gap: 44px; }
    .service__body { grid-template-columns: 1fr; gap: 28px; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
    .burger { display: inline-flex; }

    .mainnav {
        position: fixed;
        inset: 114px 0 0;
        z-index: 40;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 20px 24px 40px;
        overflow-y: auto;
        background: var(--blanc);
        border-top: 1px solid var(--acier-100);
    }

    .mainnav.is-open { display: flex; }

    .mainnav__list { flex-direction: column; gap: 0; }

    .mainnav__link {
        padding: 14px 4px;
        font-size: 1rem;
        border-bottom: 1px solid var(--acier-100);
        border-radius: 0;
    }

    .mainnav__link.is-active { box-shadow: inset 3px 0 0 var(--cyan-dark); padding-left: 14px; }
    .mainnav__cta { margin-top: 22px; justify-content: center; }

    body.nav-open { overflow: hidden; }
}

@media (max-width: 760px) {
    /* Marges reduites : chaque point gagne profite au schema. */
    .figure { padding: 16px 12px 14px; }

    /* La matrice se deplie en fiches plutot que de defiler : chaque
       secteur devient un bloc, chaque pilier une ligne etiquetee. */
    .matrice-cadre { background: none; border: 0; border-radius: 0; }
    .matrice thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .matrice, .matrice tbody, .matrice tr, .matrice th, .matrice td { display: block; }

    .matrice tr {
        margin-bottom: 12px;
        padding: 14px 16px;
        background: var(--blanc);
        border: 1px solid var(--acier-100);
        border-radius: var(--rayon-lg);
    }

    .matrice tbody th { padding: 0 0 10px; border-bottom: 1px solid var(--acier-100); }

    .matrice td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 0;
        border-bottom: 1px solid var(--acier-100);
    }

    .matrice td:last-child { border-bottom: 0; }
    .matrice td::before { content: attr(data-label); font-size: .86rem; color: var(--acier-600); }
    .matrice tbody tr:hover { background: var(--blanc); }

    .section { padding: 60px 0; }
    .hero { padding: 62px 0 70px; }
    .topbar__inner { flex-wrap: wrap; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
    .topbar__item span { display: none; }
    .step { grid-template-columns: 54px 1fr; gap: 16px; }
    .case { padding: 24px; }
    .isa__level { grid-template-columns: 70px 1fr auto auto; gap: 12px; padding: 14px 16px; }
    .isa__detail { padding: 20px; }
    .isa__facts > div { grid-template-columns: 1fr; gap: 4px; }
    .isa__flows { flex-direction: column; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* --- 13. Espace prive ----------------------------------------------------
   Connexion et tableau de bord. Une barre sobre, volontairement distincte
   du site public, qui reutilise les memes jetons de couleur. Les boutons,
   champs, panneaux, alertes et etiquettes viennent des sections ci-dessus.
   -------------------------------------------------------------------------- */

.container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.main { padding-top: 28px; padding-bottom: 48px; }

.btn--primary { background: var(--bleu-700); color: var(--blanc); }

.alert__list { margin: 0; padding-left: 18px; }

/* Barre superieure */

.site-header {
    background: var(--bleu-900);
    color: var(--blanc);
    box-shadow: var(--ombre-sm);
}

.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 62px; }

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }

.brand__logo { display: block; width: auto; height: 34px; }

.nav { display: flex; gap: 4px; margin-left: auto; }

.nav__link {
    padding: 7px 13px;
    font-size: .9rem;
    color: var(--acier-300);
    text-decoration: none;
    border-radius: var(--rayon);
}

.nav__link:hover     { background: rgba(255, 255, 255, .1);  color: var(--blanc); }
.nav__link.is-active { background: rgba(255, 255, 255, .16); color: var(--blanc); }

.user-menu { display: flex; align-items: center; gap: 12px; }
.user-menu__name { font-size: .88rem; color: var(--acier-300); }

.site-footer {
    padding: 18px 0;
    font-size: .84rem;
    color: var(--acier-500);
    background: var(--blanc);
    border-top: 1px solid var(--acier-100);
}

.site-footer__inner { display: flex; align-items: center; gap: 12px; }

/* Ecran de connexion */

.auth {
    max-width: 400px;
    margin: 48px auto;
    padding: 34px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre);
}

.auth__title { margin-bottom: .25em; }
.auth__intro { margin-bottom: 26px; color: var(--acier-500); font-size: .92rem; }

/* Indicateurs du tableau de bord */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat {
    padding: 20px 22px;
    background: var(--blanc);
    border: 1px solid var(--acier-100);
    border-radius: var(--rayon-lg);
}

.stat__value { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--bleu-700); }
.stat__label { margin: 4px 0 0; font-size: .85rem; color: var(--acier-500); }
.stat--alert .stat__value { color: var(--rouge); }

/* Tableau de donnees */

.table { width: 100%; border-collapse: collapse; }

.table th,
.table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--acier-100); }

.table th {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acier-500);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table__num { text-align: right; }
.table__ref { font-family: Consolas, "Courier New", monospace; }

@media (max-width: 760px) {
    .site-header__inner { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
    .nav { margin-left: 0; width: 100%; }
    .table { display: block; overflow-x: auto; }
}

/* --- Impression ---------------------------------------------------------- */

@media print {
    .topbar, .masthead, .cta-band, .footer, .skip-link, .filters { display: none; }
    body { color: #000; font-size: 11pt; }
    .section { padding: 12pt 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}