/* ===========================================================
   NEOFIDELYS — Design system
   Référence : International Typographic Style (Josef Müller-Brockmann)
   Principes : grille mathématique stricte, typographie grotesque,
   asymétrie contrôlée, objectivité, une seule couleur fonctionnelle (rouge).
   Aucune ombre, aucun arrondi, aucun dégradé, aucune décoration.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root{
  --black:#1C1712;
  --white:#FAF7F2;
  --red:#C1440C;
  --grey:#6E645A;
  --grey-light:#E8DFD2;
  --maxw:1320px;
  --margin:32px;
  --gap:24px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:-apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:inherit;
  font-weight:700;
  line-height:0.98;
  margin:0;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem,7vw,6.4rem); font-weight:700;}
h2{font-size:clamp(1.9rem,4vw,3.2rem);}
h3{font-size:1.15rem; font-weight:700;}
p{margin:0 0 1em; max-width:64ch;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono', 'Courier New', monospace; font-variant-numeric:tabular-nums;}
img{max-width:100%; display:block;}
::selection{background:var(--red); color:var(--white);}
:focus-visible{outline:2px solid var(--red); outline-offset:2px;}

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

/* ---------- 12-column grid ---------- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);}
.c-1{grid-column:span 1;} .c-2{grid-column:span 2;} .c-3{grid-column:span 3;}
.c-4{grid-column:span 4;} .c-5{grid-column:span 5;} .c-6{grid-column:span 6;}
.c-7{grid-column:span 7;} .c-8{grid-column:span 8;} .c-9{grid-column:span 9;}
.c-10{grid-column:span 10;} .c-11{grid-column:span 11;} .c-12{grid-column:span 12;}
@media (max-width:860px){
  .grid > *{grid-column:span 12 !important;}
}

/* ---------- rules (lines) ---------- */
.rule{border:0; border-top:2px solid var(--black); margin:0;}
.rule-thin{border:0; border-top:1px solid var(--black); margin:0;}

/* ---------- header ---------- */
header.site{border-bottom:2px solid var(--black); position:sticky; top:0; z-index:50; background:var(--white);}
.nav{padding:20px var(--margin); max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:center;}
.brand{grid-column:span 4; font-size:1.15rem; font-weight:700; letter-spacing:-0.01em;}
.brand small{display:block; font-size:.62rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-top:2px;}
.nav ul.navlinks{grid-column:span 6; list-style:none; display:flex; gap:28px; margin:0; padding:0;}
.nav a.navlink{font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; position:relative; padding:2px 0;}
.nav a.navlink::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;}
.nav a.navlink:hover::after, .nav a.navlink.active::after{transform:scaleX(1);}
.nav .phone{grid-column:span 2; justify-self:end; font-family:'IBM Plex Mono', monospace; font-size:.9rem; font-weight:700; color:var(--red); white-space:nowrap;}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{display:block; width:24px; height:2px; background:var(--black); margin:5px 0;}

@media (max-width:900px){
  .nav{grid-template-columns:1fr auto auto;}
  .brand{grid-column:auto;}
  .nav ul.navlinks{
    grid-column:1/-1; position:fixed; inset:64px 0 0 0; background:var(--white);
    flex-direction:column; padding:32px var(--margin); gap:22px;
    transform:translateY(-110%); transition:transform .25s ease; border-top:2px solid var(--black);
  }
  .nav ul.navlinks.open{transform:translateY(0);}
  .burger{display:block;}
  .nav .phone{grid-column:auto; font-size:.8rem;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:0; border:2px solid var(--black); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-primary{background:var(--black); color:var(--white);}
.btn-primary:hover{background:var(--red); border-color:var(--red);}
.btn-ghost{background:var(--white); color:var(--black);}
.btn-ghost:hover{background:var(--black); color:var(--white);}
.btn-arrow::after{content:"→"; transition:transform .15s;}
.btn-arrow:hover::after{transform:translateX(3px);}

/* ---------- hero ---------- */
.hero{padding:64px 0 0;}
.hero .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); display:block; margin-bottom:20px;
}
.hero h1{margin-bottom:28px;}
.hero .lede{grid-column:span 5; font-size:1.15rem; color:var(--grey); align-self:end;}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}

.stat-grid{border-top:2px solid var(--black); margin-top:56px;}
.stat-grid .grid{padding:0;}
.stat-grid .stat{padding:20px var(--gap) 20px 0; border-right:1px solid var(--black); border-bottom:2px solid var(--black);}
.stat-grid .stat:last-child{border-right:none;}
.stat-grid .num{font-family:'IBM Plex Mono', monospace; font-size:2rem; font-weight:700; color:var(--red); display:block;}
.stat-grid .label{font-size:.8rem; color:var(--grey); text-transform:uppercase; letter-spacing:.03em;}

/* ---------- sections ---------- */
section{padding:88px 0;}
.section-head{margin-bottom:56px;}
.section-head .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); display:block; margin-bottom:14px;
}
.alt{background:var(--black); color:var(--white);}
.alt .eyebrow{color:var(--red);}
.alt h2, .alt h3{color:var(--white);}
.alt p{color:#D9CFC0;}
.alt .rule, .alt .rule-thin{border-color:var(--white);}

/* entries (services) — grille + règles, sans ornement */
.entries{border-top:2px solid currentColor;}
.entry{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:start;
  padding:36px 0; border-bottom:1px solid currentColor;
}
.entry .idx{grid-column:span 1; font-family:'IBM Plex Mono', monospace; color:var(--red); font-weight:700; font-size:1.1rem;}
.entry .entry-title{grid-column:span 4;}
.entry .entry-title h3{margin-bottom:10px;}
.entry .entry-desc{grid-column:span 5; font-size:.95rem;}
.entry .goto{grid-column:span 2; justify-self:end; font-family:'IBM Plex Mono', monospace; font-size:.8rem; font-weight:700; text-transform:uppercase; white-space:nowrap;}
@media (max-width:860px){
  .entry .idx, .entry .entry-title, .entry .entry-desc, .entry .goto{grid-column:span 12 !important; justify-self:start;}
  .entry .entry-title{margin-top:8px;}
}

/* cards -> blocs plats séparés par des règles, sans ombre/arrondi */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid currentColor;}
.grid-cards .card{padding:32px 28px 32px 0; border-right:1px solid currentColor;}
.grid-cards .card:last-child{border-right:none;}
.grid-cards .num{font-family:'IBM Plex Mono', monospace; color:var(--red); font-weight:700; font-size:1.4rem; display:block; margin-bottom:16px;}
@media (max-width:860px){
  .grid-cards{grid-template-columns:1fr;}
  .grid-cards .card{border-right:none; border-bottom:1px solid currentColor; padding:28px 0;}
}

/* équipe / personne */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); border-top:2px solid currentColor;}
@media (max-width:860px){ .team-grid{grid-template-columns:1fr;} }
.person{padding-top:20px;}
.person .avatar{
  width:100%; aspect-ratio:4/5; background:var(--grey-light); overflow:hidden; margin-bottom:16px;
}
.person .avatar img{width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(1) contrast(1.05);}
.person h3{margin-bottom:2px;}
.person .role{font-family:'IBM Plex Mono', monospace; font-size:.8rem; color:var(--red); text-transform:uppercase;}

/* photo encadrée générique */
.img-frame{overflow:hidden; background:var(--grey-light);}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05);}
.photo-credit{font-family:'IBM Plex Mono', monospace; font-size:.68rem; color:var(--grey); margin-top:8px; display:block;}

/* hybride humain/machine */
.hybrid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:start;}
.hybrid .hybrid-text{grid-column:span 6;}
.hybrid .img-frame{grid-column:span 6; aspect-ratio:5/4;}
@media (max-width:860px){ .hybrid .hybrid-text, .hybrid .img-frame{grid-column:span 12;} }
.hybrid ul{list-style:none; padding:0; margin:24px 0 0; border-top:1px solid currentColor;}
.hybrid ul li{display:grid; grid-template-columns:36px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid currentColor;}
.hybrid ul li .k{font-family:'IBM Plex Mono', monospace; color:var(--red); font-weight:700;}

/* about hero split */
.about-hero{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:end;}
.about-hero .about-text{grid-column:span 7;}
.about-hero .img-frame{grid-column:span 4; grid-column-start:9; aspect-ratio:4/5;}
@media (max-width:860px){
  .about-hero .about-text{grid-column:span 12;}
  .about-hero .img-frame{grid-column:span 12; grid-column-start:auto; max-width:280px;}
}

/* service image rows */
.service-row{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:center;}
.service-row .service-text{grid-column:span 6;}
.service-row .img-frame{grid-column:span 5; grid-column-start:8; aspect-ratio:4/3;}
.service-row.reverse .service-text{grid-column-start:7;}
.service-row.reverse .img-frame{grid-column-start:1;}
@media (max-width:860px){
  .service-row .service-text, .service-row .img-frame{grid-column:span 12 !important; grid-column-start:auto !important;}
}
.service-row ul{list-style:none; padding:0; margin-top:20px; border-top:1px solid currentColor;}
.service-row ul li{padding:12px 0; border-bottom:1px solid currentColor; font-size:.95rem;}

/* citations */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:2px solid currentColor;}
@media (max-width:780px){ .quotes{grid-template-columns:1fr;} }
.quote{padding:36px 32px 36px 0; border-right:1px solid currentColor;}
.quote:last-child{border-right:none;}
@media (max-width:780px){ .quote{border-right:none; border-bottom:1px solid currentColor; padding:28px 0;} }
.quote .mark{color:var(--red); font-size:2.4rem; font-weight:700; line-height:1; display:block; margin-bottom:8px;}
.quote blockquote{font-size:1.2rem; font-weight:700; margin:0 0 16px; line-height:1.3;}
.quote cite{font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--grey); text-transform:uppercase;}

/* bande de contact */
.cta-band{background:var(--black); color:var(--white); padding:80px 0;}
.cta-band h2{color:var(--white);}
.cta-band .lede{color:#D9CFC0; grid-column:span 6;}
.cta-band .phone-big{font-family:'IBM Plex Mono', monospace; font-size:2.2rem; font-weight:700; color:var(--red); margin-top:12px;}
.cta-band .btn-ghost{background:transparent; color:var(--white); border-color:var(--white);}
.cta-band .btn-ghost:hover{background:var(--white); color:var(--black);}

/* tarifs */
.price-table{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid currentColor;}
@media (max-width:900px){ .price-table{grid-template-columns:1fr;} }
.plan{padding:36px 28px 36px 0; border-right:1px solid currentColor; display:flex; flex-direction:column;}
.plan:last-child{border-right:none;}
@media (max-width:900px){ .plan{border-right:none; border-bottom:1px solid currentColor; padding:28px 0;} }
.plan.featured{background:var(--black); color:var(--white); padding-left:28px; margin:0 -1px;}
.plan-tag{font-family:'IBM Plex Mono', monospace; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:14px; display:block;}
.plan-price{font-family:'IBM Plex Mono', monospace; font-size:2.2rem; font-weight:700; margin:8px 0 4px;}
.plan-price span{font-size:.85rem; font-weight:400; color:var(--grey);}
.plan.featured .plan-price span{color:#C7BBA8;}
.plan ul{list-style:none; padding:0; margin:20px 0 28px; flex:1; border-top:1px solid currentColor;}
.plan ul li{padding:11px 0; border-bottom:1px solid currentColor; font-size:.9rem;}
.plan .btn{justify-content:center;}
.plan.featured .btn-ghost{border-color:var(--white); color:var(--white);}
.plan.featured .btn-ghost:hover{background:var(--white); color:var(--black);}

/* blog */
.post-list{border-top:2px solid currentColor;}
.post{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); padding:32px 0; border-bottom:1px solid currentColor;}
.post .date{grid-column:span 2; font-family:'IBM Plex Mono', monospace; font-size:.85rem; font-weight:700; color:var(--red);}
.post .post-body{grid-column:span 10;}
@media (max-width:700px){ .post .date, .post .post-body{grid-column:span 12;} }
.post h3{margin-bottom:8px;}
.post p{color:var(--grey); font-size:.95rem;}
.tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:.7rem; font-weight:700; text-transform:uppercase;
  border:1px solid currentColor; padding:3px 10px; margin-right:8px;
}

/* formulaires */
form.contact-form{display:grid; gap:22px; grid-column:span 7;}
@media (max-width:860px){ form.contact-form{grid-column:span 12;} }
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:'IBM Plex Mono', monospace; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.field input, .field textarea, .field select{
  border:0; border-bottom:2px solid var(--black); background:transparent; padding:12px 2px;
  font-family:inherit; font-size:1rem; border-radius:0; color:var(--black);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--red);}
.info-block{grid-column:span 4; grid-column-start:9; border-left:2px solid var(--black); padding-left:24px;}
@media (max-width:860px){ .info-block{grid-column:span 12; grid-column-start:auto; margin-top:32px;} }
.info-block .row{margin-bottom:18px;}
.info-block .k{font-family:'IBM Plex Mono', monospace; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); display:block; margin-bottom:2px;}

/* page-hero (pages secondaires) */
.page-hero{padding:64px 0 48px; border-bottom:2px solid var(--black);}
.page-hero .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); display:block; margin-bottom:14px;
}
.page-hero p.lede{grid-column:span 6; color:var(--grey); font-size:1.08rem;}
@media (max-width:860px){ .page-hero p.lede{grid-column:span 12;} }

/* footer */
footer.site{border-top:2px solid var(--black); padding:56px 0 32px; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); margin-bottom:44px;}
.foot-grid .foot-brand{grid-column:span 4;}
.foot-grid .foot-col{grid-column:span 2;}
@media (max-width:780px){
  .foot-grid .foot-brand{grid-column:span 12;}
  .foot-grid .foot-col{grid-column:span 6;}
}
.foot-grid h4{font-family:'IBM Plex Mono', monospace; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin-bottom:14px;}
.foot-grid ul{list-style:none; padding:0; margin:0;}
.foot-grid li{margin-bottom:10px; font-size:.9rem;}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--black); font-size:.78rem; color:var(--grey); font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.02em;}

.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* --- Sources officielles (articles) --- */
.sources{margin-top:48px; padding-top:20px; border-top:1px solid var(--black);}
.sources h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px;}
.sources ul{list-style:none; margin:0; padding:0;}
.sources li{font-family:'IBM Plex Mono','Courier New',monospace; font-size:.8rem; color:var(--grey); padding:6px 0; border-bottom:1px solid var(--grey-light);}