/* =========================================================================
   SANKI PRESTIGE SARL , Traduction · Interprétation · Transcription
   Direction artistique : « la page bilingue »
   Encre + blanc + bleu Sanki, l'argent des flèches du logo pour les langues nationales.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  /* Encre , le fond dominant */
  --encre:#0D1726;
  --encre-2:#132238;
  --encre-3:#1B2F49;

  /* Bleu du logo , l'accent vivant */
  --sanki:#1B62D6;
  --sanki-clair:#5FA0FF;
  --sanki-sombre:#0F3F92;

  /* Argent des flèches du logo , code couleur des langues nationales */
  --argent:#B8C4D0;   /* sur fond sombre */
  --acier:#5F7488;    /* sur fond clair, pour rester lisible */
  --ocre:var(--argent);

  /* Blancs , l'en-tête et les surfaces claires */
  --papier:#FFFFFF;
  --papier-2:#F2F6FA;

  /* Neutres clairs */
  --craie:#F4F7FA;
  --blanc:#FFFFFF;

  /* Texte */
  --texte:#0D1726;
  --texte-2:#42566B;
  --ardoise:#697E93;
  --sur-encre:#E7EDF4;
  --sur-encre-2:#93A7BC;

  /* Filets */
  --filet:rgba(13,23,38,.14);
  --filet-2:rgba(13,23,38,.08);
  --filet-clair:rgba(231,237,244,.16);

  --ombre-s:0 1px 2px rgba(13,23,38,.05), 0 2px 10px rgba(13,23,38,.05);
  --ombre-m:0 2px 6px rgba(13,23,38,.06), 0 18px 40px rgba(13,23,38,.10);

  --wrap:1240px;
  --wrap-narrow:820px;

  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Alias conservés pour les styles en ligne des pages internes */
  --text:var(--texte); --text-2:var(--texte-2); --muted:var(--ardoise);
  --ink-900:var(--encre); --blue-600:var(--sanki-sombre); --teal-500:var(--sanki-sombre);
  --sand-400:var(--ocre); --sand-500:var(--ocre);
  --paper:var(--craie); --paper-2:var(--papier-2);
  --on-dark-2:var(--sur-encre-2); --line:var(--filet);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--texte);
  background:var(--encre);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
svg{display:block}
a{color:var(--sanki-sombre); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{margin:0 0 .48em; font-weight:400; color:var(--texte)}
h1,h2,h3{font-family:var(--display); letter-spacing:-.018em; line-height:1.03}
h1{font-size:clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem)}
h2{font-size:clamp(2rem, 1.35rem + 2.7vw, 3.5rem); line-height:1.06}
h3{font-size:clamp(1.32rem, 1.15rem + .7vw, 1.7rem); line-height:1.14}
h4{font-family:var(--sans); font-size:.95rem; font-weight:650; letter-spacing:.005em; line-height:1.4}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em; padding-left:1.1em}
li{margin-bottom:.4em}
strong{font-weight:640}
em{font-style:italic}
hr{border:0; border-top:1px solid var(--filet); margin:2.6rem 0}
::selection{background:var(--sanki); color:#fff}
:focus-visible{outline:2px solid var(--sanki-clair); outline-offset:3px; border-radius:3px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.skip{position:absolute; left:-9999px; top:0; background:var(--encre); color:#fff; padding:12px 18px; z-index:300}
.skip:focus{left:12px; top:12px}

/* ---------- 3. Éléments d'écriture ---------- */
.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sanki-sombre); margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; flex:none; opacity:.6;
}
.on-encre .eyebrow,.bg-encre .eyebrow,.hero .eyebrow,.page-head .eyebrow{color:var(--sanki-clair)}
.eyebrow-acier{color:var(--argent) !important}

.lead{font-size:clamp(1.06rem, .99rem + .34vw, 1.26rem); line-height:1.58; color:var(--texte-2)}
.bg-encre .lead,.hero .lead,.page-head .lead{color:var(--sur-encre-2)}
.section-head{max-width:800px; margin-bottom:clamp(2.2rem,1.4rem + 2.4vw,3.6rem)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* Le double filet de l'en-tête de lettre , motif récurrent */
.filet-double{border-top:2px solid var(--encre); box-shadow:0 3px 0 -1px var(--sanki)}
.bg-encre .filet-double{border-top-color:var(--sur-encre)}

/* ---------- 4. Sections ---------- */
.sec{padding:clamp(3.8rem, 2.4rem + 4.6vw, 7rem) 0}
.sec-tight{padding:clamp(2.6rem, 2rem + 2.4vw, 4.4rem) 0}
.bg-encre{background:var(--encre); color:var(--sur-encre)}
.bg-encre h1,.bg-encre h2,.bg-encre h3,.bg-encre h4{color:var(--papier-2)}
.bg-encre p{color:var(--sur-encre-2)}
.bg-encre a{color:var(--sanki-clair)}
.bg-encre-2{background:var(--encre-2); color:var(--sur-encre)}
.bg-encre-2 h2,.bg-encre-2 h3,.bg-encre-2 h4{color:var(--papier-2)}
.bg-encre-2 p{color:var(--sur-encre-2)}
.bg-craie{background:var(--craie)}
.bg-papier{background:var(--craie)}
.bg-blanc{background:var(--blanc)}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.93rem; font-weight:600; letter-spacing:.004em;
  padding:14px 25px; border:1.5px solid transparent; border-radius:2px;
  cursor:pointer; text-decoration:none !important; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn svg{width:17px; height:17px; flex:none; transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-primaire{background:var(--sanki); color:#fff; box-shadow:0 4px 0 0 var(--sanki-sombre)}
.btn-primaire:hover{background:var(--sanki-clair); color:var(--encre); box-shadow:0 2px 0 0 var(--sanki-sombre); transform:translateY(2px)}
.btn-encre{background:var(--encre); color:var(--papier-2); box-shadow:0 4px 0 0 var(--sanki)}
.btn-encre:hover{background:var(--encre-3); box-shadow:0 2px 0 0 var(--sanki); transform:translateY(2px)}
.btn-clair{background:var(--papier-2); color:var(--encre); box-shadow:0 4px 0 0 var(--sanki)}
.btn-clair:hover{background:#fff; box-shadow:0 2px 0 0 var(--sanki); transform:translateY(2px)}
.btn-ligne{background:transparent; color:var(--encre); border-color:var(--filet)}
.btn-ligne:hover{border-color:var(--encre); background:rgba(13,23,38,.04)}
.btn-ligne-clair{background:transparent; color:var(--papier-2); border-color:var(--filet-clair)}
.btn-ligne-clair:hover{border-color:var(--papier-2); background:rgba(255,255,255,.07)}
.btn-sm{padding:10px 17px; font-size:.85rem}
.btn-row{display:flex; flex-wrap:wrap; gap:13px; align-items:center}

/* ---------- 6. Bandeau supérieur , la ligne de bas de lettre ---------- */
.topbar{background:var(--encre); color:var(--sur-encre-2); font-family:var(--mono); font-size:.71rem; letter-spacing:.05em}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; flex-wrap:wrap}
.topbar a{color:var(--sur-encre-2); text-decoration:none}
.topbar a:hover{color:var(--sanki-clair)}
.topbar-list{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.topbar-item{display:inline-flex; align-items:center; gap:7px}
.topbar-item svg{width:13px; height:13px; opacity:.7; flex:none}
.topbar-tag{color:var(--ocre); text-transform:uppercase; letter-spacing:.16em}
@media (max-width:900px){ .topbar-hide{display:none} }

/* ---------- 7. En-tête , bandeau blanc, filet bleu ---------- */
.site-header{
  position:sticky; top:0; z-index:120;
  background:#fff;
  border-bottom:1px solid var(--filet-2);
  box-shadow:0 2px 0 0 var(--sanki);
  transition:box-shadow .25s;
}
.site-header.scrolled{box-shadow:0 2px 0 0 var(--sanki), 0 10px 28px rgba(13,23,38,.13)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:76px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none !important; flex:none}
.brand img{height:46px; width:46px; display:block; border-radius:9px}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--display); font-size:1.32rem; color:var(--encre); letter-spacing:.005em}
.brand-sub{font-family:var(--mono); font-size:.56rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ardoise); margin-top:5px}
.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-links a{
  display:block; padding:9px 13px; position:relative;
  font-size:.9rem; font-weight:500; color:var(--texte-2); text-decoration:none !important;
  transition:color .16s;
}
.nav-links a:hover{color:var(--encre)}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px;
  background:var(--sanki); transform:scaleX(0); transform-origin:left; transition:transform .24s;
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--encre); font-weight:650}
.nav-links a.active::after{transform:scaleX(1); background:var(--sanki)}
.nav-cta{display:flex; align-items:center; gap:10px; flex:none}
.burger{
  display:none; width:44px; height:44px; border:1.5px solid var(--filet); background:transparent;
  border-radius:2px; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.burger span{display:block; width:19px; height:2px; background:var(--encre); position:relative; transition:.22s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:2px; background:var(--encre); transition:.22s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

@media (max-width:1060px){
  .nav-links{
    position:fixed; inset:0 0 auto 0; top:var(--menu-top,114px);
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--filet-2);
    padding:10px 26px 26px; box-shadow:0 18px 40px rgba(13,23,38,.22);
    max-height:calc(100dvh - var(--menu-top,114px)); overflow-y:auto;
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:15px 2px; font-size:1.05rem; border-bottom:1px solid var(--filet-2)}
  .nav-links a::after{left:2px; right:auto; width:26px; bottom:6px}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .brand img{height:44px}
}
/* Sur mobile, c'est le nom qui accueille le visiteur, pas le seul logo.
   On réduit la marque et la baseline plutôt que de masquer le nom. */
@media (max-width:560px){
  .brand{gap:10px}
  .brand img{height:38px; width:38px; border-radius:8px}
  .brand-name{font-size:1.12rem}
  .brand-sub{font-size:.5rem; letter-spacing:.15em}
}
@media (max-width:400px){
  .brand img{height:34px; width:34px}
  .brand-name{font-size:1rem}
  .brand-sub{display:none}
}

/* ---------- 8. Traitement photographique unifié ---------- */
.ph{position:relative; overflow:hidden; background:var(--encre-2)}
.ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.07); transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .5s}
.ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(190deg, rgba(27,98,214,.30), rgba(13,23,38,.55));
  mix-blend-mode:multiply; transition:opacity .5s;
}
.ph-hover:hover img{transform:scale(1.045); filter:saturate(1) contrast(1.02)}
.ph-hover:hover::after{opacity:.45}
.ph-acier::after{background:linear-gradient(190deg, rgba(95,116,136,.34), rgba(13,23,38,.60))}

/* ---------- 9. Héros ---------- */
.hero{position:relative; background:var(--encre); color:var(--sur-encre); overflow:hidden}
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr; align-items:stretch;
  min-height:clamp(560px, 74vh, 780px);
}
/* Le premier conteneur du héros passe pleine largeur : la photo touche
   le bord de l'écran, le texte reste aligné sur la grille du site. */
.hero > .hero-wrap{
  max-width:none;
  /* 100 % se résout ici sur la largeur réelle, barre de défilement exclue :
     le texte tombe exactement sur la grille du site, la photo file au bord. */
  padding-left:max(26px, calc((100% - var(--wrap))/2 + 26px));
  padding-right:0;
}
.hero-texte{
  padding:clamp(2.8rem,2rem + 3.4vw,5.2rem) clamp(1.6rem,1rem + 2.4vw,3.6rem) clamp(2.8rem,2rem + 3vw,4.4rem) 0;
  display:flex; flex-direction:column; justify-content:center;
}
.hero h1{color:var(--papier-2); margin-bottom:.34em}
.hero h1 em{font-style:italic; color:var(--sanki-clair)}
.hero .lead{max-width:34em; margin-bottom:2rem}
.hero-media{position:relative}
.hero-media .ph{position:absolute; inset:0}
.hero-media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--encre), rgba(13,23,38,0) 34%);
}
.hero-legende{
  position:absolute; left:clamp(1.2rem,2vw,2.4rem); bottom:clamp(1.2rem,2vw,2rem); z-index:3;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(231,237,244,.72); background:rgba(13,23,38,.5); padding:7px 12px;
  border-left:2px solid var(--ocre); backdrop-filter:blur(4px);
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; min-height:0}
  .hero > .hero-wrap{padding-left:0}
  .hero-texte{padding:clamp(2.4rem,2rem + 2vw,3.4rem) 26px 2.6rem}
  .hero-media{height:clamp(260px,46vw,420px)}
  .hero-media::before{background:linear-gradient(0deg, rgba(13,23,38,.55), rgba(13,23,38,0) 45%)}
}

/* ---------- 10. LE BLOC BILINGUE , signature de la marque ---------- */
.bilingue{
  border:1px solid var(--filet-clair); background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px);
  display:grid; grid-template-columns:1fr 1fr; position:relative;
  max-width:640px;
}
.bilingue::before{
  content:""; position:absolute; top:14px; bottom:14px; left:50%; width:1px;
  background:var(--filet-clair);
}
.bl-col{padding:18px 22px 20px; min-height:150px}
.bl-code{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sur-encre-2); display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.bl-code b{font-weight:600}
.bl-code .pastille{width:6px; height:6px; border-radius:50%; flex:none}
/* Le code couleur porte l'information : bleu = langue internationale,
   argent = langue nationale du Mali. Cette règle vaut sur tout le site. */
.lang-int{color:var(--sanki-clair)}
.lang-nat{color:var(--ocre)}
.pastille.lang-int{background:var(--sanki-clair)}
.pastille.lang-nat{background:var(--ocre)}
.bl-texte{
  font-family:var(--display); font-size:clamp(1.02rem,.95rem + .4vw,1.24rem); line-height:1.42;
  color:var(--papier-2); margin:0; min-height:4.3em;
}
.bl-col--cible .bl-texte{font-style:italic}
.bl-texte.rtl{direction:rtl; text-align:right; font-family:var(--sans); font-style:normal; font-size:1.1rem}
.bl-curseur{
  display:inline-block; width:2px; height:1em; background:var(--ocre);
  vertical-align:-2px; margin-left:1px; animation:clign 1s steps(2) infinite;
}
@keyframes clign{0%,50%{opacity:1}51%,100%{opacity:0}}
.bl-pied{
  grid-column:1/-1; border-top:1px solid var(--filet-clair);
  padding:11px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sur-encre-2);
}
.bl-points{display:flex; gap:6px}
.bl-point{width:16px; height:2px; background:var(--filet-clair); transition:background .3s}
.bl-point.on{background:var(--ocre)}
@media (max-width:560px){
  .bilingue{grid-template-columns:1fr}
  .bilingue::before{display:none}
  .bl-col--cible{border-top:1px solid var(--filet-clair)}
  .bl-col{min-height:0}
  .bl-texte{min-height:3.4em}
}

/* Bande d'accueil du bloc bilingue + légende du code couleur */
.bilingue-bande{
  display:grid; grid-template-columns:minmax(0,640px) 1fr; gap:clamp(1.6rem,1rem + 2.4vw,3.4rem);
  align-items:center; padding:0 0 clamp(2.4rem,1.8rem + 2.4vw,3.8rem);
}
.bilingue-note p{font-size:.88rem; color:var(--sur-encre-2); margin-bottom:.5rem}
.bilingue-note p:last-child{margin-top:1rem; margin-bottom:0; max-width:38ch; line-height:1.6}
.bilingue-note .cle{
  display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sur-encre);
}
.bilingue-note .pastille{width:7px; height:7px; border-radius:50%; flex:none}
@media (max-width:1040px){
  .bilingue-bande{grid-template-columns:1fr; gap:1.6rem}
  .bilingue{max-width:none}
}

/* ---------- 11. Ruban de codes de langue ---------- */
.ruban{
  border-top:1px solid var(--filet-clair); border-bottom:1px solid var(--filet-clair);
  background:rgba(0,0,0,.22); overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ruban-piste{display:flex; width:max-content; animation:defile 52s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban-item{
  display:inline-flex; align-items:baseline; gap:11px; padding:14px 24px; white-space:nowrap;
  font-family:var(--display); font-size:1.06rem; color:#DCE6F0;
}
.ruban-item .code{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sanki-clair); border:1px solid rgba(95,160,255,.32); padding:2px 6px;
}
.ruban-item.nat .code{color:var(--argent); border-color:rgba(184,196,208,.38)}
.ruban-item::after{content:""; width:4px; height:4px; background:var(--filet-clair); margin-left:20px; align-self:center}
@keyframes defile{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- 12. Bandeau de chiffres ---------- */
.chiffres{background:var(--encre-2); padding:clamp(3rem,2.2rem + 2.6vw,4.8rem) 0}
.chiffres-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.chiffre{padding:0 clamp(16px,2.2vw,38px); border-left:1px solid var(--filet-clair)}
.chiffre:first-child{border-left:0; padding-left:0}
.chiffre-val{
  font-family:var(--display); font-size:clamp(3rem, 1.9rem + 3.8vw, 5rem); line-height:.94;
  color:var(--papier-2); display:block; margin-bottom:.55rem; letter-spacing:-.03em;
}
.chiffre-val small{font-size:.36em; color:var(--ocre); letter-spacing:0; margin-left:.12em}
.chiffre-lab{font-size:.88rem; line-height:1.5; color:var(--sur-encre-2); margin:0}
.chiffre-cle{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sanki-clair); display:block; margin-bottom:1rem;
}
@media (max-width:860px){
  .chiffres-grid{grid-template-columns:repeat(2,1fr); gap:2.6rem 0}
  .chiffre:nth-child(odd){border-left:0; padding-left:0}
}
@media (max-width:440px){
  .chiffres-grid{grid-template-columns:1fr; gap:2.2rem}
  .chiffre{border-left:0; padding-left:0}
}

/* ---------- 13. Rangées éditoriales ---------- */
.rangee{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1.2rem + 3.6vw,4.8rem); align-items:center}
.rangee + .rangee{margin-top:clamp(3.4rem,2.4rem + 3.4vw,6rem)}
.rangee-media{position:relative}
.rangee-media .ph{aspect-ratio:4/3}
.rangee.inverse .rangee-media{order:2}
.rangee-num{
  position:absolute; top:-18px; left:-14px; z-index:2;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--encre); color:var(--sanki-clair); padding:8px 14px; border-left:2px solid var(--ocre);
}
.bg-craie .rangee-num,.bg-blanc .rangee-num{background:var(--encre)}
@media (max-width:900px){
  .rangee{grid-template-columns:1fr; gap:1.9rem}
  .rangee.inverse .rangee-media{order:0}
  .rangee-num{left:0; top:-16px}
}

/* Blocs deux colonnes des pages internes */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1.2rem + 3.4vw,4.4rem); align-items:center}
.split.wide-left{grid-template-columns:1.14fr .86fr}
.split.wide-right{grid-template-columns:.86fr 1.14fr}
@media (max-width:900px){ .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr; gap:2.2rem} }
.figure{
  background:var(--papier-2); border:1px solid var(--filet-2); border-top:2px solid var(--ocre);
  padding:clamp(1.8rem,1.2rem + 2.2vw,3rem); display:flex; align-items:center; justify-content:center;
}
.figure img{width:100%; max-width:400px}

/* ---------- 14. Cartes ---------- */
.grid{display:grid; gap:clamp(14px,.8rem + .9vw,22px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

.carte{
  background:var(--blanc); border:1px solid var(--filet-2); border-top:2px solid var(--encre);
  padding:clamp(1.4rem,1.1rem + .9vw,1.9rem);
  position:relative; transition:transform .24s, box-shadow .24s, border-top-color .24s;
}
.carte-hover:hover{transform:translateY(-3px); box-shadow:var(--ombre-m); border-top-color:var(--sanki)}
.carte h3{margin-bottom:.45rem}
.carte p{color:var(--texte-2); font-size:.94rem; margin-bottom:0}
.carte p + .liste{margin-top:.95rem}
.carte-encre{
  background:rgba(255,255,255,.04); border:1px solid var(--filet-clair); border-top:2px solid var(--sanki);
  padding:clamp(1.4rem,1.1rem + .9vw,1.9rem); transition:background .24s, transform .24s;
}
.carte-encre:hover{background:rgba(255,255,255,.07); transform:translateY(-3px)}
.carte-encre h3,.carte-encre h4{color:var(--papier-2)}
.carte-encre p{color:var(--sur-encre-2); font-size:.94rem}
.carte-papier{background:var(--papier-2); border:1px solid var(--filet-2); border-top:2px solid var(--ocre); padding:clamp(1.4rem,1.1rem + .9vw,1.9rem)}

.pic{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--filet); color:var(--sanki-sombre); margin-bottom:1.1rem; flex:none;
}
.pic svg{width:21px; height:21px}
.pic-acier{color:var(--acier); border-color:rgba(95,116,136,.34)}
.carte-encre .pic{border-color:var(--filet-clair); color:var(--sanki-clair)}
.carte-encre .pic-acier{color:var(--argent); border-color:rgba(184,196,208,.30)}

.liste{list-style:none; padding:0; margin:0}
.liste li{position:relative; padding-left:19px; font-size:.9rem; color:var(--texte-2); margin-bottom:.46em}
.liste li::before{content:""; position:absolute; left:0; top:.66em; width:9px; height:1px; background:var(--ocre)}
.carte-encre .liste li,.bg-encre .liste li,.bg-encre-2 .liste li{color:var(--sur-encre-2)}
.liste li strong{color:var(--texte)}
.bg-encre .liste li strong,.bg-encre-2 .liste li strong,.carte-encre .liste li strong{color:var(--papier-2)}

/* ---------- 15. Étapes ---------- */
.etapes{display:grid; gap:0; border-top:1px solid var(--filet)}
.etape{position:relative; padding:1.7rem 0 1.7rem 124px; border-bottom:1px solid var(--filet)}
.etape-cle{
  position:absolute; left:0; top:1.85rem;
  /* largeur bornée à la gouttière : sans elle, « Affectation » passait sous le titre */
  width:110px; box-sizing:border-box; line-height:1.45; hyphens:none;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sanki-sombre); border-left:2px solid var(--ocre); padding-left:10px;
}
.etape h3{font-size:1.24rem; margin-bottom:.28rem}
.etape p{margin:0; color:var(--texte-2); font-size:.94rem}
.bg-encre .etapes,.bg-encre .etape{border-color:var(--filet-clair)}
.bg-encre .etape-cle{color:var(--sanki-clair)}
/* La gouttière n'existe que si les étapes portent une clé */
.etapes:not(.avec-cles) .etape{padding-left:0}
@media (max-width:560px){ .etape{padding-left:0; padding-top:2.9rem} .etape-cle{top:1.5rem} }

/* ---------- 16. Langues ---------- */
.panneau{background:var(--blanc); border:1px solid var(--filet-2); border-top:2px solid var(--sanki); padding:clamp(1.5rem,1.1rem + 1.3vw,2.2rem)}
.panneau.nat{border-top-color:var(--ocre)}
.panneau-tete{display:flex; align-items:baseline; gap:14px; margin-bottom:1.4rem; padding-bottom:1.1rem; border-bottom:1px solid var(--filet-2); flex-wrap:wrap}
.panneau-tete h3{margin:0}
.panneau-tete .compte{
  margin-left:auto; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sanki-sombre); white-space:nowrap;
}
.panneau.nat .compte{color:var(--ocre)}
.langues{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none}
.langue{
  display:inline-flex; align-items:baseline; gap:9px; padding:8px 13px;
  border:1px solid var(--filet); background:var(--craie); margin:0;
  font-size:.9rem; color:var(--texte); transition:border-color .18s, background .18s, transform .18s;
}
.langue:hover{border-color:var(--sanki); background:var(--blanc); transform:translateY(-1px)}
.panneau.nat .langue:hover{border-color:var(--ocre)}
.langue .code{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ardoise)}
.panneau.nat .langue .code{color:var(--ocre)}
.langue em{font-style:normal; font-size:.78rem; color:var(--ardoise)}

.paires{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0}
.paire{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; margin:0;
  border:1px solid var(--filet); background:var(--blanc);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-2);
}
.paire .fl{color:var(--sanki); font-size:.9rem; line-height:1}
.paire.nat .fl{color:var(--ocre)}

/* ---------- 16 bis. Bande photographique pleine largeur ---------- */
.bande-terrain{position:relative; color:var(--papier-2); overflow:hidden; background:var(--encre)}
.bande-terrain .ph{position:absolute; inset:0}
.bande-terrain .ph::after{background:linear-gradient(95deg, rgba(13,23,38,.95) 18%, rgba(13,23,38,.76) 52%, rgba(120,145,175,.34))}
.bande-terrain-inner{position:relative; z-index:2; padding-top:clamp(3.6rem,2.6rem + 4vw,6.4rem); padding-bottom:clamp(3.6rem,2.6rem + 4vw,6.4rem)}
.bande-terrain-inner > div{max-width:640px}
.bande-terrain h2{color:var(--papier-2)}
.bande-terrain .lead{color:#C4D2DF; margin-bottom:2rem}

/* ---------- 17. Bandeau d'appel ---------- */
.appel{
  background:var(--encre); color:var(--papier-2);
  padding:clamp(2.4rem,1.8rem + 2.6vw,4rem); position:relative; overflow:hidden;
  border-top:2px solid var(--sanki);
}
.appel::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(27,98,214,.34), transparent 66%);
}
.appel-inner{position:relative; z-index:1; max-width:760px}
.appel h2{color:var(--papier-2); margin-bottom:.42em}
.appel p{color:var(--sur-encre-2); margin-bottom:1.9rem}

/* ---------- 18. Accordéon ---------- */
.faq{border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.3rem 46px 1.3rem 0; position:relative;
  font-family:var(--display); font-size:1.22rem; color:var(--texte); line-height:1.28;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; background:var(--ocre); transition:transform .26s, opacity .26s;
}
.faq summary::before{width:13px; height:2px; margin-top:-1px}
.faq summary::after{width:2px; height:13px; right:11px; margin-top:-7px}
.faq details[open] summary::after{transform:rotate(90deg); opacity:0}
.faq .faq-corps{padding:0 24px 1.5rem 0; color:var(--texte-2); font-size:.95rem}
.faq .faq-corps p:last-child{margin-bottom:0}
.bg-encre .faq,.bg-encre .faq details{border-color:var(--filet-clair)}
.bg-encre .faq summary{color:var(--papier-2)}

/* ---------- 19. Formulaire ---------- */
.form-carte{
  background:var(--blanc); border:1px solid var(--filet-2); border-top:3px solid var(--sanki);
  padding:clamp(1.6rem,1.2rem + 1.4vw,2.6rem); box-shadow:0 18px 44px rgba(13,23,38,.09);
}

/* Un seul niveau porte les petites capitales mono : le titre de section.
   Les libellés de champ sont en texte courant , sans quoi rien ne distingue
   un intertitre d'un champ, ni un champ d'un bouton. */
.form-etape{display:flex; align-items:center; gap:14px; margin:2.4rem 0 1.3rem}
.form-etape:first-child{margin-top:0}
.form-etape b{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sanki); white-space:nowrap;
}
.form-etape::after{content:""; flex:1; height:1px; background:var(--filet)}

.champ{margin-bottom:1.15rem}
.champ label,.champ .champ-label{
  display:block; font-family:var(--sans); font-size:.9rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--encre); margin-bottom:8px;
}
.champ .req{color:var(--sanki); font-weight:700; margin-left:1px}
.champ .aide{text-transform:none; letter-spacing:.01em; color:var(--ardoise); font-family:var(--sans); font-size:.82rem; font-weight:400}
.champ .champ-label .aide{display:block; margin-top:4px}

/* Choix des langues : une liste déroulante, une case devant chaque langue.
   Les deux familles servent d'intertitres et reprennent le code couleur du
   site , bleu pour l'international, acier pour les langues du Mali. */
.multi{position:relative}
.multi-bouton{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--filet); border-radius:2px; background:var(--craie);
  font-family:var(--sans); font-size:.95rem; color:var(--texte); text-align:left; cursor:pointer;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.multi-bouton:hover{border-color:var(--sanki)}
.multi-bouton:focus-visible{outline:2px solid var(--sanki); outline-offset:2px}
.multi-bouton[aria-expanded="true"]{border-color:var(--sanki); background:var(--blanc); box-shadow:0 0 0 3px rgba(27,98,214,.12)}
.multi-resume{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.multi-resume.vide{color:var(--ardoise)}
.multi-chevron{flex:none; width:15px; height:15px; color:var(--ardoise); transition:transform .2s}
.multi-bouton[aria-expanded="true"] .multi-chevron{transform:rotate(180deg)}

.multi-panneau{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px);
  background:var(--blanc); border:1px solid var(--filet); box-shadow:0 14px 38px rgba(13,23,38,.16);
  max-height:330px; overflow-y:auto; padding-bottom:6px;
}
.multi-panneau[hidden]{display:none}
.multi-fam{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sanki-sombre); margin:0; padding:13px 14px 7px;
  position:sticky; top:0; background:var(--blanc); border-bottom:1px solid var(--filet-2);
}
.multi-fam--nat{color:var(--acier)}
.multi-opt{
  display:flex; align-items:center; gap:11px; padding:9px 14px; margin:0;
  font-family:var(--sans); font-size:.93rem; font-weight:400; color:var(--texte);
  cursor:pointer; user-select:none;
}
.multi-opt:hover{background:var(--craie)}
.multi-opt input[type="checkbox"]{
  width:16px; height:16px; flex:none; margin:0; padding:0;
  accent-color:var(--sanki); cursor:pointer;
}
.multi-opt--nat input[type="checkbox"]{accent-color:var(--acier)}
.multi-opt.focus{background:var(--craie); box-shadow:inset 2px 0 0 var(--sanki)}
.champ-erreur{
  font-family:var(--sans); font-size:.82rem; color:#B3261E; margin:7px 0 0;
}
.champ-erreur[hidden]{display:none}
.champ input,.champ select,.champ textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--texte);
  padding:13px 14px; border:1px solid #C4D0DC; border-radius:2px; background:var(--blanc);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.champ input::placeholder,.champ textarea::placeholder{color:#96A6B6}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#8FA4B8}
.champ textarea{min-height:128px; resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--sanki); box-shadow:0 0 0 3px rgba(27,98,214,.14); background:var(--blanc);
}
.champ-duo{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media (max-width:640px){ .champ-duo{grid-template-columns:1fr} }
.coches{display:flex; flex-wrap:wrap; gap:9px}
.coche{
  position:relative; display:inline-flex; align-items:center; gap:9px; padding:10px 17px; margin:0;
  border:1px solid #C4D0DC; background:var(--blanc); border-radius:2px;
  font-family:var(--sans); font-size:.9rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--texte); cursor:pointer; user-select:none;
  transition:border-color .16s, background .16s, color .16s, transform .16s, box-shadow .16s;
}
.coche::before{
  content:""; width:15px; height:15px; flex:none; border:1px solid #B6C4D2; background:var(--blanc);
  transition:inherit;
}
.coche:hover{border-color:var(--sanki); color:var(--sanki-sombre); transform:translateY(-1px)}
.coche input{position:absolute; opacity:0; width:0; height:0}
.coche.on{
  border-color:var(--sanki); background:var(--sanki); color:#fff; font-weight:600;
  box-shadow:0 3px 10px rgba(27,98,214,.28);
}
.coche.on::before{background:#fff; border-color:#fff}
/* le ✓, tracé avec deux bords d'un carré pivoté */
.coche.on::after{
  content:""; position:absolute; left:22px; top:50%;
  width:5px; height:9px; border:2px solid var(--sanki); border-top:0; border-left:0;
  transform:translateY(-62%) rotate(45deg);
}
.coche.focus{outline:2px solid var(--sanki); outline-offset:2px}
.form-note{font-size:.81rem; color:var(--ardoise); margin-top:1rem; line-height:1.55}
.form-sortie{margin-top:1.4rem; padding:1.2rem 1.3rem; background:var(--papier-2); border:1px solid var(--filet); border-left:3px solid var(--ocre); display:none}
.form-sortie.show{display:block; animation:apparait .32s ease}
@keyframes apparait{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.form-sortie pre{
  white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:.8rem; line-height:1.6;
  color:var(--texte-2); background:var(--blanc); border:1px solid var(--filet-2);
  padding:14px; margin:0 0 1.1rem; max-height:240px; overflow:auto;
}

/* ---------- 20. Coordonnées ---------- */
.coord{list-style:none; padding:0; margin:0}
.coord li{display:flex; gap:15px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--filet-2); margin:0}
.coord li:last-child{border-bottom:0}
.coord .ci{
  width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(27,98,214,.22); background:rgba(27,98,214,.07); color:var(--sanki);
}
.coord .ci svg{width:18px; height:18px}
.coord b{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ardoise); margin-bottom:5px; font-weight:500}
.coord span{font-size:.98rem; color:var(--encre); line-height:1.55; font-weight:500}
.coord a{color:var(--encre); text-decoration:none; border-bottom:1px solid rgba(27,98,214,.3)}
.coord a:hover{color:var(--sanki); border-bottom-color:var(--sanki); text-decoration:none}

/* ---------- 21. En-tête de page interne ---------- */
.page-head{position:relative; background:var(--encre); color:var(--sur-encre); overflow:hidden}
.page-head .ph{position:absolute; inset:0}
.page-head .ph img{opacity:.5}
.page-head::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--encre) 22%, rgba(13,23,38,.72) 62%, rgba(13,23,38,.45));
}
.page-head .wrap{position:relative; z-index:2; padding-top:clamp(3rem,2.2rem + 3vw,5rem); padding-bottom:clamp(2.8rem,2rem + 2.8vw,4.4rem)}
.page-head h1{color:var(--papier-2); font-size:clamp(2.2rem,1.5rem + 2.8vw,3.9rem); margin-bottom:.32em}
.page-head p{color:var(--sur-encre-2); max-width:60ch; margin:0}
.fil{display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--sur-encre-2); margin-bottom:1.2rem; flex-wrap:wrap}
.fil a{color:var(--sur-encre-2); text-decoration:none}
.fil a:hover{color:var(--sanki-clair)}
.fil span{color:var(--ocre)}

/* ---------- 22. Citation ---------- */
.citation{
  font-family:var(--display); font-size:clamp(1.4rem,1.1rem + 1.3vw,2.15rem); line-height:1.36;
  color:var(--texte); font-style:italic; border-left:2px solid var(--ocre);
  padding-left:clamp(1.2rem,.8rem + 1.2vw,2.2rem); margin:0;
}
.bg-encre .citation{color:var(--papier-2)}
.citation-auteur{
  display:block; margin-top:1.2rem; font-family:var(--mono); font-style:normal;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ardoise);
}
.bg-encre .citation-auteur{color:var(--sur-encre-2)}

/* ---------- 23. Pied de page ---------- */
.site-footer{background:var(--encre); color:var(--sur-encre-2); padding:clamp(3rem,2.2rem + 2.4vw,4.6rem) 0 0; font-size:.92rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.8rem,1rem + 2.4vw,3.2rem)}
@media (max-width:960px){ .footer-grid{grid-template-columns:1fr 1fr; gap:2.4rem} }
@media (max-width:580px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:1.2rem}
/* Jamais de largeur ET hauteur imposees sur le logo : le rapport est de 1,87,
   un carre l'ecrasait verticalement. */
.footer-brand img{height:40px; width:40px; display:block; border-radius:8px}
.footer-brand .fb-name{font-family:var(--display); font-size:1.22rem; color:var(--papier-2); line-height:1.1}
.footer-brand .fb-sub{font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre); margin-top:5px; display:block}
.site-footer h4{font-family:var(--mono); color:var(--papier-2); font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:500}
.site-footer p{color:var(--sur-encre-2); font-size:.91rem}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin-bottom:.58rem}
.footer-links a{color:var(--sur-encre-2); text-decoration:none; transition:color .16s}
.footer-links a:hover{color:var(--sanki-clair); text-decoration:none}
.footer-contact{list-style:none; padding:0; margin:0}
.footer-contact li{display:flex; gap:11px; margin-bottom:.85rem; align-items:flex-start}
.footer-contact svg{width:15px; height:15px; color:var(--ocre); flex:none; margin-top:4px}
.footer-contact a{color:var(--sur-encre-2)}
.footer-contact a:hover{color:var(--sanki-clair); text-decoration:none}
.footer-bas{
  margin-top:clamp(2.2rem,1.6rem + 1.6vw,3.2rem); border-top:1px solid var(--filet-clair);
  padding:1.4rem 0; display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:#728799;
}
.footer-bas a{color:#728799; text-decoration:none}
.footer-bas a:hover{color:var(--ocre)}

.sanki-signature{
  display:flex; align-items:center; justify-content:center;
  padding:16px 0 24px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#697E93;
  border-top:1px solid rgba(255,255,255,.05);
}
.sanki-signature strong{color:var(--ocre); font-weight:500; letter-spacing:.14em}

/* ---------- 24. Divers ---------- */
.jeton{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px;
  border:1px solid var(--filet-clair); font-family:var(--mono);
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--sur-encre);
}
.jeton .pastille{width:6px; height:6px; border-radius:50%; background:var(--ocre); flex:none}
.center{text-align:center}
.mb-0{margin-bottom:0}
.mt-3{margin-top:2rem}

/* Révélation : un balayage de lecture, gauche → droite */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal-wipe{clip-path:inset(0 100% 0 0); transition:clip-path .85s cubic-bezier(.55,.06,.24,.99)}
.reveal-wipe.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-wipe{opacity:1; transform:none; clip-path:none; transition:none}
  .ruban-piste,.bl-curseur{animation:none}
  .ph img{transition:none}
  html{scroll-behavior:auto}
}
@media print{
  .site-header,.topbar,.ruban,.btn,.site-footer,.hero-media{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
}

/* =========================================================================
   25. L'argent selon le fond
   --argent (#B8C4D0) est calibré pour les fonds sombres. Sur fond clair il
   deviendrait illisible : on lui substitue --acier (#5F7488), même famille,
   contraste suffisant. Le sens du code couleur, lui, ne change pas :
   bleu = langue internationale, argent/acier = langue nationale du Mali.
   ========================================================================= */
.liste li::before,
.etape-cle,
.citation,
.form-sortie,
.figure,
.carte-papier,
.faq summary::before,
.faq summary::after{--ocre:var(--acier)}

.liste li::before{background:var(--acier)}
.bg-encre .liste li::before,
.bg-encre-2 .liste li::before,
.carte-encre .liste li::before,
.bande-terrain .liste li::before,
.appel .liste li::before{background:var(--argent)}

.etape-cle{border-left-color:var(--acier)}
.bg-encre .etape-cle,.bg-encre-2 .etape-cle{border-left-color:var(--argent)}

.citation{border-left-color:var(--acier)}
.bg-encre .citation{border-left-color:var(--argent)}

.form-sortie{border-left-color:var(--acier)}
.figure{border-top-color:var(--acier)}
.carte-papier{border-top-color:var(--acier)}

.faq summary::before,.faq summary::after{background:var(--acier)}
.bg-encre .faq summary::before,.bg-encre .faq summary::after{background:var(--argent)}

.panneau.nat{border-top-color:var(--acier)}
.panneau.nat .compte{color:var(--acier)}
.panneau.nat .langue:hover{border-color:var(--acier)}
.panneau.nat .langue .code{color:var(--acier)}
.paire.nat .fl{color:var(--acier)}

/* Le code couleur des langues, selon le fond */
.lang-nat{color:var(--acier)}
.pastille.lang-nat{background:var(--acier)}
.bg-encre .lang-nat,.hero .lang-nat,.bilingue .lang-nat,.page-head .lang-nat{color:var(--argent)}
.bg-encre .pastille.lang-nat,.hero .pastille.lang-nat,
.bilingue .pastille.lang-nat,.bilingue-note .pastille.lang-nat{background:var(--argent)}

/* =========================================================================
   26. Commerce général et transport
   Ajouts liés aux deux métiers introduits en septembre 2026.
   ========================================================================= */

/* Carte avec photo en tête : l'image touche les bords, le texte garde sa marge */
.carte-photo{padding:0; overflow:hidden; display:flex; flex-direction:column}
.carte-photo .ph{aspect-ratio:16/10; flex:none}
.carte-photo .carte-corps{padding:clamp(1.3rem,1rem + .8vw,1.8rem); flex:1}
.carte-photo h3{margin-bottom:.5rem}

/* Bloc mis en avant : une offre que l'on veut voir avant les autres */
.phare{
  background:var(--encre); color:var(--sur-encre);
  border-top:3px solid var(--sanki); overflow:hidden;
}
.phare-grille{display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch}
.phare .ph{min-height:100%}
/* Le texte se centre verticalement : sans cela, il finit bien avant la photo
   et laisse un vide en bas du bloc. */
.phare-texte{padding:clamp(1.8rem,1.2rem + 2.6vw,3.4rem);
  display:flex; flex-direction:column; justify-content:center}
.phare h2{color:#fff; font-size:clamp(1.7rem,1.25rem + 1.8vw,2.5rem)}
.phare p{color:var(--sur-encre-2)}
.phare .liste li{color:var(--sur-encre-2)}
.phare .liste li::before{background:var(--sanki-clair)}
.phare .liste li strong{color:#fff}
@media (max-width:900px){
  .phare-grille{grid-template-columns:1fr}
  .phare .ph{aspect-ratio:16/9; min-height:0}
}

/* Étiquette d'urgence ou de nouveauté, à employer avec parcimonie */
/* align-self : sans cela, le jeton s'étire sur toute la largeur dans une
   colonne flex comme .phare-texte. */
.jeton-vif{
  display:inline-flex; align-self:flex-start; align-items:center; gap:8px; padding:6px 13px;
  background:var(--sanki); color:#fff; font-family:var(--mono);
  font-size:.64rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}

/* Tableau simple : capacités de la flotte */
.flotte{width:100%; border-collapse:collapse; margin:0}
.flotte th,.flotte td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--filet-2); font-size:.94rem}
.flotte th{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ardoise); font-weight:500; border-bottom-color:var(--filet);
}
.flotte td:first-child{font-weight:650; color:var(--encre); white-space:nowrap}
.flotte tr:last-child td{border-bottom:0}
.bg-encre .flotte th{color:var(--argent); border-bottom-color:var(--filet-clair)}
.bg-encre .flotte td{border-bottom-color:var(--filet-clair); color:var(--sur-encre-2)}
.bg-encre .flotte td:first-child{color:#fff}

/* Bande de trois métiers sur l'accueil */
.metier-lien{
  display:block; text-decoration:none !important; color:inherit;
  background:var(--blanc); border:1px solid var(--filet-2); border-top:2px solid var(--encre);
  overflow:hidden; transition:transform .24s, box-shadow .24s, border-top-color .24s;
}
.metier-lien:hover{transform:translateY(-3px); box-shadow:var(--ombre-m); border-top-color:var(--sanki)}
.metier-lien .ph{aspect-ratio:16/9}
.metier-lien .metier-corps{padding:clamp(1.4rem,1.1rem + .9vw,2rem)}
.metier-num{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  color:var(--sanki); display:block; margin-bottom:.7rem;
}
.metier-lien h3{margin-bottom:.5rem}
.metier-lien p{color:var(--texte-2); font-size:.95rem; margin-bottom:1rem}
.metier-fleche{
  font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--sanki-sombre);
  display:inline-flex; align-items:center; gap:8px;
}
.metier-lien:hover .metier-fleche{gap:12px}

/* =========================================================================
   27. Pages sans photographie
   Les métiers commerce et transport sont présentés sans image : la mise en
   page doit rester juste quand une colonne visuelle disparaît.
   ========================================================================= */

/* Un bloc resté seul occupe toute la largeur au lieu d'une demi-colonne */
.split > *:only-child{grid-column:1 / -1}
.hero-grid--seul{grid-template-columns:1fr}
.phare-grille--seul{grid-template-columns:1fr}

/* Le héros sans média respire davantage et le texte garde une mesure lisible */
.hero-grid--seul .hero-texte{max-width:60ch}
.hero-grid--seul .lead{max-width:52ch}

/* Bloc phare sans photo : un filet bleu remplace l'image */
.phare-grille--seul .phare-texte{
  border-left:3px solid var(--sanki);
  padding-left:clamp(1.6rem,1rem + 2.4vw,3rem);
}

/* Carte de métier sans photo : le numéro devient l'élément visuel */
.metier-lien .metier-corps{padding:clamp(1.6rem,1.2rem + 1.2vw,2.2rem)}
.metier-num{
  font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--sanki);
  letter-spacing:-.02em; display:block; margin-bottom:1rem; opacity:.9;
}
.metier-lien{display:flex; flex-direction:column}
.metier-lien .metier-corps{flex:1; display:flex; flex-direction:column}
.metier-lien .metier-fleche{margin-top:auto; padding-top:.6rem}

/* =========================================================================
   28. Bouton WhatsApp flottant
   Pour les demandes urgentes. Vert WhatsApp assumé : c'est un code que tout
   le monde reconnaît, y compris ceux qui ne lisent pas le libellé.
   ========================================================================= */
.wa-flottant{
  position:fixed; right:20px; bottom:20px; z-index:250;
  display:inline-flex; align-items:center; gap:11px;
  padding:13px 20px 13px 15px; border-radius:999px;
  background:#1FAD52; color:#fff;
  font-family:var(--sans); font-size:.92rem; font-weight:600; line-height:1;
  text-decoration:none !important;
  box-shadow:0 6px 22px rgba(13,23,38,.3), 0 2px 6px rgba(13,23,38,.2);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.wa-flottant svg{width:23px; height:23px; fill:currentColor; flex:none}
.wa-flottant span{white-space:nowrap}
.wa-flottant:hover{
  background:#189044; transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(13,23,38,.34), 0 2px 6px rgba(13,23,38,.2);
}
.wa-flottant:focus-visible{outline:3px solid #fff; outline-offset:3px}

/* Sur mobile, la pastille seule : le libellé mangerait la largeur d'écran */
@media (max-width:700px){
  .wa-flottant{
    right:16px; bottom:16px; padding:0;
    width:56px; height:56px; border-radius:50%;
    align-items:center; justify-content:center; gap:0;
  }
  .wa-flottant span{display:none}
  .wa-flottant svg{width:27px; height:27px}
}

/* Le pied de page garde de l'air pour ne pas passer sous le bouton */
.sanki-signature{padding-bottom:clamp(26px,4vw,34px)}
@media (max-width:700px){ .sanki-signature{padding-bottom:80px} }

@media (prefers-reduced-motion:reduce){
  .wa-flottant{transition:none}
  .wa-flottant:hover{transform:none}
}

/* =========================================================================
   29. Photographies de produits
   Les visuels du catalogue sont des photos de matériel, pas des images
   d'ambiance : ni voile bleu, ni désaturation, fond blanc conservé.
   ========================================================================= */
.ph-produit{background:#fff}
.ph-produit img{filter:none}
.ph-produit::after{display:none}
.ph-produit.ph-hover:hover img{filter:none; transform:scale(1.03)}

/* Les fiches du catalogue : cadrage moins agressif qu'un 16/10 */
.carte-photo .ph{aspect-ratio:4/3}

/* Le produit phare doit se voir en entier, jamais rogné */
.ph-entier img{object-fit:contain; background:#fff}
.phare .ph-entier{background:#fff; min-height:0}
.carte-photo .ph-entier img{padding:10px}
@media (min-width:901px){
  .phare-grille .ph-entier{align-self:stretch}
  .phare-grille .ph-entier img{height:100%; padding:clamp(14px,2vw,28px)}
}
@media (max-width:900px){
  .phare-grille .ph-entier{aspect-ratio:4/3}
  .phare-grille .ph-entier img{padding:16px}
}

/* =========================================================================
   30. Suivi de commande partenaire
   Le partenaire saisit son code, lit son bon de commande sans prix, suit
   l'avancement et feuillette les photos du chantier.
   ========================================================================= */

/* ---------- la saisie du code ---------- */
.acces-carte{
  background:var(--blanc); border:1px solid var(--filet-2); border-top:2px solid var(--sanki);
  box-shadow:var(--ombre-m); padding:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);
  max-width:760px; margin:0 auto;
}
.acces-carte label{
  display:block; font-family:var(--display); font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  color:var(--encre); letter-spacing:-.015em; margin:.5rem 0 1rem;
}
.acces-ligne{display:flex; gap:12px; flex-wrap:wrap}
.acces-ligne input{
  flex:1 1 260px; min-width:0; font-family:var(--mono); font-size:1.12rem;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  padding:16px 14px; border:1.5px solid var(--filet); background:var(--craie);
  color:var(--encre); border-radius:2px; transition:border-color .16s, background .16s;
}
.acces-ligne input::placeholder{color:var(--ardoise); letter-spacing:.1em}
.acces-ligne input:focus{
  outline:none; border-color:var(--sanki); background:#fff;
  box-shadow:0 0 0 3px rgba(27,98,214,.14);
}
.acces-ligne input[aria-invalid="true"]{border-color:#C0392B; background:#FDF6F5}
.acces-ligne .btn{flex:0 0 auto}
.acces-aide{font-size:.88rem; color:var(--ardoise); margin:1.1rem 0 0; line-height:1.55}

.acces-trois{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,.8rem + .9vw,26px);
  max-width:760px; margin:clamp(1.8rem,1.4rem + 1vw,2.6rem) auto 0;
}
.acces-trois > div{border-top:1px solid var(--filet); padding-top:1rem}
.acces-num{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--sanki); display:block; margin-bottom:.5rem;
}
.acces-trois b{display:block; font-size:.98rem; color:var(--encre); margin-bottom:.3rem}
.acces-trois span:not(.acces-num){display:block; font-size:.86rem; color:var(--texte-2); line-height:1.5}
@media (max-width:700px){ .acces-trois{grid-template-columns:1fr} }

/* ---------- l'en-tete du dossier ---------- */
.suivi-tete{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
  flex-wrap:wrap; padding-bottom:1.6rem; border-bottom:1px solid var(--filet);
}
.suivi-tete h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem); margin:.3rem 0 .5rem}
.suivi-tete .lead{margin:0; font-size:1.02rem}
.suivi-etat{display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; text-align:right}
.suivi-maj{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ardoise)}
@media (max-width:640px){
  .suivi-etat{align-items:flex-start; text-align:left}
}

.suivi-mot{
  background:rgba(27,98,214,.06); border-left:3px solid var(--sanki);
  padding:1.1rem 1.3rem; margin-top:1.6rem;
}
.suivi-mot strong{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sanki); margin-bottom:.45rem;
}
.suivi-mot span{display:block; color:var(--texte); line-height:1.6}

.suivi-fiche{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0; margin-top:1.8rem; border-top:1px solid var(--filet-2);
}
.suivi-fiche > div{padding:1.1rem 1.3rem 1.1rem 0; border-bottom:1px solid var(--filet-2)}
.sf-lab{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ardoise); margin-bottom:.4rem;
}
.sf-val{display:block; font-size:.98rem; color:var(--encre); font-weight:600; line-height:1.4}

.suivi-titre{
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);
  margin:clamp(2.4rem,2rem + 1.4vw,3.4rem) 0 1rem;
}
.suivi-sous{color:var(--texte-2); font-size:.94rem; max-width:64ch; margin-bottom:1.4rem}
.suivi-note{
  font-size:.84rem; color:var(--ardoise); margin-top:.9rem;
  padding-left:.9rem; border-left:2px solid var(--filet);
}
.suivi-vide{
  background:var(--craie); border:1px dashed var(--filet); padding:2rem;
  text-align:center; margin-top:1.4rem;
}
.suivi-vide b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--encre); margin-bottom:.4rem}
.suivi-vide span{display:block; color:var(--texte-2); font-size:.92rem}

.table-enveloppe{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tab-suivi{width:100%; border-collapse:collapse; min-width:480px}
.tab-suivi th,.tab-suivi td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--filet-2); font-size:.94rem}
.tab-suivi th{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ardoise); font-weight:500; border-bottom-color:var(--filet);
}
.tab-suivi td{color:var(--texte-2)}
.tab-suivi td strong{color:var(--encre); font-weight:650}
.tab-suivi .num{text-align:right; white-space:nowrap; color:var(--encre); font-weight:600}
.tab-suivi tr:last-child td{border-bottom:0}

/* ---------- l'avancement ---------- */
.jauge{height:6px; background:var(--craie); border:1px solid var(--filet-2); overflow:hidden}
.jauge-barre{height:100%; background:var(--sanki); transition:width .6s ease}
.jauge-txt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardoise); margin:.7rem 0 1.8rem;
}
.chrono{list-style:none; margin:0; padding:0; position:relative}
.chrono::before{
  content:""; position:absolute; left:7px; top:10px; bottom:10px;
  width:1px; background:var(--filet);
}
.chrono li{position:relative; padding:0 0 1.5rem 34px}
.chrono li:last-child{padding-bottom:0}
.chrono-pastille{
  position:absolute; left:0; top:3px; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--filet); background:var(--blanc); z-index:1;
}
.chrono li.fait .chrono-pastille{
  border-color:var(--sanki); background:var(--sanki);
  box-shadow:0 0 0 3px rgba(27,98,214,.14);
}
.chrono b{display:block; font-size:1rem; color:var(--ardoise); font-weight:600; margin-bottom:.2rem}
.chrono li.fait b{color:var(--encre)}
.chrono span:not(.chrono-pastille){display:block; font-size:.88rem; color:var(--texte-2); line-height:1.5}
.chrono-date{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sanki); margin-top:.35rem;
}

/* ---------- la galerie ---------- */
.gal{margin-top:.4rem}
.gal-scene{
  position:relative; background:var(--encre); aspect-ratio:4/3; max-height:72vh;
  overflow:hidden; cursor:zoom-in; touch-action:pan-y;
  display:flex; align-items:center; justify-content:center;
}
.gal-scene.zoome{cursor:grab}
.gal-scene.zoome:active{cursor:grabbing}
.gal-scene img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-origin:center center; transition:transform .22s ease;
  user-select:none; -webkit-user-drag:none;
}
.gal-fl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--encre);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.28); transition:background .16s, transform .16s;
}
.gal-fl svg{width:22px; height:22px}
.gal-fl:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.gal-prec{left:14px}
.gal-suiv{right:14px}
.gal-outils{
  position:absolute; right:14px; bottom:14px; z-index:3; display:flex; gap:1px;
  background:rgba(13,23,38,.62); border-radius:3px; overflow:hidden;
}
.gal-outils button{
  border:0; background:transparent; color:#fff; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; padding:8px 11px; line-height:1;
  transition:background .16s;
}
.gal-outils button:hover{background:rgba(255,255,255,.16)}
.gal-compte{
  position:absolute; left:14px; bottom:14px; z-index:3;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#fff;
  background:rgba(13,23,38,.62); padding:7px 11px; border-radius:3px;
}
.gal-legende{padding:1.1rem 0; border-bottom:1px solid var(--filet-2)}
.gal-legende b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--encre)}
.gal-legende span{display:block; font-size:.92rem; color:var(--texte-2); line-height:1.55; margin-top:.3rem}
.gal-legende .gal-date{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardoise); margin-top:.4rem;
}
.gal-bande{
  display:flex; gap:9px; overflow-x:auto; padding:1rem 0 .4rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.gal-vign{
  position:relative; flex:0 0 auto; width:90px; height:68px; padding:0; cursor:pointer;
  border:1px solid var(--filet-2); background:var(--craie); overflow:hidden;
  opacity:.62; transition:opacity .16s, border-color .16s;
}
.gal-vign img{width:100%; height:100%; object-fit:cover; display:block}
.gal-vign:hover{opacity:.9}
.gal-vign.actif{opacity:1; border-color:var(--sanki); box-shadow:0 0 0 2px rgba(27,98,214,.2)}
.gal-pastille{
  position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--sanki); color:#fff;
  font-family:var(--mono); font-size:.6rem; line-height:17px; text-align:center;
}
@media (max-width:640px){
  .gal-scene{aspect-ratio:1/1}
  .gal-fl{width:38px; height:38px}
  .gal-prec{left:8px}
  .gal-suiv{right:8px}
  .gal-vign{width:72px; height:56px}
}

/* ---------- les remarques sous la photo ---------- */
.remarques{
  margin-top:1.8rem; background:var(--craie); border:1px solid var(--filet-2);
  border-top:2px solid var(--sanki); padding:clamp(1.3rem,1rem + 1vw,2rem);
}
.remarques h4{font-family:var(--display); font-size:1.28rem; color:var(--encre); margin-bottom:.4rem}
.rem-aide{font-size:.88rem; color:var(--texte-2); margin-bottom:1.3rem; line-height:1.55}
.rem-ok{
  background:rgba(31,173,82,.1); border-left:3px solid #1FAD52; color:#0F6B31;
  padding:.8rem 1rem; font-size:.9rem; margin-bottom:1.2rem;
}
.rem-fil{list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:1rem}
.rem-bulle{background:var(--blanc); border:1px solid var(--filet-2); padding:.9rem 1.1rem}
.rem-bulle b{font-size:.9rem; color:var(--encre)}
.rem-bulle p{margin:.45rem 0 0; font-size:.94rem; color:var(--texte-2); line-height:1.55}
.rem-quand{
  float:right; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--ardoise); padding-top:.15rem;
}
.rem-nous{
  background:var(--encre); border-color:var(--encre); margin:.6rem 0 0 clamp(14px,4vw,40px);
  border-left:3px solid var(--sanki-clair);
}
.rem-nous b{color:#fff}
.rem-nous p{color:var(--sur-encre-2)}
.rem-nous .rem-quand{color:var(--sur-encre-2)}
.rem-form .champ{margin-bottom:1rem}
.rem-form button{margin-top:.3rem}

/* ---------- le rappel du suivi, sur l'accueil et sur la page commerce ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.suivi-appel{
  display:grid; grid-template-columns:1fr auto; gap:clamp(1.6rem,1.2rem + 2vw,3.4rem);
  align-items:center;
}
.suivi-appel h2{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); color:#fff; margin:.3rem 0 .6rem;
}
.suivi-appel p:not(.eyebrow){color:var(--sur-encre-2); font-size:.98rem; line-height:1.6; margin:0; max-width:52ch}
.suivi-appel-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.suivi-appel-form input{
  width:min(260px, 100%); font-family:var(--mono); font-size:1rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:center; padding:14px 12px;
  border:1.5px solid var(--filet-clair); background:rgba(255,255,255,.06);
  color:#fff; border-radius:2px; transition:border-color .16s, background .16s;
}
.suivi-appel-form input::placeholder{color:var(--sur-encre-2); letter-spacing:.09em}
.suivi-appel-form input:focus{
  outline:none; border-color:var(--sanki-clair); background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(95,160,255,.18);
}
@media (max-width:860px){
  .suivi-appel{grid-template-columns:1fr}
  .suivi-appel-form input{width:100%; flex:1 1 200px}
}

/* =========================================================================
   31. La console SANKI PRESTIGE
   Elle vit sur la meme page que le suivi partenaire : un seul champ de code,
   le serveur reconnait qui frappe. En mode console, les blocs de presentation
   s'effacent pour laisser toute la place a l'outil de travail.
   ========================================================================= */

body.mode-console #tete-suivi,
body.mode-console #pied-suivi,
body.mode-console .wa-flottant{display:none}

.esp-barre{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap; margin-bottom:1.8rem;
}
.esp-barre h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem); margin:.3rem 0 0}
.esp-sous{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardoise); margin:.6rem 0 0;
}

.esp-bloc{
  background:var(--blanc); border:1px solid var(--filet-2); border-top:2px solid var(--sanki);
  padding:clamp(1.3rem,1rem + 1vw,2rem); margin-bottom:1.6rem;
}
.esp-bloc h3{font-size:1.15rem; margin-bottom:1rem}
.esp-note{font-size:.82rem; color:var(--ardoise); margin:1rem 0 0; line-height:1.5}

/* ---------- la liste des dossiers ---------- */
.esp-carte{
  background:var(--blanc); border:1px solid var(--filet-2); border-left:3px solid var(--sanki);
  padding:1.2rem 1.4rem; margin-bottom:12px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1.4rem;
  transition:box-shadow .16s, transform .16s;
}
.esp-carte:hover{box-shadow:var(--ombre-m); transform:translateY(-1px)}
.esp-carte.dort{border-left-color:var(--ardoise); opacity:.7}
.esp-carte-code{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--sanki);
  display:block; margin-bottom:.35rem;
}
.esp-carte b{display:block; font-size:1.02rem; color:var(--encre); line-height:1.3}
.esp-carte-part{display:block; font-size:.88rem; color:var(--texte-2); margin-top:.2rem}
.esp-carte-droite{display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap; justify-content:flex-end}
.esp-pilule{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--filet); color:var(--texte-2); white-space:nowrap;
}
.esp-pilule.vif{background:var(--sanki); border-color:var(--sanki); color:#fff}
.esp-pilule.alerte{background:#C0392B; border-color:#C0392B; color:#fff}
@media (max-width:640px){
  .esp-carte{flex-direction:column; align-items:flex-start}
  .esp-carte-droite{justify-content:flex-start}
}

/* ---------- le code tout neuf, pret a remettre ---------- */
.neuf{
  background:var(--encre); color:#fff; border-top:3px solid var(--sanki);
  padding:clamp(1.5rem,1.2rem + 1.2vw,2.4rem); margin-bottom:1.6rem;
}
.neuf h3{color:#fff; font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); margin:.3rem 0 1.4rem}
.neuf .eyebrow{color:var(--sanki-clair)}
.neuf-champ{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:1rem 0; border-top:1px solid var(--filet-clair);
}
.neuf-lab{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sur-encre-2); flex:0 0 108px;
}
.neuf-val{
  font-family:var(--mono); font-size:1.1rem; letter-spacing:.12em; color:#fff;
  flex:1 1 220px; min-width:0; word-break:break-all;
}
.neuf-val.neuf-lien{font-size:.84rem; letter-spacing:.02em; color:var(--sur-encre)}
@media (max-width:560px){ .neuf-lab{flex-basis:100%} }

/* ---------- la fiche d'un dossier ---------- */
.esp-retour{
  border:0; background:none; cursor:pointer; padding:0; margin-bottom:1.2rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sanki);
}
.esp-retour:hover{text-decoration:underline}

.esp-lien{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--encre); color:#fff; padding:1rem 1.2rem; margin-bottom:1.6rem;
}
.esp-lien-code{font-family:var(--mono); font-size:1.05rem; letter-spacing:.14em; color:#fff}
.esp-lien-lab{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sur-encre-2); display:block; margin-bottom:.3rem;
}
.esp-lien .btn{margin-left:auto}
@media (max-width:640px){ .esp-lien .btn{margin-left:0} }

.esp-grille{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:900px){ .esp-grille{grid-template-columns:1fr} }

.esp-ligne{
  display:flex; align-items:flex-start; gap:12px; padding:.8rem 0;
  border-bottom:1px solid var(--filet-2);
}
.esp-ligne:last-of-type{border-bottom:0}
.esp-ligne-txt{flex:1; min-width:0}
.esp-ligne-txt b{display:block; font-size:.96rem; color:var(--encre)}
.esp-ligne-txt span{display:block; font-size:.84rem; color:var(--texte-2); line-height:1.45; margin-top:.15rem}
.esp-x{
  border:1px solid var(--filet); background:var(--blanc); color:#C0392B; cursor:pointer;
  width:28px; height:28px; flex:none; line-height:1; font-size:1rem; border-radius:2px;
}
.esp-x:hover{background:#FDF6F5; border-color:#C0392B}

.esp-coche{display:flex; align-items:flex-start; gap:11px; cursor:pointer}
.esp-coche input{margin-top:3px; width:17px; height:17px; accent-color:var(--sanki); flex:none}

/* ---------- l'ajout de photos ---------- */
/* Un label reste en ligne par defaut : sans display:block, son cadre
   chevauchait le titre juste au-dessus. */
.depose{
  display:block; position:relative; margin-top:.4rem;
  border:2px dashed var(--filet); background:var(--craie); padding:2rem 1.4rem;
  text-align:center; cursor:pointer; transition:border-color .16s, background .16s;
}
.depose:hover,.depose.survol{border-color:var(--sanki); background:rgba(27,98,214,.05)}
.depose b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--encre)}
.depose span{display:block; font-size:.86rem; color:var(--texte-2); margin-top:.35rem}
.depose input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

.esp-envoi{margin-top:1rem; font-size:.86rem; color:var(--texte-2)}
.esp-envoi .jauge{margin-top:.5rem}

.esp-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin-top:1.2rem}
.esp-photo{position:relative; border:1px solid var(--filet-2); background:var(--blanc)}
.esp-photo img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.esp-photo-bas{padding:.5rem .6rem; font-size:.74rem; color:var(--texte-2); line-height:1.35}
.esp-photo .esp-x{position:absolute; top:6px; right:6px}

/* ---------- les remarques reçues ---------- */
.esp-rem{
  background:var(--blanc); border:1px solid var(--filet-2); border-left:3px solid #C0392B;
  padding:1rem 1.2rem; margin-bottom:12px;
}
.esp-rem.repondu{border-left-color:#1FAD52}
.esp-rem-tete{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.esp-rem-tete b{font-size:.94rem; color:var(--encre)}
.esp-rem-quand{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--ardoise)}
.esp-rem p{margin:.5rem 0 0; font-size:.94rem; color:var(--texte-2); line-height:1.55}
.esp-rem-reponse{
  margin-top:.8rem; padding:.7rem .9rem; background:var(--craie);
  border-left:2px solid var(--sanki); font-size:.9rem; color:var(--texte-2);
}
.esp-rem form{display:flex; gap:10px; margin-top:.9rem; flex-wrap:wrap}
.esp-rem form input{
  flex:1 1 240px; min-width:0; padding:10px 12px; border:1px solid var(--filet);
  background:var(--craie); font-family:inherit; font-size:.92rem; color:var(--encre);
}
.esp-rem form input:focus{outline:none; border-color:var(--sanki); background:#fff}

.esp-vide{
  border:1px dashed var(--filet); padding:1.6rem; text-align:center;
  color:var(--ardoise); font-size:.9rem;
}

.esp-msg{padding:.8rem 1rem; font-size:.9rem; margin-bottom:1rem}
.esp-msg.ok{background:rgba(31,173,82,.1); border-left:3px solid #1FAD52; color:#0F6B31}
.esp-msg.non{background:#FDF6F5; border-left:3px solid #C0392B; color:#9E2B20}

/* =========================================================================
   32. Le pilotage des etapes
   Chaque marche ecrit ses propres etapes. Un gros bouton les fait avancer,
   comme le chrono de TMROLZ, et le partenaire le voit dans la minute.
   ========================================================================= */

.pilote-etat{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardoise); margin:0 0 .7rem;
}

.pilote{
  display:block; width:100%; margin:1rem 0 .6rem; padding:1.1rem 1.4rem;
  border:0; border-radius:2px; cursor:pointer; text-align:left;
  background:var(--sanki); color:#fff;
  transition:background .16s, transform .12s, box-shadow .16s;
  box-shadow:0 2px 0 var(--sanki-sombre);
}
.pilote:hover{background:#1A57BC}
.pilote:active{transform:translateY(2px); box-shadow:none}
.pilote:disabled{background:var(--ardoise); box-shadow:none; cursor:default; opacity:.7}
.pilote-titre{
  display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; line-height:1;
}
.pilote-titre::after{content:" →"}
.pilote-sous{
  display:block; font-family:var(--display); font-size:1.32rem; line-height:1.2;
  margin-top:.45rem; color:#fff;
}
.pilote-retour{
  border:0; background:none; cursor:pointer; padding:.2rem 0 1rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardoise);
}
.pilote-retour:hover:not(:disabled){color:var(--encre); text-decoration:underline}
.pilote-retour:disabled{opacity:.4; cursor:default}

/* ---------- cote partenaire ---------- */
.chrono li.encours .chrono-pastille{
  border-color:var(--sanki); background:var(--blanc);
  box-shadow:0 0 0 3px rgba(27,98,214,.18);
  animation:pouls 2.2s ease-in-out infinite;
}
.chrono li.encours b{color:var(--encre)}
.chrono-date.encours{color:var(--sanki)}
@keyframes pouls{
  0%,100%{box-shadow:0 0 0 3px rgba(27,98,214,.18)}
  50%    {box-shadow:0 0 0 7px rgba(27,98,214,.06)}
}
@media (prefers-reduced-motion:reduce){
  .chrono li.encours .chrono-pastille{animation:none}
}

.direct{
  background:rgba(27,98,214,.08); border-left:3px solid var(--sanki);
  color:var(--encre); font-size:.9rem; padding:.75rem 1rem; margin-bottom:1.4rem;
}

/* =========================================================================
   33. Les étapes en tuiles
   On attrape une tuile par sa poignée, on la glisse à sa place, on corrige
   son intitulé sans quitter la tuile. Les flèches restent pour le tactile,
   où le glisser-déposer du navigateur ne fonctionne pas.
   ========================================================================= */

.tuiles-aide{
  font-size:.82rem; color:var(--ardoise); margin:.2rem 0 1.1rem; line-height:1.5;
}
.tuiles{display:flex; flex-direction:column; gap:9px}

.tuile{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--blanc); border:1px solid var(--filet-2); border-left:3px solid var(--filet);
  padding:.85rem .9rem; border-radius:2px;
  transition:border-color .16s, box-shadow .16s, opacity .16s, transform .12s;
}
.tuile:hover{box-shadow:var(--ombre-s)}
.tuile.fait{border-left-color:var(--sanki); background:#FBFCFE}
.tuile.encours{border-left-color:var(--sanki); box-shadow:0 0 0 2px rgba(27,98,214,.12)}
.tuile.glisse{opacity:.45; transform:scale(.99)}
.tuile.avant{box-shadow:0 -3px 0 var(--sanki)}
.tuile.apres{box-shadow:0 3px 0 var(--sanki)}

.tuile-prise{
  flex:none; width:18px; height:26px; cursor:grab; color:var(--filet);
  display:flex; align-items:center; justify-content:center; touch-action:none;
}
.tuile-prise svg{width:13px; height:13px}
.tuile:hover .tuile-prise{color:var(--ardoise)}
.tuile.glisse .tuile-prise{cursor:grabbing}

.tuile-rang{
  flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%;
  border:1.5px solid var(--filet); background:var(--blanc);
  font-family:var(--mono); font-size:.62rem; color:var(--ardoise);
  display:flex; align-items:center; justify-content:center;
}
.tuile.fait .tuile-rang{border-color:var(--sanki); background:var(--sanki); color:#fff}
.tuile.encours .tuile-rang{
  border-color:var(--sanki); color:var(--sanki); font-weight:600;
  box-shadow:0 0 0 3px rgba(27,98,214,.14);
}

.tuile-corps{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.tuile-titre,.tuile-detail{
  width:100%; border:1px solid transparent; background:transparent;
  font-family:inherit; color:var(--encre); padding:3px 6px; border-radius:2px;
  transition:border-color .14s, background .14s;
}
.tuile-titre{font-size:.98rem; font-weight:600}
.tuile-detail{font-size:.84rem; color:var(--texte-2)}
.tuile-titre:hover,.tuile-detail:hover{border-color:var(--filet-2); background:var(--craie)}
.tuile-titre:focus,.tuile-detail:focus{
  outline:none; border-color:var(--sanki); background:#fff;
  box-shadow:0 0 0 3px rgba(27,98,214,.12);
}
.tuile.fait .tuile-titre{color:var(--ardoise)}
.tuile-titre.enregistre,.tuile-detail.enregistre{opacity:.55}
.tuile-titre.sauve,.tuile-detail.sauve{border-color:#1FAD52; background:rgba(31,173,82,.07)}
.tuile-quand{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ardoise); padding-left:6px;
}
.tuile-quand.encours{color:var(--sanki)}

.tuile-outils{display:flex; gap:4px; flex:none}
@media (max-width:560px){
  .tuile{flex-wrap:wrap}
  .tuile-corps{flex-basis:100%; order:3}
  .tuile-outils{margin-left:auto}
  .tuile-prise{display:none}
  .tuiles-aide{display:none}
}

/* =========================================================================
   34. Accueillir par l'image
   On voit ce que nous faisons dès l'arrivée, sans toucher à la molette.
   ========================================================================= */

/* ---------- la mosaïque de l'accueil ---------- */
.hero-grid{min-height:min(calc(100vh - 112px), 820px)}

/* Le tricycle est une image en largeur : il prend toute la rangee du haut,
   la moto et les pneumatiques se partagent celle du bas. */
.hero-mosaique{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.18fr 1fr;
  gap:10px; align-content:center;
  padding:clamp(1.2rem,.8rem + 2vw,2.4rem) clamp(1.2rem,.8rem + 2vw,2.4rem)
          clamp(1.2rem,.8rem + 2vw,2.4rem) 0;
  height:100%;
}
.hm-case{
  position:relative; background:#fff; overflow:hidden; min-height:0;
  box-shadow:0 2px 14px rgba(0,0,0,.22);
}
.hm-grande{grid-column:1 / 3}
.hm-case img{
  width:100%; height:100%; object-fit:contain; display:block;
  padding:clamp(8px,1.4vw,18px) clamp(8px,1.4vw,18px) 30px;
}
.hm-nom{
  position:absolute; left:0; right:0; bottom:0; padding:7px 10px;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acier); background:linear-gradient(0deg,#fff 62%,rgba(255,255,255,0));
  text-align:center;
}
@media (max-width:980px){
  .hero-grid{min-height:0}
  .hero-mosaique{grid-template-rows:auto auto; height:auto; padding:0 26px 2.4rem}
  .hm-case{aspect-ratio:4/3}
  .hm-grande{aspect-ratio:16/10}
}

/* ---------- l'en-tête à deux images, sur la page transport ---------- */
.tete-image .wrap.tete-duo{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(1.6rem,1rem + 3vw,3.4rem); align-items:center;
  min-height:min(calc(100vh - 112px), 760px);
}
.tete-txt{min-width:0}
.tete-duo-images{
  display:grid; grid-template-rows:1fr 1fr; gap:12px;
  height:clamp(300px, 56vh, 520px);
}
.td-case{position:relative; margin:0; overflow:hidden; min-height:0; background:var(--encre-2)}
.td-case img{width:100%; height:100%; object-fit:cover; display:block}
.td-case figcaption{
  position:absolute; left:0; bottom:0; padding:8px 13px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(13,23,38,.62); backdrop-filter:blur(4px);
  border-left:2px solid var(--sanki-clair);
}
@media (max-width:900px){
  .tete-image .wrap.tete-duo{grid-template-columns:1fr; min-height:0}
  .tete-duo-images{grid-template-rows:none; grid-template-columns:1fr 1fr; height:clamp(160px,38vw,260px)}
}

/* =========================================================================
   35. La porte du suivi, en plein écran
   Tout ce qu'il faut pour entrer tient dans le premier écran : le champ,
   les trois repères, et de quoi nous joindre. Pas de molette.
   ========================================================================= */

.porte{
  background:var(--craie); display:flex; align-items:center;
  min-height:calc(100vh - 112px);
  padding-block:clamp(1rem,2.4vh,2.6rem);
}
.porte-dedans{
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(.9rem,2.2vh,1.8rem); width:min(var(--wrap), calc(100% - 40px));
}
.porte-txt{max-width:820px; margin-inline:auto; width:100%; text-align:center}
.porte h1{
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem); color:var(--encre);
  margin:0 0 .5rem; letter-spacing:-.02em;
}
.porte-intro{
  color:var(--texte-2); font-size:clamp(.95rem,.9rem + .2vw,1.06rem);
  line-height:1.6; margin:0 auto clamp(1rem,2.4vh,1.8rem); max-width:62ch;
}
.porte .acces-carte{max-width:720px; padding:clamp(1.2rem,1rem + 1.4vh,2rem)}
.porte .acces-carte label{
  font-size:clamp(1.1rem,1rem + .6vw,1.5rem); margin:0 0 .8rem; text-align:center;
}
.porte .acces-aide{text-align:center; margin-top:.9rem}
.porte .acces-trois{margin-top:0; max-width:1040px}
.porte-pied{
  text-align:center; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ardoise); margin:0; line-height:2;
}
.porte-pied a{color:var(--acier); text-decoration:none; border-bottom:1px solid var(--filet-2)}
.porte-pied a:hover{color:var(--sanki); border-bottom-color:var(--sanki)}
.porte-pied span{margin:0 8px; color:var(--filet)}

.fil-clair{color:var(--ardoise); justify-content:center}
.fil-clair a{color:var(--ardoise)}
.fil-clair a:hover{color:var(--sanki)}
.fil-clair span{color:var(--filet)}

/* Le premier écran se suffit : ni pied de page, ni molette, ni bouton flottant.
   Sous 700 px de haut, on rend la molette : mieux vaut faire défiler que couper. */
body.porte-plein .site-footer,
body.porte-plein .wa-flottant{display:none}
/* On ne coupe la molette que la ou tout tient vraiment dans l'ecran.
   Sur telephone, les trois reperes passent sous la ligne de flottaison :
   mieux vaut faire defiler que rogner. */
@media (min-width:981px) and (min-height:700px){
  html.porte-plein, body.porte-plein{overflow:hidden; height:100%}
}
@media (max-width:980px){
  .porte{min-height:0; padding-block:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
  body.porte-plein .site-footer{display:block}
}

/* =========================================================================
   36. Documents administratifs et fiscaux
   Le même code que le suivi les ouvre. Un clic, le fichier descend.
   ========================================================================= */

.docs{
  margin-top:clamp(2.4rem,2rem + 1.6vw,3.6rem);
  padding-top:clamp(1.8rem,1.4rem + 1.2vw,2.6rem);
  border-top:1px solid var(--filet);
}
.docs-grille{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px;
}
.doc{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:var(--blanc); border:1px solid var(--filet-2); border-left:3px solid var(--sanki);
  padding:1rem 1.1rem; font-family:inherit; color:inherit;
  transition:box-shadow .16s, transform .16s;
}
.doc:hover{box-shadow:var(--ombre-m); transform:translateY(-1px)}
.doc:disabled{opacity:.6; cursor:default; transform:none}
.doc-icone{
  flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--filet-2); background:var(--craie); color:var(--sanki);
}
.doc-icone svg{width:18px; height:18px}
.doc-txt{flex:1; min-width:0}
.doc-txt b{display:block; font-size:.98rem; color:var(--encre); line-height:1.3}
.doc-cat{
  display:inline-block; margin-top:.25rem; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sanki);
  border:1px solid rgba(27,98,214,.3); padding:2px 6px;
}
.doc-meta{display:block; font-size:.78rem; color:var(--ardoise); margin-top:.3rem}
.doc-fleche{
  flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  color:var(--ardoise); font-family:var(--mono);
}
.doc-fleche svg{width:17px; height:17px}
.doc:hover .doc-fleche{color:var(--sanki)}

.docs-admin{margin-top:1.2rem}
.pied-docs{font-weight:600}

/* Le premier ecran de l'accueil doit tenir en entier sur un portable :
   on resserre le pave de texte et on bride la hauteur du heros. */
.hero-grid{min-height:min(calc(100vh - 106px), 760px)}
.hero-texte{
  padding-top:clamp(1.4rem,1rem + 1.6vw,2.6rem);
  padding-bottom:clamp(1.4rem,1rem + 1.6vw,2.6rem);
}
.hero h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.5rem); margin-bottom:.28em}
.hero .lead{margin-bottom:1.5rem; font-size:clamp(.95rem,.9rem + .25vw,1.08rem)}
.hero .eyebrow{margin-bottom:.8rem}
.hero-mosaique{padding-block:clamp(.9rem,.6rem + 1.4vw,1.8rem)}
@media (max-width:980px){
  .hero-grid{min-height:0}
  .hero-texte{padding-top:clamp(2rem,1.6rem + 2vw,3rem)}
}

/* Les images ont leur propre hauteur naturelle : sans hauteur ferme sur la
   grille, elles poussaient le heros a 900 px et le bas passait sous l'ecran.
   On fixe la hauteur, les images s'y rangent. */
@media (min-width:981px){
  .hero-grid{
    height:max(540px, min(calc(100vh - 106px), 760px));
    min-height:0;
  }
  .hero-mosaique{height:100%; min-height:0}
  .hm-case{min-height:0; overflow:hidden}
}

/* =========================================================================
   37. Voir un document, clore un marché
   L'œil regarde sur place, la flèche télécharge. Un marché clos le dit
   posément, au lieu de répondre comme à une faute de frappe.
   ========================================================================= */

/* ---------- la carte d'un document ---------- */
.doc{
  display:flex; align-items:stretch; gap:0; padding:0; overflow:hidden;
}
.doc-ouvre{
  flex:1; min-width:0; display:flex; align-items:center; gap:13px; cursor:pointer;
  background:none; border:0; padding:1rem .6rem 1rem 1.1rem; text-align:left;
  font-family:inherit; color:inherit;
}
.doc-actions{
  display:flex; align-items:center; gap:4px; padding:0 .8rem 0 .4rem;
  border-left:1px solid var(--filet-2);
}
.doc-b{
  width:34px; height:34px; border:1px solid transparent; background:none; cursor:pointer;
  color:var(--ardoise); border-radius:2px; display:flex; align-items:center; justify-content:center;
  transition:color .14s, background .14s, border-color .14s;
}
.doc-b svg{width:18px; height:18px}
.doc-b:hover{color:var(--sanki); background:var(--craie); border-color:var(--filet-2)}
.doc-b:disabled{opacity:.45; cursor:default}
.doc-occupe{opacity:.7}
@media (max-width:420px){
  .doc-ouvre{padding-right:.3rem}
  .doc-actions{padding-right:.5rem}
}

/* ---------- le liseur ---------- */
body.visio-ouverte{overflow:hidden}
.visio{
  position:fixed; inset:0; z-index:400; background:rgba(13,23,38,.82);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px); backdrop-filter:blur(3px);
}
.visio-boite{
  background:var(--blanc); width:min(1100px,100%); height:min(88vh,100%);
  display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.visio-tete{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:.85rem 1rem .85rem 1.2rem; border-bottom:1px solid var(--filet-2); flex-wrap:wrap;
}
.visio-tete b{
  font-family:var(--display); font-size:1.15rem; color:var(--encre);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visio-outils{display:flex; align-items:center; gap:8px; flex:none}
.visio-x{
  width:34px; height:34px; border:1px solid var(--filet-2); background:var(--blanc);
  color:var(--texte-2); font-size:1.4rem; line-height:1; cursor:pointer; border-radius:2px;
}
.visio-x:hover{background:var(--craie); color:var(--encre)}
.visio-corps{flex:1; min-height:0; background:var(--craie); display:flex}
.visio-corps iframe{width:100%; height:100%; border:0; background:#fff}
.visio-corps img{width:100%; height:100%; object-fit:contain; padding:14px}
.visio-note{
  margin:0; padding:.7rem 1.2rem; font-size:.8rem; color:var(--ardoise);
  border-top:1px solid var(--filet-2); background:var(--blanc);
}
@media (max-width:620px){
  .visio-boite{height:100%; width:100%}
  .visio{padding:0}
  .visio-tete b{flex-basis:100%}
}

/* ---------- le code et le lien, côté console ---------- */
.esp-lien{align-items:flex-start}
.esp-lien-url{
  display:block; font-family:var(--mono); font-size:.68rem; color:var(--sur-encre-2);
  margin-top:.45rem; word-break:break-all;
}
.esp-lien-btn{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-items:center}
.esp-lien.clos{background:#2A1614; border-left:3px solid #C0392B}
@media (max-width:640px){ .esp-lien-btn{margin-left:0} }

.esp-part{
  border-top:1px solid var(--filet-2); margin-top:1.4rem; padding-top:1.3rem;
}
.esp-part h4{
  font-family:var(--display); font-size:1.08rem; color:var(--encre); margin-bottom:.3rem;
}
.esp-ligne-form{display:flex; gap:9px; flex-wrap:wrap}
.esp-ligne-form input{
  flex:1 1 220px; min-width:0; padding:11px 13px; border:1.5px solid var(--filet);
  background:var(--craie); font-family:var(--mono); font-size:.92rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--encre);
}
.esp-ligne-form input:focus{
  outline:none; border-color:var(--sanki); background:#fff;
  box-shadow:0 0 0 3px rgba(27,98,214,.12);
}
.btn-clore{
  background:#C0392B; color:#fff; border:1px solid #C0392B;
}
.btn-clore:hover{background:#A5301F; border-color:#A5301F; color:#fff}

.esp-carte.ferme{border-left-color:#C0392B}
.esp-pilule.ferme{background:#C0392B; border-color:#C0392B; color:#fff}

/* ---------- l'avis de clôture, côté partenaire ---------- */
.porte-clos{
  max-width:720px; margin:1.2rem auto 0; text-align:left;
  background:var(--blanc); border:1px solid var(--filet-2); border-left:3px solid #C0392B;
  padding:1.1rem 1.3rem; box-shadow:var(--ombre-s);
}
.porte-clos b{
  display:block; font-family:var(--display); font-size:1.24rem; color:#9E2B20; margin-bottom:.35rem;
}
.porte-clos span{display:block; color:var(--texte-2); font-size:.94rem; line-height:1.6}

/* =========================================================================
   38. Le portrait de la direction
   Un visage avant les mots : c'est lui qui suit les dossiers.
   ========================================================================= */
.dg{
  display:flex; align-items:center; gap:clamp(14px,1rem + 1vw,22px);
  margin:1.4rem 0 1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--filet-2);
}
.dg-photo{
  width:clamp(92px,7rem + 1vw,124px); height:clamp(92px,7rem + 1vw,124px);
  flex:none; object-fit:cover; border-radius:50%;
  border:3px solid var(--blanc); box-shadow:0 2px 14px rgba(13,23,38,.18);
}
.dg-txt{display:flex; flex-direction:column; min-width:0}
.dg-txt b{
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .5vw,1.45rem);
  color:var(--encre); line-height:1.2; font-weight:400;
}
.dg-role{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sanki); margin-top:.4rem;
}
.dg-note{font-size:.88rem; color:var(--texte-2); line-height:1.5; margin-top:.5rem}
.bg-encre .dg,.bg-encre-2 .dg{border-bottom-color:var(--filet-clair)}
.bg-encre .dg-txt b,.bg-encre-2 .dg-txt b{color:#fff}
.bg-encre .dg-note,.bg-encre-2 .dg-note{color:var(--sur-encre-2)}
@media (max-width:440px){
  .dg{flex-direction:column; align-items:flex-start; text-align:left}
}

/* =========================================================================
   39. Le bloc bilingue et le ruban, rendus autonomes
   Ils avaient été dessinés pour un fond sombre : texte clair, filets clairs,
   fond translucide. Quand la section de traduction est passée en blanc lors
   du passage aux trois métiers, ils se sont retrouvés blanc sur blanc et le
   texte qui s'écrit est devenu illisible. Ils portent désormais leur propre
   fond sombre, et fonctionnent sur n'importe quelle section.
   ========================================================================= */

.bilingue{
  background:var(--encre);
  border-color:rgba(231,237,244,.18);
  backdrop-filter:none;
  box-shadow:0 2px 8px rgba(13,23,38,.10), 0 18px 44px rgba(13,23,38,.14);
}
.bilingue::before{background:rgba(231,237,244,.18)}
.bl-pied{border-top-color:rgba(231,237,244,.18)}
.bl-point{background:rgba(231,237,244,.22)}
@media (max-width:560px){
  .bl-col--cible{border-top-color:rgba(231,237,244,.18)}
}

/* La légende du code couleur, elle, reste sur le fond clair de la section :
   c'est du texte de page, il lui faut une encre de page. */
.bg-blanc .bilingue-note p,
.bg-craie .bilingue-note p{color:var(--texte-2)}
.bg-blanc .bilingue-note .cle,
.bg-craie .bilingue-note .cle{color:var(--encre)}
.bg-blanc .bilingue-note .pastille.lang-nat,
.bg-craie .bilingue-note .pastille.lang-nat{background:var(--acier)}
.bg-blanc .bilingue-note .cle .lang-nat,
.bg-craie .bilingue-note .cle .lang-nat{color:var(--acier)}

/* Le ruban de langues vit hors section, à même la page : il porte son fond. */
.ruban{
  background:var(--encre);
  border-top-color:rgba(231,237,244,.14);
  border-bottom-color:rgba(231,237,244,.14);
}