/*
Theme Name: PME Conseil
Theme URI: https://www.pme-conseil.be/
Description: Thème sur mesure de PME Conseil — conseil aux dirigeants de PME
  belges. Sans constructeur de page, sans dépendance externe, polices servies
  en local. Palette « encre marine » validée par le client.
Author: NTIC Solution
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: pme-conseil
License: Tous droits réservés
*/

/* ==========================================================================
   Polices servies depuis notre propre serveur.

   Elles NE sont PAS chargées depuis Google : appeler fonts.googleapis.com
   transmet l'adresse IP de chaque visiteur aux États-Unis sans consentement,
   ce que le tribunal de Munich a jugé contraire au RGPD en janvier 2022.
   Les fichiers ci-dessous sont les mêmes polices, sous licence libre
   (SIL Open Font License), hébergées avec le site.

   Fichiers variables : une seule requête couvre toutes les graisses.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2-variations');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-latin.woff2') format('woff2-variations');
  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: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-latin-ext.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-latin-italic.woff2') format('woff2-variations');
  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: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-latin-ext-italic.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   PME Conseil - La passion des PME
   Feuille de style unique. Aucun build, aucune dépendance.
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */

:root {
  /* Couleurs — palette « encre marine », retenue par le client parmi trois.

     ATTENTION : --ambre a été assombri de #B87A2B à #96601F. L'original
     échouait au contraste WCAG AA (3,59 sur blanc pour un seuil de 4,5).
     Ne pas revenir en arrière : c'est la couleur des repères de la frise PRJ.

     Variantes écartées, conservées pour mémoire :
     B, encre chaude  --encre #241F1C  --encre-clair #3D3531  --ardoise #6B6159
                      --ardoise-pale #A39A91  --papier #F8F6F2  --trait #E5E0D8
                      --trait-fort #CBC4B8  --ambre #9E4F2A  --ambre-pale #F6EBE4
     C, vert          --encre #16302A  --encre-clair #2A4A41  --ardoise #576B64
                      --ardoise-pale #93A29B  --papier #F7F7F4  --trait #DFE1DB
                      --trait-fort #C3C7BF  --continuite #8E6129  --continuite-pale #F3ECE0
                      --ambre #A24B37  --ambre-pale #F5E8E4                        */
  --encre:        #14243A;
  --encre-clair:  #24374F;
  --ardoise:      #4A5C73;
  --ardoise-pale: #8895A6;
  /* Variante lisible d'--ardoise-pale, pour les textes.

     --ardoise-pale ne donne que 2,87 de contraste sur --papier, tres en
     dessous du seuil WCAG AA de 4,5 : correct pour une fleche decorative,
     insuffisant des qu'il s'agit de mots a lire. Meme teinte, meme
     saturation, clarte abaissee : 4,68 sur papier et 4,97 sur blanc.

     Meme demarche que pour --ambre, et meme consigne : ne pas revenir a la
     valeur claire pour les textes. Les lecteurs de ce site ont souvent plus
     de cinquante ans et lisent depuis un telephone. */
  --ardoise-lisible: #637184;
  --papier:       #F7F8FA;
  --blanc:        #FFFFFF;
  --trait:        #DDE2E9;
  --trait-fort:   #C3CBD6;
  --continuite:   #2E6B54;
  --continuite-pale: #E6EFEA;
  --ambre:        #96601F;
  --ambre-pale:   #F7EEE0;

  /* Typo */
  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t--1: 0.8125rem;
  --t-0:  1rem;
  --t-1:  1.1875rem;
  --t-2:  1.4375rem;
  --t-3:  1.8125rem;
  --t-4:  2.375rem;
  --t-5:  clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  /* Rythme */
  --u:  0.5rem;
  --u2: 1rem;
  --u3: 1.5rem;
  --u4: 2rem;
  --u6: 3rem;
  --u8: 4rem;
  --u12: 6rem;

  --largeur: 1180px;
  --lecture: 40rem;
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 var(--u2);
  text-wrap: balance;
}

p { margin: 0 0 var(--u3); }
p:last-child { margin-bottom: 0; }

a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--continuite); }

:focus-visible {
  outline: 2px solid var(--continuite);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--u3);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: var(--blanc);
  padding: var(--u2);
  z-index: 100;
}
.saut-contenu:focus { left: var(--u2); top: var(--u2); }

/* Étiquette de section : reprend le vocabulaire d'un dossier annoté */
.etiquette {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  display: block;
  margin-bottom: var(--u2);
}
.etiquette--continuite { color: var(--continuite); }

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

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
  position: sticky;
  top: 0;
  z-index: 50;
}

.entete__grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u3);
  padding-block: var(--u2);
}

.marque { text-decoration: none; display: block; }
/* Le nom fait onze caractères : on baisse le corps et on crée la structure
   par le contraste de graisse plutôt que par un signe graphique. */
.marque__nom {
  font-family: var(--titre);
  font-size: 1.4375rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1;
  display: block;
  white-space: nowrap;
}
.marque__nom strong { font-weight: 700; }
.marque__slogan {
  font-family: var(--titre);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--continuite);
  display: block;
  margin-top: 0.35rem;
}

.nav { display: flex; align-items: center; gap: var(--u3); }

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--u3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ardoise);
  text-decoration: none;
  padding-block: var(--u);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }
.nav__lien[aria-current="page"] { color: var(--encre); border-bottom-color: var(--continuite); }

.langues {
  display: flex;
  gap: 0.375rem;
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-left: 1px solid var(--trait);
  padding-left: var(--u3);
}
.langues a { color: var(--ardoise-lisible); text-decoration: none; }
.langues a:hover { color: var(--encre); }
.langues [aria-current="true"] { color: var(--encre); }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--trait-fort);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
}

@media (max-width: 860px) {
  .burger { display: block; }
  .marque__nom { font-size: 1.1875rem; letter-spacing: 0.07em; }
  .marque__slogan { font-size: 0.625rem; letter-spacing: 0.15em; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--u2) var(--u3) var(--u3);
    box-shadow: 0 12px 24px -18px rgba(20, 36, 58, 0.4);
  }
  .nav[data-ouvert="true"] { display: flex; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: var(--t-1);
  }
  .nav__lien[aria-current="page"] { border-bottom-color: var(--continuite); }
  .langues { border-left: 0; padding-left: 0; padding-top: var(--u3); }
}

/* --- 4. Hero ------------------------------------------------------------ */

.hero {
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
  padding-block: var(--u8) var(--u6);
}

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--u8);
  align-items: end;
}

.hero__titre {
  font-size: var(--t-5);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--u3);
}
.hero__titre em {
  font-style: normal;
  color: var(--continuite);
}

.hero__chapo {
  font-size: var(--t-1);
  color: var(--encre-clair);
  max-width: 34rem;
  margin-bottom: var(--u4);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--u2); }

/* Barre de proportion : 99,8 % de PME. L'échelle est réelle, c'est l'argument. */
.proportion { border-top: 2px solid var(--encre); padding-top: var(--u2); }

.proportion__barre {
  display: flex;
  height: 68px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--trait);
}
.proportion__pme {
  background: var(--encre);
  width: 0;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.proportion__grandes {
  background: var(--ambre);
  flex: 1 1 auto;
  min-width: 3px;
}
.proportion[data-anime="true"] .proportion__pme { width: 99.8%; }

.proportion__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--u2);
  margin-top: var(--u2);
  font-family: var(--titre);
  font-size: var(--t--1);
  line-height: 1.4;
}
.proportion__legende strong {
  display: block;
  font-size: var(--t-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.proportion__droite { text-align: right; color: var(--ardoise); }
.proportion__droite strong { color: var(--ambre); }

.proportion__source {
  margin-top: var(--u3);
  font-family: var(--titre);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ardoise-lisible);
}

@media (max-width: 900px) {
  .hero { padding-block: var(--u6) var(--u4); }
  .hero__grille { grid-template-columns: 1fr; gap: var(--u6); }
}

/* --- 5. Boutons --------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.bouton--plein {
  background: var(--encre);
  color: var(--blanc);
}
.bouton--plein:hover { background: var(--continuite); color: var(--blanc); }

.bouton--trait {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait-fort);
}
.bouton--trait:hover { border-color: var(--encre); color: var(--encre); background: var(--papier); }

/* --- 6. Sections génériques --------------------------------------------- */

.bloc { padding-block: var(--u12); }
.bloc--blanc { background: var(--blanc); border-block: 1px solid var(--trait); }
.bloc--serre { padding-block: var(--u8); }

.bloc__entete { max-width: 46rem; margin-bottom: var(--u6); }
.bloc__titre { font-size: var(--t-4); }

.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--u8);
}
@media (max-width: 860px) {
  .bloc { padding-block: var(--u8); }
  .colonnes { grid-template-columns: 1fr; gap: var(--u4); }
}

.mesure { max-width: var(--lecture); }

/* Liste des domaines d'intervention */
.domaines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }

.domaine { border-bottom: 1px solid var(--trait); }
.domaine__lien {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--u2);
  align-items: baseline;
  padding-block: var(--u3);
  text-decoration: none;
  color: var(--encre);
}
.domaine__lien:hover { color: var(--continuite); }
.domaine__lien:hover .domaine__fleche { transform: translateX(4px); }

.domaine__cle {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ardoise-lisible);
}
.domaine__nom { font-family: var(--titre); font-size: var(--t-2); font-weight: 650; letter-spacing: -0.015em; }
.domaine__detail {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-0);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ardoise);
  margin-top: 0.35rem;
  max-width: 34rem;
}
.domaine__fleche {
  font-family: var(--titre);
  color: var(--ardoise-pale);
  transition: transform 0.15s;
}

/* Encadré d'appel */
.appel {
  background: var(--encre);
  color: var(--blanc);
  padding: var(--u8) 0;
}
.appel__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--u6);
  align-items: center;
}
.appel h2 { color: var(--blanc); font-size: var(--t-3); margin-bottom: var(--u2); }
.appel p { color: #C7D2E0; max-width: 38rem; }
.appel .bouton--plein { background: var(--blanc); color: var(--encre); }
.appel .bouton--plein:hover { background: var(--continuite); color: var(--blanc); }
@media (max-width: 760px) {
  .appel__grille { grid-template-columns: 1fr; gap: var(--u4); }
}

/* --- 7. Frise du sursis (élément signature) ------------------------------ */

.frise { background: var(--blanc); border-block: 1px solid var(--trait); padding-block: var(--u8); }

.frise__entete { max-width: 46rem; margin-bottom: var(--u6); }

.frise__piste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 3px;
  overflow: hidden;
}

/* Rail de temps : continu d'une phase à l'autre, il change de couleur au dépôt.
   C'est ce qui distingue une frise de quatre cartes posées côte à côte. */
.phase {
  background: var(--blanc);
  padding: var(--u3);
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--trait-fort);
}
.phase--depot { background: var(--ambre-pale); border-top-color: var(--ambre); }
.phase--sursis { background: var(--continuite-pale); border-top-color: var(--continuite); }

.phase__jour {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
  color: var(--ardoise);
  padding-bottom: var(--u);
  border-bottom: 2px solid var(--trait-fort);
  margin-bottom: var(--u2);
}
.phase--depot .phase__jour { color: var(--ambre); border-bottom-color: var(--ambre); }
.phase--sursis .phase__jour { color: var(--continuite); border-bottom-color: var(--continuite); }

.phase__nom {
  font-family: var(--titre);
  font-size: var(--t-1);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: var(--u);
}
.phase__quoi { font-size: 0.9375rem; color: var(--ardoise); margin-bottom: var(--u3); }

.phase__articles { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 0.625rem; }
.phase__articles a {
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--encre);
  text-decoration: none;
  display: block;
  padding-left: 0.9rem;
  position: relative;
}
.phase__articles a::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ardoise-pale);
}
.phase__articles a:hover { color: var(--continuite); text-decoration: underline; }
.phase__articles a:hover::before { color: var(--continuite); }

@media (max-width: 1000px) {
  .frise__piste { grid-template-columns: 1fr; }
  .phase {
    padding: var(--u3) var(--u3) var(--u4);
    border-top: 0;
    border-left: 5px solid var(--trait-fort);
  }
  .phase--depot { border-left-color: var(--ambre); }
  .phase--sursis { border-left-color: var(--continuite); }
}

/* --- 8. Articles -------------------------------------------------------- */

.article { padding-block: var(--u8) var(--u12); }

.article__grille {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, var(--lecture));
  gap: var(--u8);
  justify-content: center;
}

.article__meta { font-family: var(--titre); font-size: 0.875rem; color: var(--ardoise); }
.article__meta dt {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise-lisible);
  margin-bottom: 0.25rem;
}
.article__meta dd { margin: 0 0 var(--u3); }
.article__meta-colle { position: sticky; top: 6.5rem; }

.article__titre { font-size: var(--t-4); margin-bottom: var(--u3); }
.article__chapo {
  font-size: var(--t-1);
  color: var(--encre-clair);
  border-left: 3px solid var(--continuite);
  padding-left: var(--u3);
  margin-bottom: var(--u6);
}
.article__corps h2 { font-size: var(--t-2); margin-top: var(--u6); margin-bottom: var(--u2); }
.article__corps h2:first-child { margin-top: 0; }
.article__corps ul { padding-left: 1.1rem; margin: 0 0 var(--u3); }
.article__corps li { margin-bottom: 0.6rem; }
.article__corps strong { font-weight: 600; }

.signature {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ardoise);
  border-top: 1px solid var(--trait);
  padding-top: var(--u3);
  margin-top: var(--u6);
}

.fil { font-family: var(--titre); font-size: var(--t--1); color: var(--ardoise); margin-bottom: var(--u3); }
.fil a { color: var(--ardoise); }

.suite {
  margin-top: var(--u8);
  padding: var(--u4);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--continuite);
  border-radius: 3px;
}
.suite h2 { font-size: var(--t-1); margin-bottom: var(--u2); }
.suite p { font-size: 1rem; margin-bottom: var(--u3); }

@media (max-width: 900px) {
  .article__grille { grid-template-columns: 1fr; gap: var(--u4); }
  .article__meta { display: flex; flex-wrap: wrap; gap: 0 var(--u4); }
  .article__meta-colle { position: static; }
}

/* --- 9. Formulaire ------------------------------------------------------ */

.formulaire { display: grid; gap: var(--u3); max-width: 34rem; }

.champ { display: grid; gap: 0.4rem; }
.champ label {
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--encre);
}
.champ__aide { font-family: var(--titre); font-size: var(--t--1); color: var(--ardoise); font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: 3px;
  padding: 0.75rem 0.875rem;
  width: 100%;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--continuite);
  outline: 2px solid var(--continuite-pale);
  outline-offset: 0;
}
.champ[data-erreur="true"] input,
.champ[data-erreur="true"] textarea { border-color: var(--ambre); }

.champ__erreur {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ambre);
}
.champ__erreur:empty { display: none; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u3); }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }

.piege { position: absolute; left: -9999px; opacity: 0; height: 0; }

.message {
  font-family: var(--titre);
  font-size: 0.9375rem;
  padding: var(--u2) var(--u3);
  border-radius: 3px;
  border-left: 3px solid;
}
.message[hidden] { display: none; }
.message--ok { background: var(--continuite-pale); border-color: var(--continuite); color: #1E4A3A; }
.message--ko { background: var(--ambre-pale); border-color: var(--ambre); color: #7A4E14; }

.coordonnees { font-family: var(--titre); font-size: 0.9375rem; line-height: 1.8; }
.coordonnees dt {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise-lisible);
  margin-top: var(--u3);
}
.coordonnees dd { margin: 0; }

/* --- 10. Pied ----------------------------------------------------------- */

.pied {
  background: var(--encre);
  color: #A8B6C7;
  padding-block: var(--u8) var(--u4);
  font-family: var(--titre);
  font-size: 0.9375rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: var(--u6);
  padding-bottom: var(--u6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.pied h3 {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise-lisible);
  margin-bottom: var(--u2);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pied a { color: #D5DEE8; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied .marque__nom { color: var(--blanc); font-size: 1.3125rem; }
.pied__bas {
  padding-top: var(--u3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--u2) var(--u4);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #7C8DA1;
}
@media (max-width: 760px) {
  .pied__grille { grid-template-columns: 1fr; gap: var(--u4); }
}

/* --- 11. Apparition au défilement --------------------------------------- */

.apparait { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.apparait[data-vu="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; }
  .proportion__pme { width: 99.8%; transition: none; }
}

/* --- 12. Page Compétences ------------------------------------------------ */

.metier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--u6);
  padding-block: var(--u6);
  border-top: 1px solid var(--trait);
}
.metier:first-of-type { border-top: 2px solid var(--encre); }

.metier__cle {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ardoise-lisible);
  display: block;
  margin-bottom: var(--u);
}
.metier__titre { font-size: var(--t-3); margin-bottom: var(--u2); }
.metier__intro { color: var(--encre-clair); max-width: 32rem; }

.prestations {
  list-style: none;
  margin: 0 0 var(--u3);
  padding: 0;
  columns: 2;
  column-gap: var(--u4);
  font-family: var(--titre);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.prestations li {
  break-inside: avoid;
  padding: 0.4rem 0 0.4rem 1rem;
  position: relative;
  color: var(--encre-clair);
}
.prestations li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95em;
  width: 6px; height: 1px;
  background: var(--continuite);
}

@media (max-width: 860px) {
  .metier { grid-template-columns: 1fr; gap: var(--u3); padding-block: var(--u4); }
  .prestations { columns: 1; }
}

/* --- 13. Les deux voies (hub Cession) ------------------------------------ */

.socle {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 5px solid var(--encre);
  border-radius: 3px;
  padding: var(--u4);
  margin-bottom: var(--u3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--u4);
  align-items: center;
}
.socle h3 { font-size: var(--t-2); margin-bottom: var(--u); }
.socle p { color: var(--ardoise); max-width: 42rem; font-size: 1rem; }

.voies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u3);
}

.voie {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 5px solid var(--continuite);
  border-radius: 3px;
  padding: var(--u4);
  display: flex;
  flex-direction: column;
}
.voie--reprendre { border-top-color: var(--ambre); }

.voie__cap {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--continuite);
  margin-bottom: var(--u);
}
.voie--reprendre .voie__cap { color: var(--ambre); }

.voie__titre { font-size: var(--t-2); margin-bottom: var(--u2); }
.voie__intro { color: var(--ardoise); font-size: 1rem; margin-bottom: var(--u3); }

.voie__liste { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--trait); }
.voie__liste li { border-bottom: 1px solid var(--trait); }
.voie__liste a {
  display: block;
  padding: var(--u2) 0;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--encre);
  text-decoration: none;
}
.voie__liste a:hover { color: var(--continuite); }
.voie__liste small {
  display: block;
  font-family: var(--texte);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ardoise);
  margin-top: 0.25rem;
}

@media (max-width: 900px) {
  .voies { grid-template-columns: 1fr; }
  .socle { grid-template-columns: 1fr; gap: var(--u3); }
}

/* --- 14. Menu déroulant des domaines ------------------------------------- */

.nav__deroulant { position: relative; }

.nav__bouton {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ardoise);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--u) 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.nav__bouton:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }
.nav__bouton[aria-expanded="true"],
.nav__bouton[data-actif="true"] { color: var(--encre); border-bottom-color: var(--continuite); }
.nav__chevron { font-size: 0.7em; transition: transform 0.15s; }
.nav__bouton[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__sous {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  min-width: 17rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--continuite);
  border-radius: 3px;
  box-shadow: 0 18px 32px -22px rgba(20, 36, 58, 0.5);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  display: none;
  z-index: 60;
}
.nav__deroulant[data-ouvert="true"] .nav__sous { display: block; }

.nav__sous a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  line-height: 1.35;
}
.nav__sous a:hover { background: var(--papier); color: var(--continuite); }
.nav__sous a small {
  display: block;
  font-family: var(--texte);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ardoise);
  margin-top: 0.1rem;
}
.nav__sous-tout {
  border-top: 1px solid var(--trait);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}
.nav__sous-tout a { color: var(--ardoise); font-size: 0.875rem; }

@media (max-width: 860px) {
  .nav__deroulant { position: static; }
  .nav__bouton {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: var(--t-1);
  }
  .nav__sous {
    position: static;
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--papier);
    padding: 0.25rem 0;
  }
  .nav__sous a { padding: 0.7rem 0 0.7rem 1rem; border-bottom: 1px solid var(--trait); }
  .nav__sous-tout { border-top: 0; margin: 0; padding: 0; }
  .nav__chevron { display: none; }
}

/* --- 15. Images et listes de suite ---------------------------------------- */

.illustration-bloc { margin: var(--u4) 0; }
.illustration-bloc img,
img.illustration {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  border: 1px solid var(--trait);
}
.illustration-bloc figcaption {
  font-family: var(--titre);
  font-size: var(--t--1);
  color: var(--ardoise);
  margin-top: var(--u);
  line-height: 1.5;
}

.liste-suite { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.liste-suite a {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  padding-left: 0.95rem;
  position: relative;
  display: block;
  line-height: 1.4;
}
.liste-suite a::before { content: "\2192"; position: absolute; left: 0; color: var(--ardoise-pale); }
.liste-suite a:hover { color: var(--continuite); text-decoration: underline; }
.liste-suite a:hover::before { color: var(--continuite); }

/* --- 16. Raccords du formulaire de contact -------------------------------- */
/* L'extension pose ses propres classes pour les erreurs et le message de
   retour. On les ramène à l'apparence prévue par la maquette plutôt que de
   réécrire le formulaire. */

.formulaire .wpcf7-form-control-wrap { display: block; }

.wpcf7-not-valid-tip {
  font-family: var(--titre);
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ambre);
  margin-top: 0.35rem;
  display: block;
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--ambre); }

.wpcf7-response-output {
  font-family: var(--titre);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--trait-fort);
  border-left-width: 3px;
  border-radius: 3px;
  background: var(--blanc);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--continuite);
  background: var(--continuite-pale);
  color: var(--encre);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--ambre);
  background: var(--ambre-pale);
  color: var(--encre);
}

.formulaire__note {
  font-family: var(--titre);
  font-size: var(--t--1);
  line-height: 1.5;
  color: var(--ardoise);
  margin: 0;
}