/* ==========================================================================
   ComKo Digital — composants des pages interieures.
   Se charge APRES assets/home.css, dont il reprend les jetons, la typo,
   l'en-tete, le pied de page, les boutons et le filet circuit.
   Couvre services.html / about.html / contact.html.
   ========================================================================== */

:root{
  /* Voile des bandeaux : un simple assombrissement, pas une teinte.
     Assez dense a gauche pour que le texte blanc reste lisible, tres leger
     a droite pour que la photo garde ses couleurs naturelles. */
  --wash:linear-gradient(100deg,rgba(10,27,69,0.88) 0%,rgba(10,27,69,0.62) 42%,rgba(10,27,69,0.26) 100%);
}

/* Onglet Services actif : meme soulignement ambre que les liens de nav.
   (2e et dernier emplacement de l'ambre, avec le point de statut.) */
.nav__toggle[aria-current="page"]{position:relative;color:var(--navy);}
.nav__toggle[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:14px;bottom:0;
  height:2px;background:var(--signal);
}
@media (max-width:980px){
  .js .nav__toggle[aria-current="page"]::after{right:auto;width:24px;bottom:8px;}
}

/* --------------------------------------------------------------------------
   1. Bandeau de page
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  color:#fff;
  background-color:var(--ink);
  background-image:var(--wash),url('hero.jpg');
  background-size:cover;
  background-position:center;
  padding:clamp(48px,7vw,112px) 0 clamp(44px,6vw,96px);
}
/* Une photo par page. Tant qu'un fichier manque, le lavage seul s'affiche. */
.page-hero--services{background-image:var(--wash),url('banner-services.jpg');}
.page-hero--about{background-image:var(--wash),url('banner-about.jpg');}
.page-hero--contact{background-image:var(--wash),url('banner-contact.jpg');}

.page-hero .eyebrow{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--on-dark-72);
  margin-bottom:20px;
}
.page-hero h1{
  color:#fff;
  font-size:44px;
  font-weight:800;
  max-width:20ch;
  margin-bottom:20px;
}
.page-hero p{
  color:var(--on-dark-72);
  font-size:18px;
  max-width:56ch;
}

/* --------------------------------------------------------------------------
   2. Rythme des sections
   -------------------------------------------------------------------------- */
section.block,
section.pillar-section{padding:var(--section-y) 0;}
section.block.alt{background:var(--mist);}

.section-head{max-width:60ch;margin:0 0 56px;}
.section-head .eyebrow{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-56);margin-bottom:20px;
}
.section-head h2{font-size:32px;margin-bottom:16px;}
.section-head p{font-size:17px;color:var(--ink-72);max-width:52ch;}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
/* Deux par deux : la grille de about.html vit dans une demi-colonne, quatre
   de front n'y tiennent pas. Remplace un style inline, que les regles
   responsive de la section 9 ne pouvaient pas contredire — les cartes
   restaient donc a deux colonnes de 159px sur mobile. */
.grid-4--pair{grid-template-columns:repeat(2,minmax(0,1fr));}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start;}
.two-col h2{font-size:32px;margin-bottom:16px;}
.two-col p{color:var(--ink-72);margin-bottom:16px;}

/* --------------------------------------------------------------------------
   3. Cartes — un seul modele, 4px de rayon, pas d'ombre au repos
   -------------------------------------------------------------------------- */
.value-card,
.service-card,
.quote-card,
.info-card,
.form-card,
.note-block{
  background:var(--paper);
  border:1px solid var(--mist);
  border-radius:4px;
  padding:28px 24px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.value-card:hover,
.service-card:hover{
  border-color:rgba(22,104,227,.35);
  box-shadow:0 18px 40px -26px rgba(10,27,69,.45);
}
.value-card h3,
.service-card h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.value-card p,
.service-card .desc{font-size:15px;line-height:1.6;color:var(--ink-72);}

/* Icones : SVG en ligne, trait 1.5px, meme langage que le logo */
.value-card .icon,
.info-row .ic{color:var(--navy);flex:0 0 auto;}
.value-card .icon{margin-bottom:20px;}
.value-card .icon svg,
.info-row .ic svg{width:28px;height:28px;display:block;}

/* --------------------------------------------------------------------------
   4. services.html
   -------------------------------------------------------------------------- */
.pillar-head{max-width:62ch;margin-bottom:48px;}
.pillar-head .eyebrow{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-56);margin-bottom:20px;
}
.pillar-head h2{font-size:32px;margin-bottom:16px;}
.pillar-head p{font-size:17px;color:var(--ink-72);}

/* Etiquette « offre principale » — bleu, jamais ambre */
.pillar-head .tag{
  display:inline-block;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.12em;
  background:var(--blue);color:#fff;
  padding:6px 14px;border-radius:999px;
  margin-bottom:20px;
}
.flagship-strip{background:var(--mist);}

.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.service-card{display:flex;flex-direction:column;}
/* Offres d'entree : les seules choses que l'on peut commander aujourd'hui.
   Encadre en bas de carte plutot qu'une pastille en fin de texte. Le libelle
   reste en mono discret, l'offre passe en corps de texte : c'est elle qu'on
   doit lire. margin-top:auto aligne l'encadre en bas, quelle que soit la
   longueur de la liste au-dessus. */
.service-card .entry{
  margin-top:auto;
  padding:14px 16px;
  background:rgba(22,104,227,.08);
  border-left:2px solid var(--blue);
  border-radius:0 4px 4px 0;
}
/* L'espace au-dessus se met sur l'element precedent, pas sur .entry : une
   marge posee ici l'emporterait sur margin-top:auto et l'encadre ne serait
   plus cale en bas de carte. */
.service-card ul:has(+ .entry),
.service-card .desc:has(+ .entry){margin-bottom:20px;}
.entry__label{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-56);
  margin-bottom:6px;
}
.entry__offer{
  display:block;
  font-size:15px;font-weight:500;line-height:1.45;
  color:var(--navy);
}
/* Conseil IT : meme encadre, mais ce n'est pas une offre — pas de libelle. */
.entry--note .entry__offer{font-weight:400;color:var(--ink-72);}
.note-block{background:var(--mist);border-color:transparent;}
.note-block p{color:var(--ink-72);font-size:16px;}

/* --------------------------------------------------------------------------
   5. about.html — etapes numerotees, reliees par le filet circuit
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.step .num{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--blue);margin-bottom:16px;
}
.step h3{font-size:20px;margin-bottom:10px;}
.step p{font-size:16px;color:var(--ink-72);}

.quote-card{background:var(--ink);border-color:transparent;color:#fff;padding:40px 36px;}
.quote-card p{font-size:20px;line-height:1.5;color:#fff;font-family:var(--font-display);font-stretch:112%;font-weight:700;letter-spacing:-0.02em;}
.quote-card .who{
  display:block;margin-top:20px;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--on-dark-56);
}

/* --------------------------------------------------------------------------
   6. contact.html
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start;}
.info-card{margin-bottom:24px;}
.info-card h3{font-size:20px;margin-bottom:20px;}
.info-card > p{color:var(--ink-72);font-size:15px;margin-bottom:16px;}

.info-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--mist);}
.info-row:first-of-type{border-top:0;}
.info-row .label{
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-56);margin-bottom:4px;
}
.info-row .val{font-size:17px;color:var(--ink);}
.info-row .val a:hover{color:var(--blue);}

.offer-pills{display:flex;flex-wrap:wrap;gap:8px;}
.offer-pill{
  display:inline-block;
  font-size:14px;color:var(--navy);
  background:var(--mist);
  border:1px solid rgba(22,104,227,.20);
  padding:8px 16px;border-radius:999px;
}

.form-card h3{font-size:22px;margin-bottom:10px;}
.form-card > p{color:var(--ink-72);font-size:15px;margin-bottom:24px;}
.form-card label{
  display:block;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-56);
  margin:20px 0 8px;
}
.form-card input,
.form-card select,
.form-card textarea{
  width:100%;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--paper);
  border:1px solid #D9E1F2;
  border-radius:4px;
  padding:13px 14px;
  transition:border-color .18s ease;
}
.form-card textarea{min-height:150px;resize:vertical;}
.form-card input::placeholder,
.form-card textarea::placeholder{color:var(--ink-56);}
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover{border-color:rgba(22,104,227,.45);}
.form-submit{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;}
.form-note{margin-top:16px;font-size:14px;color:var(--ink-56);}

/* Bouton WhatsApp — canal de contact principal au Burkina Faso */
.btn-whatsapp{
  background:var(--mist);color:var(--navy);
  border-color:rgba(22,104,227,.28);
}
.btn-whatsapp:hover{background:var(--paper);border-color:var(--blue);color:var(--blue);}
.btn-whatsapp svg{width:19px;height:19px;display:block;}

/* Confirmation apres envoi (retour de formsubmit avec ?sent=1) */
.form-success{
  background:rgba(22,104,227,.08);
  border:1px solid rgba(22,104,227,.30);
  border-radius:4px;
  padding:16px 18px;margin-bottom:24px;
  font-size:16px;color:var(--ink);
}
.form-success strong{color:var(--navy);}
.form-success[hidden]{display:none;}

@media (max-width:640px){
  .form-submit{flex-direction:column;align-items:stretch;}
  .form-submit .btn{width:100%;}
}

/* --------------------------------------------------------------------------
   7. Bandeau CTA hérité (h2 + p + bouton, centre)
   -------------------------------------------------------------------------- */
.cta-band .wrap{text-align:center;}
.cta-band h2{color:#fff;font-size:36px;margin:0 auto 16px;max-width:20ch;}
.cta-band p{color:var(--on-dark-72);font-size:17px;margin:0 auto 32px;max-width:56ch;}

/* --------------------------------------------------------------------------
   8. Boutons et liens hérités -> systeme de la page d'accueil
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--navy);}
.cta-band .btn-primary{background:var(--paper);color:var(--navy);}
.cta-band .btn-primary:hover{background:var(--mist);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.10);border-color:#fff;}

a.link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:500;color:var(--blue);
  transition:color .18s ease;
}
a.link:hover{color:var(--blue-lift);}
/* jamais de bleu en texte sur --mist */
.flagship-strip a.link,
.block.alt a.link{color:var(--navy);}
.flagship-strip a.link:hover,
.block.alt a.link:hover{color:var(--ink);}

.service-card ul,
.pillar-card ul{margin:14px 0 0;}
.service-card li,
.pillar-card li{
  position:relative;padding-left:18px;margin-bottom:8px;
  font-size:15px;color:var(--ink-72);
}
.service-card li::before,
.pillar-card li::before{
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}

.placeholder{color:inherit;}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .page-hero h1{font-size:40px;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .two-col{grid-template-columns:1fr;gap:40px;}
  .contact-grid{grid-template-columns:1fr;}
}

@media (max-width:640px){
  /* cesure sur les mots longs plutot qu'une coupe brute en petit ecran */
  .page-hero h1{font-size:32px;hyphens:auto;-webkit-hyphens:auto;}
  .page-hero p{font-size:17px;}
  .section-head h2,.pillar-head h2,.two-col h2{font-size:28px;}
  .grid-3,.grid-4,.service-grid,.steps{grid-template-columns:1fr;}
  .cta-band h2{font-size:28px;}
  .cta-band .btn{width:100%;}
  .quote-card{padding:28px 22px;}
  .quote-card p{font-size:18px;}
}

/* --------------------------------------------------------------------------
   10. Blog — index et corps d'article

   Le blog n'existait pas quand home.css et pages.css ont ete ecrits. Ce bloc
   se contente de retablir, pour du texte long, ce que la base neutralise
   volontairement ailleurs : les listes (list-style:none pour la nav et le
   pied de page) et les liens (text-decoration:none partout).
   Aucune nouvelle valeur de design — uniquement les jetons existants.
   -------------------------------------------------------------------------- */

/* Index : /blog/ */
.post-list{display:grid;grid-template-columns:1fr;gap:16px;max-width:72ch;}
.post-card__date{color:var(--ink-56);margin-bottom:12px;}
.post-card h3{font-size:22px;margin-bottom:10px;}
.post-card h3 a{transition:color .18s ease;}
.post-card h3 a:hover{color:var(--blue);}
.post-list__empty{color:var(--ink-56);}

/* --------------------------------------------------------------------------
   11. Conseil strategique — poids visuel reduit
   Ce pilier se decrit lui-meme comme une ambition de long terme. Il portait
   pourtant le meme poids que Services Technologiques, l'offre reellement
   commercialisable aujourd'hui. Cartes plus compactes, sans fond ni survol
   appuye : la hierarchie de la page suit la realite commerciale.
   -------------------------------------------------------------------------- */
.pillar-section--soft .pillar-head h2{font-size:26px;}
.pillar-section--soft .service-card{
  padding:20px 18px;
  background:transparent;
  border-color:rgba(10,27,69,.10);
}
.pillar-section--soft .service-card:hover{
  border-color:rgba(10,27,69,.18);
  box-shadow:none;
}
.pillar-section--soft .service-card h3{font-size:16px;}
.pillar-section--soft .service-card li{font-size:14px;margin-bottom:6px;}
.pillar-section--soft .service-card .desc{font-size:14px;}

/* Quatre colonnes seulement au-dela du point de bascule, pour ne pas
   ecraser les regles responsive de la section 9. */
@media (min-width:981px){
  .pillar-section--soft .service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
}

/* Date et signature, sous le titre dans le bandeau de l'article.
   Deux classes pour passer devant « .page-hero p ». */
.page-hero .post__meta{
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.12em;
}

/* Corps d'article — mesure limitee : le reste du site est en pleine
   largeur, un article ne peut pas l'etre. */
.post__body{max-width:72ch;}
.post__body > *:first-child{margin-top:0;}
.post__body p{margin:0 0 20px;color:var(--ink-72);}
.post__body h2{font-size:28px;margin:48px 0 16px;}
.post__body h3{font-size:20px;margin:32px 0 12px;}
.post__body strong{color:var(--ink);font-weight:600;}

.post__body ul,
.post__body ol{margin:0 0 20px;padding-left:24px;color:var(--ink-72);}
.post__body ul{list-style:disc;}
.post__body ol{list-style:decimal;}
.post__body li{margin-bottom:8px;}
.post__body li::marker{color:var(--blue);}   /* meme point bleu que les cartes */

.post__body a{
  color:var(--blue);
  text-decoration:underline;text-underline-offset:2px;
  transition:color .18s ease;
}
.post__body a:hover{color:var(--blue-lift);}

.post__body blockquote{
  margin:32px 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--blue);
  color:var(--ink);
}
.post__body blockquote p:last-child{margin-bottom:0;}

/* Code : la mono du site, sans les majuscules ni l'interlettrage des eyebrows.
   Le bloc reprend le fond --ink de .quote-card. */
.post__body code{
  font-family:var(--font-mono);font-size:0.88em;
  background:var(--mist);color:var(--navy);
  padding:2px 6px;border-radius:4px;
}
.post__body pre{
  margin:0 0 24px;padding:20px 22px;
  background:var(--ink);border-radius:4px;
  overflow-x:auto;
}
.post__body pre code{
  background:none;color:#fff;padding:0;
  font-size:14px;line-height:1.6;
}

/* Une image large occupe toute la mesure du texte. Une image haute (une
   couverture de rapport, une capture verticale) serait sinon demesuree et
   repousserait l'article sous la ligne de flottaison : on plafonne la
   hauteur, la largeur suit, et les marges auto recentrent le tout.
   Une image paysage courante reste en dessous du plafond, donc intacte. */
.post__body img{margin:32px auto;border-radius:4px;max-height:560px;}
.post__back{margin-top:48px;}

@media (max-width:640px){
  .post__body h2{font-size:24px;margin-top:36px;}
  .post__body h3{font-size:18px;}
  .post__body pre{padding:16px;}
}