/* ============================================================================
   MANUFACTURE — IDENTITÉ VISUELLE
   Direction posée par Marc le 04/08/2026, qui remplace celle de l'atelier.
   ----------------------------------------------------------------------------
   CE QU'IL A DEMANDÉ, MOT POUR MOT : « très sobre, premium, proche de l'univers
   d'Apple, Notion ou Linear, mais avec une dimension plus institutionnelle. Le
   visiteur doit ressentir : simplicité, maîtrise, confiance, intelligence,
   organisation. Jamais : complexité, IA partout, technique. »

   CE QUE CELA IMPOSE, ET QUI SE VOIT DANS CE FICHIER :
   · du blanc, du gris très clair, UN bleu profond, UNE seule couleur d'action ;
   · les couleurs sémantiques (vert réussi, orange attention, rouge blocage) ne
     servent QU'À CELA — elles ne décorent jamais ;
   · de l'espace. Le luxe visuel ne vient pas des effets, il vient de ce qu'on
     ne met pas ;
   · aucune ombre portée molle, aucun dégradé, aucun coin très arrondi : ce sont
     les trois marqueurs du gabarit d'IA générique.

   AUCUNE POLICE EXTERNE : une politique de sécurité bloque les requêtes vers
   l'extérieur. Le caractère vient des graisses, des interlettrages et du rythme.
   ============================================================================ */

:root{
  --encre:#0B1B2B;          /* presque noir, légèrement bleuté */
  --bleu:#0E3A5C;           /* le bleu profond : structure et titres */
  --bleu-clair:#EAF0F5;
  --action:#0E7C66;         /* UNE seule couleur d'action, émeraude */
  --action-fonce:#0A5F4E;
  --gris:#5F6B78;
  --gris-clair:#F6F8FA;
  --trait:#E3E8ED;
  --trait-fort:#CBD4DC;
  --succes:#157347;
  --attention:#B45309;
  --blocage:#B42318;
  --u:8px;                  /* l'unité : tout espacement en est un multiple */
  --r:6px;                  /* rayon discret : présent, jamais bombé */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:#fff;
  color:var(--encre);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.dans{max-width:1080px;margin:0 auto;padding:0 calc(var(--u)*3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-variant-numeric:tabular-nums}

/* ── Navigation ───────────────────────────────────────────────────────────
   Discrète et collante. Le menu n'annonce pas des rubriques de brochure
   (Produits / Solutions / Services) : il donne accès, et c'est tout. */
.nav{border-bottom:1px solid var(--trait);background:rgba(255,255,255,.92);
     backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:30}
.nav-dans{display:flex;align-items:center;gap:calc(var(--u)*4);flex-wrap:wrap;
          padding:calc(var(--u)*2) 0}
.nav-marque{font-weight:700;letter-spacing:-.01em;font-size:17px;color:var(--encre);
            text-decoration:none;white-space:nowrap}
.nav ul{list-style:none;display:flex;gap:calc(var(--u)*3.5);margin:0;padding:0;flex-wrap:wrap}
.nav a{font-size:15px;color:var(--gris);text-decoration:none;padding:calc(var(--u)*.5) 0;
       border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--encre)}
.nav a.actif{color:var(--encre);font-weight:600;border-bottom-color:var(--action)}
.nav a:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--action);outline-offset:3px;border-radius:2px}

/* ── La promesse ─────────────────────────────────────────────────────────── */
.promesse{padding:calc(var(--u)*13) 0 calc(var(--u)*9)}
h1{font-size:clamp(38px,5.4vw,60px);line-height:1.06;letter-spacing:-.032em;
   font-weight:700;margin:0 0 calc(var(--u)*3);max-width:17em;color:var(--encre)}
h1 .fort{color:var(--bleu)}
.chapo{font-size:20px;line-height:1.55;color:var(--gris);margin:0;max-width:32em}
.rappel{display:inline-flex;align-items:center;gap:calc(var(--u));font-size:13px;
        font-weight:600;letter-spacing:.02em;color:var(--action);
        background:#EAF6F2;border:1px solid #CBE6DD;border-radius:100px;
        padding:calc(var(--u)*.75) calc(var(--u)*2);margin:0 0 calc(var(--u)*4)}

/* ── La question, et les cartes d'usage ──────────────────────────────────── */
.question{font-size:clamp(26px,3.2vw,34px);line-height:1.2;letter-spacing:-.022em;
          font-weight:700;margin:0 0 calc(var(--u)*1.5)}
.question-sous{color:var(--gris);margin:0 0 calc(var(--u)*5);max-width:38em}
.usages{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
        gap:calc(var(--u)*2.5);margin:0 0 calc(var(--u)*10);padding:0;list-style:none}
.usage{border:1px solid var(--trait);border-radius:var(--r);padding:calc(var(--u)*4);
       background:#fff;display:flex;flex-direction:column;
       transition:border-color .15s,transform .15s}
.usage:hover{border-color:var(--trait-fort);transform:translateY(-2px)}
.usage .marque{font-size:22px;color:var(--bleu);line-height:1;margin-bottom:calc(var(--u)*2.5)}
.usage h3{font-size:20px;letter-spacing:-.015em;font-weight:650;margin:0 0 calc(var(--u)*1.5)}
.usage .promesse-courte{font-size:16px;color:var(--encre);margin:0 0 calc(var(--u)*2);line-height:1.5}
.usage .detail{font-size:14px;color:var(--gris);margin:0 0 calc(var(--u)*3);line-height:1.55;flex:1}
.usage .lien{font-size:15px;font-weight:600;color:var(--action);text-decoration:none;
             display:inline-flex;align-items:center;gap:calc(var(--u))}
.usage .lien::after{content:"→";transition:transform .15s}
.usage:hover .lien::after{transform:translateX(3px)}
.usage .attente{font-size:13px;font-weight:600;color:var(--attention)}

/* ── Les organisations ───────────────────────────────────────────────────── */
h2{font-size:clamp(24px,2.8vw,30px);line-height:1.25;letter-spacing:-.02em;
   font-weight:700;margin:calc(var(--u)*11) 0 calc(var(--u)*1.5)}
.h2-sous{color:var(--gris);margin:0 0 calc(var(--u)*4);max-width:38em}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:calc(var(--u)*2.5);padding:0;list-style:none;margin:0}
.org{border:1px solid var(--trait);border-radius:var(--r);padding:calc(var(--u)*4);background:#fff}
.org.prete{border-color:#BFE0D3;background:linear-gradient(0deg,#FBFDFC,#FBFDFC)}
.org-tete{display:flex;justify-content:space-between;align-items:flex-start;
          gap:calc(var(--u)*2);margin-bottom:calc(var(--u)*2)}
.org h3{font-size:19px;font-weight:650;letter-spacing:-.015em;margin:0;line-height:1.3}
.org .finalite{font-size:15px;color:var(--gris);margin:0 0 calc(var(--u)*3);line-height:1.55}
.org .pour{font-size:13px;color:var(--gris);margin:0}

/* L'état : sémantique, jamais décoratif. */
.etat{font-size:12px;font-weight:650;letter-spacing:.02em;white-space:nowrap;
      padding:calc(var(--u)*.5) calc(var(--u)*1.5);border-radius:100px;border:1px solid}
.etat.prete{color:var(--succes);border-color:#BFE0D3;background:#F2FAF6}
.etat.etabli{color:var(--attention);border-color:#F0DCC0;background:#FDF8F1}

/* ── Ce qu'une organisation sait faire ───────────────────────────────────── */
.savoirs{list-style:none;padding:0;margin:calc(var(--u)*3) 0 0}
.savoirs li{display:flex;gap:calc(var(--u)*1.5);align-items:baseline;
            padding:calc(var(--u)*1.25) 0;border-top:1px solid var(--trait);font-size:15px}
.savoirs li:first-child{border-top:0}
.savoirs .oui{color:var(--succes);font-weight:700;flex:0 0 auto}
.savoirs .non{color:var(--attention);font-weight:700;flex:0 0 auto}
.savoirs .quoi{flex:1}
.savoirs .option{font-size:11px;font-weight:600;color:var(--gris);border:1px solid var(--trait-fort);
                 border-radius:3px;padding:1px 6px;margin-left:calc(var(--u))}

/* ── La preuve : présente, jamais au centre ──────────────────────────────── */
.preuve-bande{background:var(--gris-clair);border-top:1px solid var(--trait);
              border-bottom:1px solid var(--trait);margin-top:calc(var(--u)*12);
              padding:calc(var(--u)*8) 0}
.preuve-bande h2{margin-top:0}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
          gap:calc(var(--u)*3);margin:calc(var(--u)*4) 0 0;padding:0;list-style:none}
.chiffres li{border-left:2px solid var(--bleu);padding-left:calc(var(--u)*2)}
.chiffres b{display:block;font-size:32px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--bleu)}
.chiffres span{display:block;font-size:14px;color:var(--gris);margin-top:calc(var(--u))}
details.controle{margin-top:calc(var(--u)*4)}
details.controle>summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--action);list-style:none}
details.controle>summary::-webkit-details-marker{display:none}
details.controle>summary::before{content:"+ ";font-weight:700}
details.controle[open]>summary::before{content:"– "}
table.bons{width:100%;border-collapse:collapse;margin-top:calc(var(--u)*3);font-size:14px}
table.bons th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
              color:var(--gris);font-weight:650;padding:0 calc(var(--u)*2) calc(var(--u)) 0;
              border-bottom:1px solid var(--trait-fort)}
table.bons td{padding:calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*1.5) 0;
              border-bottom:1px solid var(--trait);vertical-align:top}
table.bons td.ref{white-space:nowrap;color:var(--bleu);font-weight:600}

/* ── Le procédé ──────────────────────────────────────────────────────────── */
ol.procede{list-style:none;counter-reset:e;padding:0;margin:calc(var(--u)*4) 0 0}
ol.procede li{counter-increment:e;display:flex;gap:calc(var(--u)*3);
              padding:calc(var(--u)*2.5) 0;border-top:1px solid var(--trait);
              align-items:baseline;font-size:16px}
ol.procede li::before{content:counter(e);font-weight:700;color:var(--bleu);
      font-size:14px;flex:0 0 24px;font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--trait);margin-top:calc(var(--u)*10);
       padding:calc(var(--u)*5) 0 calc(var(--u)*10);font-size:14px;color:var(--gris)}
footer a{color:var(--bleu)}
.alerte{border:1px solid #F0C9C4;background:#FDF4F3;color:var(--blocage);
        border-radius:var(--r);padding:calc(var(--u)*2) calc(var(--u)*2.5);margin:calc(var(--u)*3) 0}

@media (max-width:560px){
  .promesse{padding:calc(var(--u)*7) 0 calc(var(--u)*5)}
  body{font-size:16px}
}