/* KoSbi Ingénierie — site vitrine
   Palette : papier #f7f6f2 · encre #2b2b2b · rouge #b5121b · gris #6b6b6b */
:root {
  --papier: #f7f6f2;
  --papier-2: #edebe5;
  --encre: #2b2b2b;
  --gris: #6b6b6b;
  --filet: #d6d3cb;
  --rouge: #a51d22;
  --serif: Cambria, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--rouge); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--filet);
  background: var(--papier);
}
.entete__int {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.logo img { width: 188px; }
.nav { display: flex; gap: 26px; flex-wrap: wrap; }
.nav a {
  color: var(--encre);
  font-size: 16px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { text-decoration: none; border-color: var(--filet); }
.nav a[aria-current="page"] { border-color: var(--rouge); }

/* ---------- bannière (diaporama CSS) ---------- */
.banniere {
  position: relative;
  width: calc(100% - 40px);                 /* même largeur que le contenu */
  max-width: calc(var(--max) - 40px);
  margin: 0 auto;
  height: clamp(110px, 10vw, 190px);   /* hauteur du bandeau : ~190 px sur grand écran, 110 px sur mobile */
  overflow: hidden;
  background: var(--papier-2);
}
.banniere img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: defile 42s infinite;
}
.banniere img:nth-child(1) { animation-delay: 0s; }
.banniere img:nth-child(2) { animation-delay: 6s; }
.banniere img:nth-child(3) { animation-delay: 12s; }
.banniere img:nth-child(4) { animation-delay: 18s; }
.banniere img:nth-child(5) { animation-delay: 24s; }
.banniere img:nth-child(6) { animation-delay: 30s; }
.banniere img:nth-child(7) { animation-delay: 36s; }
@keyframes defile {
  0% { opacity: 0 } 2.4% { opacity: 1 } 14.3% { opacity: 1 } 16.7% { opacity: 0 } 100% { opacity: 0 }
}
.banniere img:first-child { opacity: 1; }
.banniere__filet { display: none; }
@media (prefers-reduced-motion: reduce) {
  .banniere img { animation: none; opacity: 0; }
  .banniere img:first-child { opacity: 1; }
}

/* ---------- contenu ---------- */
.contenu {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px 64px;
}
.contenu--etroit { max-width: 760px; }
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 8px;
}
h1::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--rouge);
  margin-top: 14px;
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  margin: 40px 0 12px;
}
.chapeau { font-size: 1.1rem; color: var(--gris); max-width: 60ch; margin: 18px 0 0; }
p { max-width: 68ch; }

/* accueil : tuiles */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.tuile {
  display: block;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--filet);
  padding: 26px 24px 24px;
  transition: border-color .15s;
}
.tuile:hover { text-decoration: none; border-color: var(--rouge); }
.tuile svg { width: 44px; height: 44px; stroke: var(--rouge); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tuile strong { display: block; margin: 16px 0 6px; font-size: 1.1rem; font-weight: 600; }
.tuile span { color: var(--gris); font-size: .95rem; }

/* le cabinet */
.associes { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 32px; }
.associes figure { margin: 0; }
.associes figcaption { margin-top: 10px; color: var(--gris); font-size: .95rem; }
.valeurs { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.valeurs li { padding-left: 18px; position: relative; }
.valeurs li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 2px; background: var(--rouge); }
@media (max-width: 720px) { .associes { grid-template-columns: 1fr; } }

/* page unique : sections */
.bloc { padding: 48px 0 8px; border-top: 1px solid var(--filet); scroll-margin-top: 110px; }
.bloc--accueil { padding-top: 0; border-top: 0; }
h2.titre {
  font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.2; margin: 0 0 8px;
}
h2.titre::after { content: ""; display: block; width: 64px; height: 3px; background: var(--rouge); margin-top: 14px; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 32px 0 8px; }

/* références repliables */
.refs { margin-top: 24px; border-top: 1px solid var(--filet); }
.refs details { border-bottom: 1px solid var(--filet); }
.refs summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0 14px 26px; position: relative;
  font-family: var(--serif); font-size: 1.15rem;
}
.refs summary::-webkit-details-marker { display: none; }
.refs summary::before {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 8px; height: 8px; border-right: 1.5px solid var(--rouge); border-bottom: 1.5px solid var(--rouge);
  transform: translateY(-70%) rotate(-45deg); transition: transform .15s;
}
.refs details[open] summary::before { transform: translateY(-70%) rotate(45deg); }
.refs summary small { color: var(--gris); font-family: var(--sans); font-size: .9rem; white-space: nowrap; }
.refs ul { columns: 2; column-gap: 40px; padding: 0 0 12px 26px; }
@media (max-width: 720px) { .refs ul { columns: 1; } }
.refs ul { list-style: none; margin: 0; }
.refs li { padding: 8px 0; break-inside: avoid; font-size: .96rem; }
.refs li b { font-weight: 600; }
.refs li i { color: var(--gris); font-style: normal; }
.refs li small { display: block; color: var(--gris); }

/* formulaires */
.form { display: grid; gap: 18px; max-width: 620px; margin-top: 28px; }
.form label { display: block; font-size: .95rem; color: var(--gris); }
.form label input, .form label textarea { display: block; width: 100%; margin-top: 6px; }
.form input, .form textarea {
  font: inherit; color: var(--encre);
  padding: 10px 12px;
  border: 1px solid var(--filet);
  background: #fff;
  border-radius: 0;
}
.form input:focus, .form textarea:focus { border-color: var(--encre); outline: none; }
.form textarea { min-height: 160px; resize: vertical; }
.form .obligatoire { color: var(--rouge); }
.form .consentement { display: flex; gap: 10px; align-items: flex-start; color: var(--encre); font-size: .95rem; }
.form .consentement input { width: auto; flex: 0 0 auto; margin: 5px 0 0; }
.form .consentement span { flex: 1 1 auto; min-width: 0; }
.bouton {
  justify-self: start;
  font: inherit; font-weight: 600;
  background: var(--rouge); color: #fff;
  border: 0; padding: 12px 26px; cursor: pointer;
}
.bouton:hover { background: #8c181d; }
.piege { position: absolute; left: -9999px; }
.coordonnees { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--filet); color: var(--gris); font-size: .95rem; }
.coordonnees b { color: var(--encre); }
.message { padding: 16px 20px; border-left: 3px solid var(--rouge); background: #fff; }

/* enquête */
.enquete-cadre { border: 1px solid var(--filet); background: #fff; margin-top: 28px; }
.enquete-cadre iframe { width: 100%; height: 1400px; border: 0; display: block; }
@media (max-width: 720px) { .enquete-cadre iframe { height: 1800px; } }

/* ---------- pied de page ---------- */
.pied {
  border-top: 1px solid var(--filet);
  color: var(--gris);
  font-size: .9rem;
}
.pied__int {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}
.pied a { color: var(--gris); }