/* ------------------------------------------------------------------
   ADA's Group — design system V0.1
   Plan d'ingenieur. Papier, encre, acier. Zero couleur d'accent.
   ------------------------------------------------------------------ */

:root{
  /* Couleurs */
  --papier:      #F2F3F5;
  --blanc:       #FFFFFF;
  --encre:       #0A0B0C;
  --acier-700:   #3D4348;
  --acier-400:   #8A9299;
  --acier-200:   #C9CFD4;
  --acier-100:   #E3E6E9;

  /* Typo */
  --titre: "Archivo", "Inter Tight", Helvetica, Arial, sans-serif;
  --corps: "Inter", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --marque:"Playfair Display", Georgia, serif;

  /* Grille 8px */
  --u: 8px;
  --gouttiere: 24px;
  --max: 1160px;
}

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

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

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--corps);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Primitives ---------- */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gouttiere);
}

.mono{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--acier-400);
}

.rule{ height:1px; background:var(--acier-200); border:0; margin:0; }

/* La regle graduee : mesure, tolerance, controle */
.graduee{
  height:16px;
  background-image:repeating-linear-gradient(
    to right,
    var(--acier-200) 0 1px,
    transparent 1px 16px
  );
  background-position:left bottom;
  background-repeat:repeat-x;
  border-bottom:1px solid var(--acier-200);
}

/* Reperes de coin : signature du systeme */
.coins{ position:relative; }
.coins::before,.coins::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  pointer-events:none;
}
.coins::before{
  top:-1px; left:-1px;
  border-top:1px solid var(--acier-200);
  border-left:1px solid var(--acier-200);
}
.coins::after{
  bottom:-1px; right:-1px;
  border-bottom:1px solid var(--acier-200);
  border-right:1px solid var(--acier-200);
}

/* ---------- Boutons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
  border:1px solid var(--encre);
  border-radius:4px;
  background:var(--encre);
  color:var(--papier);
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ opacity:.82; }

.btn--ligne{
  background:transparent;
  color:var(--encre);
  border-color:var(--acier-200);
}
.btn--ligne:hover{ border-color:var(--encre); opacity:1; }

/* ---------- En-tete ---------- */

.entete{
  position:sticky; top:0; z-index:50;
  background:rgba(242,243,245,.92);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--acier-200);
}
.entete__in{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--acier-700); text-decoration:none;
}
.nav a:hover{ color:var(--encre); }
.nav .btn{ padding:10px 16px; }

/* ---------- Marque ---------- */

.marque{ text-decoration:none; display:block; line-height:1; }
.marque__img{ height:38px; width:auto; }
.marque__img--pied{ height:56px; }

/* ---------- Sections ---------- */

.section{ padding:96px 0; border-top:1px solid var(--acier-200); }
.section:first-of-type{ border-top:0; }

.section__tag{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:40px;
}
.section__tag span:first-child{ color:var(--encre); }

h1,h2,h3{
  font-family:var(--titre);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.95;
  margin:0;
}

/* ---------- Hero ---------- */

.hero{ padding:112px 0 0; }
.hero h1{
  font-size:clamp(40px,7vw,96px);
  max-width:14ch;
}
.hero__sous{
  margin:28px 0 0;
  font-size:20px;
  line-height:1.5;
  color:var(--acier-700);
  max-width:56ch;
}
.hero__actions{ margin-top:40px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__graduee{ margin-top:96px; }

/* ---------- Differenciants ---------- */

.triptyque{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--acier-200);
  border:1px solid var(--acier-200);
  border-radius:4px;
  overflow:hidden;
}
.bloc{ background:var(--blanc); padding:40px 32px; }
.bloc__num{ margin-bottom:24px; }
.bloc h3{ font-size:20px; line-height:1.15; }
.bloc p{ margin:14px 0 0; color:var(--acier-700); font-size:15px; }

.preuve{
  margin-top:1px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--acier-200);
  border:1px solid var(--acier-200);
  border-top:0;
  border-radius:0 0 4px 4px;
  overflow:hidden;
}
.preuve div{
  background:var(--encre);
  color:var(--papier);
  padding:20px 32px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
}
.preuve strong{ color:var(--blanc); font-weight:500; }

/* ---------- QUI ? ---------- */

.qui{ display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start; }

.portrait{
  border-radius:4px;
  background:var(--acier-100);
  aspect-ratio:4/5;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait__initiales{
  font-family:var(--marque);
  font-size:64px;
  color:var(--encre);
}

.qui h2{ font-size:28px; }
.qui__role{ margin-top:10px; }
.qui p{ color:var(--acier-700); max-width:62ch; font-size:16px; }
.qui h2{ letter-spacing:-.02em; }

.vignettes{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
.vignette{
  background:var(--blanc);
  border:1px solid var(--acier-200);
  border-radius:4px;
  padding:24px;
}
.vignette h3{ font-size:16px; letter-spacing:-.01em; }
.vignette p{ font-size:14px; margin:8px 0 18px; }

/* ---------- Offres ---------- */

.offres{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.carte{
  background:var(--blanc);
  border:1px solid var(--acier-200);
  border-radius:4px;
  padding:32px;
  display:flex; flex-direction:column;
}
.carte__nom{
  font-family:var(--marque);
  font-size:22px;
  margin:12px 0 0;
}
.carte h3{
  font-size:20px;
  margin-top:20px;
  line-height:1.2;
}
.carte p{ color:var(--acier-700); font-size:15px; }
.carte__pied{ margin-top:auto; padding-top:28px; }
.carte__outils{ margin-top:16px; }

.intro{ font-size:20px; color:var(--acier-700); max-width:52ch; margin:0 0 40px; }

/* ---------- CTA ---------- */

.cta{
  background:var(--encre);
  color:var(--papier);
  border-radius:4px;
  padding:64px 48px;
  text-align:center;
}
.cta h2{ font-size:clamp(28px,4vw,40px); color:var(--blanc); }
.cta p{ color:var(--acier-200); max-width:52ch; margin:20px auto 36px; }
.cta .btn{
  background:var(--papier);
  color:var(--encre);
  border-color:var(--papier);
}

/* ---------- Pied ---------- */

.pied{ border-top:1px solid var(--acier-200); padding:56px 0 40px; }
.pied__grille{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.pied h4{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--acier-400); margin:0 0 16px; }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:10px; font-size:14px; }
.pied a{ text-decoration:none; color:var(--acier-700); }
.pied a:hover{ color:var(--encre); }
.pied__bas{
  margin-top:48px; padding-top:20px;
  border-top:1px solid var(--acier-200);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ---------- Blog ---------- */

.tete-page{ padding:88px 0 56px; }
.tete-page h1{ font-size:clamp(36px,6vw,64px); max-width:20ch; }
.tete-page p{ font-size:20px; color:var(--acier-700); max-width:56ch; margin-top:24px; }

.liste-articles{ display:grid; gap:1px; background:var(--acier-200); border-top:1px solid var(--acier-200); border-bottom:1px solid var(--acier-200); }
.ligne-article{
  background:var(--papier);
  display:grid;
  grid-template-columns:160px 1fr 140px;
  gap:24px;
  padding:28px 0;
  text-decoration:none;
  align-items:baseline;
}
.ligne-article:hover{ background:var(--blanc); }
.ligne-article h2{ font-size:22px; line-height:1.2; }
.ligne-article p{ margin:10px 0 0; color:var(--acier-700); font-size:15px; }

.vide{
  border:1px dashed var(--acier-200);
  border-radius:4px;
  padding:56px 32px;
  text-align:center;
  color:var(--acier-400);
  background:var(--blanc);
}

/* Article */
.article{ max-width:720px; margin:0 auto; }
.article__meta{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.article h1{ font-size:clamp(32px,5vw,56px); }
.article__chapo{ font-size:20px; color:var(--acier-700); margin:28px 0 0; }
.article__corps{ margin-top:48px; font-size:17px; line-height:1.7; }
.article__corps h2{ font-size:26px; margin:48px 0 16px; }
.article__corps h3{ font-size:19px; margin:36px 0 12px; }
.article__corps p{ margin:0 0 20px; }
.article__corps ul,.article__corps ol{ margin:0 0 20px; padding-left:22px; }
.article__corps li{ margin-bottom:8px; }
.article__corps blockquote{
  margin:32px 0; padding:20px 24px;
  border-left:2px solid var(--encre);
  background:var(--blanc);
  color:var(--acier-700);
}
.article__corps code{ font-family:var(--mono); font-size:14px; background:var(--acier-100); padding:2px 6px; border-radius:2px; }

/* Capture email / ressource */
.ressource{
  margin:56px 0;
  background:var(--blanc);
  border:1px solid var(--acier-200);
  border-radius:4px;
  padding:36px;
}
.ressource h3{ font-size:22px; margin:12px 0 0; }
.ressource p{ color:var(--acier-700); font-size:15px; margin:12px 0 24px; }
.champ{ display:flex; gap:10px; flex-wrap:wrap; }
.champ input[type=email]{
  flex:1 1 260px;
  font-family:var(--corps); font-size:15px;
  padding:14px 16px;
  border:1px solid var(--acier-200);
  border-radius:4px;
  background:var(--papier);
  color:var(--encre);
}
.champ input[type=email]:focus{ outline:none; border-color:var(--encre); }
.champ button{ cursor:pointer; }
.consentement{ margin-top:14px; font-size:12px; color:var(--acier-400); }
.cachette{ position:absolute; left:-9999px; }

/* Fin d'article */
.fin-article{
  margin:64px 0 0; padding:36px;
  border:1px solid var(--acier-200);
  border-radius:4px;
  background:var(--blanc);
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.fin-article p{ margin:8px 0 0; color:var(--acier-700); font-size:15px; max-width:52ch; }

/* ---------- Pages simples ---------- */
.texte{ max-width:720px; }
.texte h2{ font-size:22px; margin:40px 0 12px; }
.texte p{ color:var(--acier-700); }
.texte dl{ margin:0; }
.texte dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acier-400); margin-top:20px; }
.texte dd{ margin:4px 0 0; }

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .triptyque,.preuve{ grid-template-columns:1fr; }
  .preuve{ border-radius:0 0 4px 4px; }
  .qui{ grid-template-columns:1fr; gap:32px; }
  .portrait{ max-width:200px; }
  .offres{ grid-template-columns:1fr; }
  .pied__grille{ grid-template-columns:1fr; }
  .ligne-article{ grid-template-columns:1fr; gap:8px; }
  .fin-article{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero{ padding:72px 0 0; }
  .hero__graduee{ margin-top:64px; }
  .nav{ gap:16px; }
  .nav a:not(.btn){ display:none; }
}

@media (max-width:640px){
  .vignettes{ grid-template-columns:1fr; }
  .hero__sous{ font-size:18px; }
  .intro{ font-size:18px; }
  .cta{ padding:48px 24px; }
  .carte{ padding:24px; }
  .bloc{ padding:32px 24px; }
  .ressource{ padding:24px; }
}