/* ============================================================
   AFEX GROUP — feuille de style
   Concept : le texte parallèle. Colonnes alignées, filet central.
   ============================================================ */

:root{
  /* Indigo de teinture, safran, bissap, craie */
  --encre:    #0F1436;
  --encre-2:  #171D45;
  --indigo:   #2A3A8F;
  --safran:   #E9A13B;
  --bissap:   #A32B45;
  --vert:     #2F6B62;
  --craie:    #EFEDE5;
  --craie-2:  #E1DDD0;
  --gris:     #6C7089;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;

  --mesure: 62ch;
  --bande: clamp(4.5rem, 10vw, 9rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--craie);
  color:var(--encre);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--sans); font-weight:600; margin:0; }
p{ margin:0 0 1rem; }
ul,dl{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--safran);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--safran); color:var(--encre);
  padding:.7rem 1.2rem; font-family:var(--sans); font-weight:600;
  text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{
  width:min(100% - 2.5rem, 1240px);
  margin-inline:auto;
}
@media (max-width:640px){ .wrap{ width:min(100% - 1.75rem, 1240px); } }

/* ---------- Étiquette de langue (bas-de-casse, jamais capitales) ---------- */
.lang{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--gris);
  margin:0 0 1.1rem;
}

/* ---------- Boutons & liens ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  background:var(--safran); color:#241703;
  padding:.85rem 1.6rem;
  text-decoration:none;
  border:0; border-radius:2px;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:#F2B457; }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:.55rem 1.05rem; font-size:.85rem; }
.btn--full{ width:100%; font-size:1rem; padding:1rem; }

.link{
  font-family:var(--sans); font-weight:500; font-size:.95rem;
  color:inherit; text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  opacity:.75;
  transition:opacity .18s ease;
}
.link:hover{ opacity:1; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.is-stuck{
  background:rgba(15,20,54,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(239,237,229,.14);
}
.nav__in{
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem 0;
  color:var(--craie);
}
.nav__brand{
  font-family:var(--sans); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; text-decoration:none;
  margin-right:auto;
}
.nav__brand span{ font-weight:400; opacity:.6; margin-left:.35em; }
.nav__links{ display:flex; gap:1.6rem; }
.nav__links a{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  text-decoration:none; opacity:.8;
  transition:opacity .18s ease;
}
.nav__links a:hover{ opacity:1; }
@media (max-width:900px){ .nav__links{ display:none; } }

/* ============================================================
   HERO — le spread parallèle
   ============================================================ */
.hero{
  background:var(--encre);
  color:var(--craie);
  padding:calc(var(--bande) + 3.5rem) 0 var(--bande);
}

.spread{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem, 5vw, 4.5rem);
  align-items:start;
}
.spread__col--target{
  border-left:1px solid rgba(239,237,229,.24);
  padding-left:clamp(1.75rem, 5vw, 4.5rem);
}

.hero h1{
  font-size:clamp(2.4rem, 7.2vw, 6rem);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0;
}
.echo{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.6rem, 4.6vw, 3.9rem);
  line-height:1.08;
  color:var(--safran);
  margin:0;
  transition:opacity .45s ease;
}
.echo.is-out, .lang.is-out{ opacity:0; }
.spread__col--target .lang{ transition:opacity .45s ease; }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:2rem clamp(2rem,6vw,5rem);
  margin-top:clamp(3rem, 8vw, 6rem);
  padding-top:2.2rem;
  border-top:1px solid rgba(239,237,229,.18);
}
.lede{
  flex:1 1 30ch;
  max-width:56ch;
  font-size:1.075rem;
  line-height:1.75;
  color:rgba(239,237,229,.82);
  margin:0;
}
.hero__cta{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }

@media (max-width:760px){
  .spread{ grid-template-columns:1fr; gap:2rem; }
  .spread__col--target{
    border-left:0;
    border-top:1px solid rgba(239,237,229,.24);
    padding-left:0; padding-top:1.75rem;
  }
}

/* ============================================================
   AMBITION
   ============================================================ */
.ambition{
  background:var(--craie);
  padding:var(--bande) 0;
}
.statement{
  font-size:clamp(1.35rem, 2.9vw, 2.05rem);
  line-height:1.42;
  font-weight:400;
  max-width:26ch;
  margin:0 0 2.5rem;
}
@media (min-width:760px){ .statement{ max-width:34ch; } }

.pills{
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.pills li{
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  border:1px solid rgba(15,20,54,.22);
  padding:.45rem .95rem;
  border-radius:999px;
}

/* ============================================================
   PÔLES — bandes pleine largeur, une couleur par métier
   ============================================================ */
.pillar{ padding:var(--bande) 0; }

.pillar__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.25rem, 6vw, 5.5rem);
}
@media (max-width:900px){ .pillar__grid{ grid-template-columns:1fr; } }

.pillar h2{
  font-size:clamp(2.1rem, 5.4vw, 4rem);
  line-height:.98;
  letter-spacing:-.03em;
  font-weight:700;
  margin:0 0 1.1rem;
}
.pillar__tag{
  font-family:var(--sans);
  font-size:1.02rem; font-weight:500;
  margin:0 0 1.1rem;
}
.pillar__intro{
  max-width:38ch;
  margin:0;
  opacity:.82;
}

.group + .group{
  margin-top:2.1rem;
  padding-top:2.1rem;
  border-top:1px solid currentColor;
}
.group{ --rule:currentColor; }
.group + .group{ border-color:rgba(128,128,128,.32); }

.group h3{
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  margin:0 0 .85rem;
}
.svc li{
  font-size:1rem;
  line-height:1.62;
  padding:.15rem 0;
  opacity:.88;
}
@media (min-width:620px){
  .svc--2{ columns:2; column-gap:2.5rem; }
  .svc--2 li{ break-inside:avoid; }
}

.note{
  margin-top:2.4rem;
  padding-left:1.25rem;
  border-left:2px solid var(--accent, currentColor);
}
.note p{
  font-style:italic;
  font-size:1.02rem;
  margin:0;
  opacity:.88;
}

/* -- Déclinaisons colorées -- */
.pillar--indigo{ background:var(--indigo); color:var(--craie); --accent:var(--safran); }
.pillar--indigo .group + .group{ border-color:rgba(239,237,229,.26); }
.pillar--indigo .pillar__tag{ color:var(--safran); }

.pillar--safran{ background:var(--craie); color:var(--encre); --accent:var(--safran); }
.pillar--safran .group + .group{ border-color:rgba(15,20,54,.18); }
.pillar--safran .pillar__tag{ color:#9A6512; }

.pillar--bissap{ background:var(--bissap); color:#FBEFEF; --accent:#F3C6A0; }
.pillar--bissap .group + .group{ border-color:rgba(251,239,239,.26); }
.pillar--bissap .pillar__tag{ color:#F3C6A0; }

.pillar--vert{ background:var(--vert); color:#EEF6F3; --accent:var(--safran); }
.pillar--vert .group + .group{ border-color:rgba(238,246,243,.26); }
.pillar--vert .pillar__tag{ color:#BFE3D9; }

/* ============================================================
   RÉFÉRENCES
   ============================================================ */
.refs{
  background:var(--craie-2);
  padding:var(--bande) 0;
}
.refs__intro{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--gris);
  margin:0 0 1.75rem;
}
.refs__list{
  display:flex; flex-wrap:wrap;
  gap:.7rem clamp(1.75rem, 5vw, 4rem);
  align-items:baseline;
  margin:0 0 2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(15,20,54,.16);
}
.refs__list li{
  font-family:var(--sans);
  font-size:clamp(1.5rem, 4vw, 2.6rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.refs__list span{
  display:block;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--gris);
}
.refs__note{
  max-width:var(--mesure);
  margin:0;
  opacity:.85;
}

/* ============================================================
   PROMESSE
   ============================================================ */
.promise{
  background:var(--encre);
  color:var(--craie);
  padding:calc(var(--bande) * 1.15) 0;
}
.promise__big{
  font-family:var(--sans);
  font-size:clamp(2rem, 6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-.032em;
  font-weight:700;
  margin:0 0 1.75rem;
}
.promise__sub{
  max-width:52ch;
  font-size:1.075rem;
  color:rgba(239,237,229,.8);
  margin:0;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--encre-2);
  color:var(--craie);
  padding:var(--bande) 0;
}
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem, 7vw, 6rem);
}
@media (max-width:900px){ .contact__grid{ grid-template-columns:1fr; } }

.contact .lang{ color:rgba(239,237,229,.55); }
.contact__hello{
  font-family:var(--sans);
  font-size:clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.04;
  margin:0 0 .35rem;
  color:var(--safran);
}
.contact__hello-fr{
  font-style:italic;
  color:rgba(239,237,229,.62);
  margin:0 0 2.5rem;
}

.coords dt{
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  color:rgba(239,237,229,.5);
  margin-top:1.25rem;
}
.coords dd{
  margin:.15rem 0 0;
  font-size:1.05rem;
}
.coords a{ text-decoration:none; border-bottom:1px solid rgba(239,237,229,.35); }
.coords a:hover{ border-color:var(--safran); color:var(--safran); }

.form h2{
  font-size:clamp(1.4rem, 3vw, 2rem);
  letter-spacing:-.02em;
  margin:0 0 1.75rem;
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:rgba(239,237,229,.72);
  margin-bottom:.4rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--serif); font-size:1rem;
  color:var(--craie);
  background:rgba(239,237,229,.06);
  border:1px solid rgba(239,237,229,.22);
  border-radius:2px;
  padding:.75rem .9rem;
  transition:border-color .18s ease, background .18s ease;
}
.field textarea{ resize:vertical; }
.field select{ font-family:var(--sans); font-size:.95rem; }
.field select option{ color:#111; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(239,237,229,.42); }
.field input:focus, .field select:focus, .field textarea:focus{
  background:rgba(239,237,229,.1);
  border-color:var(--safran);
}
.field input:user-invalid{ border-color:#E77A7A; }

.form__hint{
  font-family:var(--sans); font-size:.82rem;
  color:rgba(239,237,229,.6);
  margin:.85rem 0 0;
}
.form__hint.is-error{ color:#F0A0A0; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.foot{
  background:var(--encre);
  color:rgba(239,237,229,.68);
  padding:3rem 0;
  border-top:1px solid rgba(239,237,229,.14);
}
.foot__in{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.9rem 2.5rem;
}
.foot__brand{
  font-family:var(--sans); font-weight:700; font-size:1.15rem;
  color:var(--craie); margin:0; margin-right:auto;
}
.foot__brand span{ font-weight:400; opacity:.6; margin-left:.35em; }
.foot__cats, .foot__legal{
  font-family:var(--sans); font-size:.83rem; margin:0;
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   PHOTOGRAPHIES
   Les images sont des planches : cadrage constant, légende en
   dessous, jamais de carte ni d'ombre portée.
   ============================================================ */

/* ---------- Marque ---------- */
.nav__brand{ display:flex; align-items:center; gap:.6rem; }
.nav__brand img{ width:auto; height:30px; display:block; }

.foot__brand{ display:flex; align-items:center; gap:.65rem; }
.foot__brand img{ width:auto; height:46px; display:block; }

/* ---------- Hero : la cabine en fond ---------- */
.hero{ position:relative; isolation:isolate; }
.hero__fond{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:62% 45%;
  z-index:-2;
  filter:saturate(.55) contrast(1.05);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(104deg,
    rgba(15,20,54,.97) 0%,
    rgba(15,20,54,.93) 42%,
    rgba(15,20,54,.70) 100%);
}
.hero .wrap{ position:relative; }

.hero__credit{
  font-family:var(--sans); font-size:.78rem;
  color:rgba(239,237,229,.5);
  margin:2.5rem 0 0;
}

/* ---------- Planches ---------- */
.plaques{
  display:grid;
  gap:1.5rem;
  margin-top:2.6rem;
}
.plaques--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.plaques--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:620px){
  .plaques--2, .plaques--3{ grid-template-columns:1fr; }
}

.plaques figure{ margin:0; }
.plaques img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  background:rgba(128,128,128,.18);
}
.plaques figcaption{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.45;
  margin-top:.65rem;
  padding-top:.55rem;
  border-top:1px solid currentColor;
  opacity:.62;
}

/* ---------- Carnets : planches verticales déjà composées ---------- */
.carnet{
  margin:2.8rem 0 0;
  max-width:400px;
}
.carnet img{ display:block; width:100%; height:auto; }
.carnet figcaption{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.45;
  margin-top:.65rem;
  padding-top:.55rem;
  border-top:1px solid currentColor;
  opacity:.62;
}
.carnet--large{
  max-width:430px;
  margin:0 0 2.75rem;
}
@media (min-width:860px){
  .refs .carnet--large{ float:left; margin-right:2.75rem; max-width:360px; }
  .refs__note{ overflow:hidden; }
}

/* ---------- Promesse : la mission de terrain en fond ---------- */
.promise{ position:relative; isolation:isolate; overflow:hidden; }
.promise__fond{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
  z-index:-2;
  filter:saturate(.35) contrast(1.08);
}
.promise::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(15,20,54,.94) 0%,
    rgba(15,20,54,.90) 60%,
    rgba(15,20,54,.96) 100%);
}
.promise .wrap{ position:relative; }

/* ============================================================
   FORMULAIRE : états d'envoi
   ============================================================ */

/* Mention « facultatif » accolée à l'étiquette */
.facultatif{
  font-weight:400;
  color:rgba(239,237,229,.42);
  margin-left:.4em;
}

/* Piège à robots : hors écran, hors tabulation, invisible aux lecteurs d'écran */
.leurre{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.btn:disabled{
  background:rgba(233,161,59,.45);
  color:rgba(36,23,3,.6);
  cursor:default;
}

.form__hint.is-ok{ color:#9FD9B8; }

.form__copie{
  display:block;
  margin:.9rem auto 0;
  background:none;
  border:0;
  padding:.25rem 0;
  font-family:var(--sans); font-size:.82rem;
  color:rgba(239,237,229,.72);
  border-bottom:1px solid rgba(239,237,229,.35);
  cursor:pointer;
}
.form__copie:hover{ color:var(--safran); border-color:var(--safran); }

/* Deux lignes téléphoniques, empilées */
.coords__tels{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
}

/* Fonction, sous le nom de l'interlocuteur */
.coords__role{
  display:block;
  font-family:var(--sans);
  font-size:.8rem;
  color:rgba(239,237,229,.52);
  margin-top:.1rem;
}

/* Raison sociale au pied de page */
.foot__noms{ display:block; }
.foot__raison{
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.01em;
  color:rgba(239,237,229,.5);
  margin-top:.15rem;
}
.foot__brand{ align-items:center; }

/* ============================================================
   WHATSAPP
   Le vert de la marque. Texte encré plutôt que blanc : sur ce
   vert, le blanc tombe à 1,9:1 de contraste et devient illisible.
   ============================================================ */
.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:2rem;
  padding:.8rem 1.35rem;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  text-decoration:none;
  color:#06291A;
  background:#25D366;
  border-radius:2px;
  transition:background .18s ease, transform .18s ease;
}
.whatsapp:hover{ background:#3BE07A; }
.whatsapp:active{ transform:translateY(1px); }
.whatsapp svg{ flex:none; }

/* Mention sous la ligne qui porte WhatsApp */
.coords__wa{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  color:rgba(239,237,229,.45);
  margin-top:.1rem;
}
.coords__tels a{ border-bottom:0; }
.coords__tels a:hover{ color:var(--safran); }