/* ==========================================================================
   BYCOM INFRA — feuille de style de la vitrine
   --------------------------------------------------------------------------
   Chargée par une balise <link> depuis app/components/bycom/BycomHome.tsx, et
   par elle seule : ce fichier n'existe que pour /bycom-infra et n'atteint
   jamais la page d'un autre artisan. Il vit sous public/ et n'est donc PAS
   traité par PostCSS ni Tailwind : tout ici est du CSS natif.

   PALETTE — relevée dans le fichier du logo, pas approchée à l'œil. Les trois
   valeurs dominantes du JPEG fourni sont #081840 (navy du mot-marque),
   #1858E8 (bleu de la barre centrale) et #6830E8 (violet de la barre courte).

   FOND BLANC. Le logo est composé POUR du blanc : son mot-marque est navy, ses
   trois barres sont pensées sur papier. C'est aussi le registre des donneurs
   d'ordre auxquels cette page s'adresse. Conséquence sur les contrastes, tous
   vérifiés sur #FFFFFF : navy #081840 monte à 16,9:1, bleu #1858E8 à 5,8:1 et
   violet #6830E8 à 6,6:1 — les trois couleurs de la marque passent le seuil AA
   en texte, ce qu'aucune ne faisait sur fond sombre.

   TYPOGRAPHIE. Manrope porte les titres et le texte ; Barlow Condensed est
   réservé aux sur-titres et au mot-marque, en capitales. Les boutons sont en
   Manrope, casse normale : des capitales condensées donnaient un registre
   sportif, à contre-emploi sur une page lue par un service achats.
   ========================================================================== */

.bci {
  /* --- Marque ---------------------------------------------------------- */
  --blue: #1858e8;
  --violet: #6830e8;

  /* --- Papier ---------------------------------------------------------- */
  --paper: #ffffff;
  --paper-2: #f6f8fd;
  --paper-3: #edf1fa;

  /* --- Encres ---------------------------------------------------------- */
  --ink: #081840;
  --ink-soft: #46557a;
  --ink-dim: #6f7d9e;

  /* --- Traits ---------------------------------------------------------- */
  --line: rgba(8, 24, 64, 0.1);
  --line-soft: rgba(8, 24, 64, 0.06);
  --line-strong: rgba(8, 24, 64, 0.2);

  /* --- Le « fil optique » : le dégradé du logo ------------------------- */
  --fibre: linear-gradient(115deg, var(--blue) 0%, #3a54ee 45%, var(--violet) 100%);

  --shadow-sm: 0 1px 2px rgba(8, 24, 64, 0.04), 0 4px 14px rgba(8, 24, 64, 0.05);
  --shadow-md: 0 2px 4px rgba(8, 24, 64, 0.04), 0 14px 40px -12px rgba(8, 24, 64, 0.14);
  --shadow-lg: 0 30px 70px -28px rgba(8, 24, 64, 0.3);
  --shadow-blue: 0 12px 30px -10px rgba(24, 88, 232, 0.5);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 1200px;
  --radius: 8px;
  --radius-lg: 16px;

  /* L'inclinaison du logo. Les trois barres du symbole penchent de ~43° par
     rapport à la verticale : seule valeur d'angle du document. */
  --tilt: -43deg;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  color: var(--ink);
  /* Transparent : le fond animé est posé en dessous, en `fixed`. Le blanc de
     base vient de `html`, plus bas. */
  background: transparent;
  font-family: var(--font-sans), "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
}

/* Le fond de page appartient à BYCOM, pas à la feuille commune d'ARC RENOV.
   `:has()` porte la spécificité de son argument : la règle l'emporte sur le
   `body` de globals.css quel que soit l'ordre de chargement. */
html:has(.bci),
html:has(.bci) body {
  background: #ffffff;
}

html:has(.bci) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.bci) {
    scroll-behavior: auto;
  }
}

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

/* Réinitialisation locale.
   `:where()` neutralise la spécificité de ces sélecteurs : ils valent 0,0,0 et
   perdent donc contre toute règle de classe écrite plus bas. Sans quoi
   `.bci p { margin: 0 }` (0,1,1) l'emporterait sur `.bci__lede` (0,1,0) et
   chaque titre se retrouverait collé à son paragraphe. */
:where(.bci) :where(h1, h2, h3, h4) {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

:where(.bci) :where(p) {
  margin: 0;
  text-wrap: pretty;
}

:where(.bci) :where(a) {
  color: inherit;
  text-decoration: none;
}

:where(.bci) :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.bci) :where(img, svg) {
  display: block;
  max-width: 100%;
}

.bci :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.bci__wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Éléments de langage
   ========================================================================== */

.bci__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Barre inclinée qui rejoue le symbole du logo en miniature. */
.bci__kicker::before {
  content: "";
  width: 12px;
  height: 17px;
  background: var(--fibre);
  transform: skewX(var(--tilt));
  border-radius: 1px;
  flex: none;
}

.bci__head {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.bci__head h2 {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.bci__lede {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.68;
  max-width: 56ch;
}

/* Voile translucide au-dessus du fond animé.
   --------------------------------------------------------------------------
   Sans lui, un trait de lumière traversant un paragraphe le barre — l'effet
   « texte rayé » constaté sur la première version du bandeau. Le voile ramène
   la lumière à environ un dixième de son intensité : elle reste perceptible
   comme une texture, elle ne croise plus jamais une ligne de texte. */
.bci__section {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: rgba(255, 255, 255, 0.88);
}

.bci__section--alt {
  background: rgba(240, 244, 252, 0.9);
  border-block: 1px solid var(--line-soft);
}

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

.bci__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.bci__btn--primary {
  color: #fff;
  background: var(--fibre);
  box-shadow: var(--shadow-blue);
}

.bci__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(24, 88, 232, 0.62);
}

.bci__btn--ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--paper);
}

.bci__btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.bci__btn--sm {
  padding: 0.6rem 1rem;
  font-size: 0.94rem;
}

/* Bouton carré, pour une marque seule. `aspect-ratio` plutôt qu'une largeur
   fixe : le carré suit la hauteur du bouton texte à côté de lui, quelle que
   soit la taille de police héritée. */
.bci__btn--icon {
  padding-inline: 0;
  aspect-ratio: 1;
  width: auto;
  min-width: 2.5rem;
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.bci__header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

/* Jauge de lecture. Sa largeur est pilotée par `scaleX` depuis Motion, pas par
   un recalcul de mise en page : seul le compositeur travaille au défilement. */
.bci__progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  transform-origin: left;
  background: var(--fibre);
}

.bci__headerRow {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 72px;
}

.bci__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.bci__nav {
  display: none;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin-inline-start: auto;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.bci__nav a {
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.2s var(--ease);
}

.bci__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--fibre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.bci__nav a:hover {
  color: var(--ink);
}

.bci__nav a:hover::after {
  transform: scaleX(1);
}

/* Sous 900 px, la barre d'actions fixe du bas porte déjà « Appeler » et
   « Nous consulter » : les répéter en en-tête n'ajoute rien et vole la largeur
   dont le mot-marque a besoin. L'en-tête ne garde donc ses boutons qu'à partir
   du seuil où la barre du bas disparaît. */
.bci__headerCta {
  display: none;
  margin-inline-start: auto;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .bci__nav {
    display: flex;
  }
  .bci__headerCta {
    display: flex;
    margin-inline-start: 0;
  }
}

/* --- Mot-marque ------------------------------------------------------- */

.bci__brandRow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bci__mark {
  height: 32px;
  width: auto;
  flex: none;
  color: var(--ink);
}

.bci__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.bci__wordmarkTop {
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--ink);
}

.bci__wordmarkBottom {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--blue);
}

/* Les deux filets qui encadrent « INFRA » dans le logo d'origine. */
.bci__wordmarkBottom::before,
.bci__wordmarkBottom::after {
  content: "";
  height: 1px;
  width: 13px;
  flex: none;
  background: var(--fibre);
}

/* ==========================================================================
   Bandeau
   ========================================================================== */

/* Le visuel n'est plus un OBJET posé dans une colonne — c'est le FOND. Quatre
   tentatives l'avaient traité en illustration encadrée à côté du texte, et
   c'est cette composition, plus que le sujet, qui les faisait toutes tomber :
   un cadre au milieu d'une page réclame une justification qu'un décor ne peut
   pas donner. En fond, la question ne se pose plus. */
.bci__hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(30rem, 72vh, 42rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  /* Aucun voile ici : c'est la seule section où la lumière passe à pleine
     intensité, le masque radial suffisant à dégager le texte. */
  background: transparent;
}


/* Le texte se pose SUR le fond animé. `position: relative` le sort du plan de
   l'artwork ; sans lui il passerait dessous. */
.bci__heroInner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}



/* Pas de `max-width` ici : la colonne de la grille borne déjà la ligne, et une
   contrainte en `ch` par-dessus cassait le titre sur quatre lignes au lieu de
   deux, repoussant les boutons sous la ligne de flottaison. */
.bci__heroTitle {
  margin-top: 1.4rem;
  max-width: 17ch;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  /* `balance` égalise la longueur des lignes : sur un titre de cette taille il
     produisait quatre lignes courtes plutôt que trois pleines, et repoussait
     les boutons sous la ligne de flottaison. `pretty` ne corrige que la
     dernière ligne, ce qui est le seul défaut à traiter ici. */
  text-wrap: pretty;
}

.bci__heroTitle em {
  font-style: normal;
  background: var(--fibre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bci__heroLede {
  margin-top: 1.4rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.66;
}

/* Cette règle avait disparu, emportée par la suppression d'un bloc voisin : les
   deux boutons se retrouvaient collés l'un à l'autre ET au paragraphe, faute de
   `gap` et de `margin-top`. */
.bci__heroActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.9rem;
}

/* --- Le fond animé -----------------------------------------------------
   Trois couches : des halos flous qui dérivent, les brins de fibre, et la
   lumière qui les parcourt. Voir l'en-tête de BycomHeroArt (BycomMotion.tsx)
   pour le détail des choix. Rien ici n'intercepte le pointeur. */

/* `fixed`, pas `absolute` : le fond couvre l'écran et non le bandeau, la
   lumière continue donc de circuler pendant tout le défilement, à densité
   constante. Une couche `absolute` étirée sur la hauteur de la page aurait
   donné, elle, quatorze traits distendus sur 6 000 px.

   La légende des couches est en tête de BycomHeroArt (BycomMotion.tsx). Le
   masque radial reste centré sur l'ÉCRAN : le texte le traverse en défilant et
   y est toujours dégagé. */
.bci__art {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* DEUX masques combinés par intersection.
     Le radial creuse un vide au centre : sans lui, les traits de lumière
     passaient DERRIÈRE le titre et le paragraphe et les barraient — « mesure »
     apparaissait rayé. Le linéaire efface le haut et le bas : coupés net par le
     bord de la section, les brins donneraient une bande rapportée au lieu d'un
     fond. Le résultat lit comme de la profondeur : la lumière s'estompe en
     approchant du texte, et reprend au-delà. */
  -webkit-mask-image:
    radial-gradient(64% 58% at 50% 46%, transparent 0%, transparent 30%, #000 82%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(64% 58% at 50% 46%, transparent 0%, transparent 30%, #000 82%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

.bci__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bci__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.bci__blob--a {
  width: 46rem;
  height: 40rem;
  top: -34%;
  left: -14%;
  background: radial-gradient(circle, rgba(24, 88, 232, 0.3), transparent 68%);
}

.bci__blob--b {
  width: 40rem;
  height: 36rem;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgba(104, 48, 232, 0.26), transparent 68%);
}

.bci__blob--c {
  width: 34rem;
  height: 30rem;
  bottom: -30%;
  left: 34%;
  background: radial-gradient(circle, rgba(58, 84, 238, 0.2), transparent 70%);
}

/* Le vide central du masque est proportionnel à l'élément. Sur un bandeau
   étroit et haut, le même pourcentage ne couvre plus un texte qui occupe
   presque toute la hauteur : des traits revenaient effleurer le sur-titre et le
   paragraphe. La zone dégagée s'élargit donc en dessous de la bascule. */
@media (max-width: 900px) {
  .bci__art {
    -webkit-mask-image:
      radial-gradient(130% 52% at 50% 44%, transparent 0%, transparent 46%, #000 95%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image:
      radial-gradient(130% 52% at 50% 44%, transparent 0%, transparent 46%, #000 95%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
  }
}

@media (max-width: 720px) {
  .bci__blob {
    filter: blur(64px);
  }
}

/* ==========================================================================
   Bandeau de faits
   ========================================================================== */

.bci__facts {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(240, 244, 252, 0.9);
}

.bci__factsGrid {
  display: grid;
}

@media (min-width: 620px) {
  .bci__factsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .bci__factsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* En colonne, un filet VERTICAL ne sépare rien : il décale seulement les
   repères vers la droite. Le séparateur suit donc la direction de
   l'empilement. */
.bci__fact {
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line-soft);
}

.bci__fact:first-child {
  border-top: 0;
}

@media (min-width: 620px) {
  .bci__fact {
    padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
    border-top: 0;
    border-inline-start: 1px solid var(--line);
  }

  .bci__fact:nth-child(-n + 2) {
    border-top: 0;
  }

  .bci__fact:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

@media (min-width: 960px) {
  .bci__fact:nth-child(odd) {
    border-inline-start: 1px solid var(--line);
    padding-inline-start: clamp(1rem, 2vw, 1.6rem);
  }

  .bci__fact:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

.bci__factValue {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  /* `background-clip: text` ne peint que la BOÎTE de fond de l'élément,
     découpée à la forme des glyphes : tout jambage qui dépasse cette boîte
     n'est simplement pas peint, et se voit tranché net — le « g » de
     « Régie ». Augmenter `line-height` seul ne suffit pas quand la fonte a des
     jambages longs ; le remplissage vertical agrandit la boîte de fond
     elle-même, ce qui règle le problème quelle que soit la fonte. */
  line-height: 1.06;
  padding-block: 0.1em 0.24em;
  background: var(--fibre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Les chiffres animés changent de largeur à chaque image et faisaient
     tressauter le libellé sous eux. */
  font-variant-numeric: tabular-nums;
}

.bci__factLabel {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* ==========================================================================
   Matrice de compétences
   ========================================================================== */

.bci__matrix {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .bci__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .bci__matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bci__cell {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.bci__cell:hover {
  border-color: rgba(24, 88, 232, 0.35);
  box-shadow: var(--shadow-md);
}

/* Halo qui suit le pointeur. Les deux coordonnées sont écrites par Motion sur
   des variables CSS, pas sur des propriétés de mise en page : le suivi ne
   déclenche donc aucun recalcul de rendu. */
.bci__cellGlow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(24, 88, 232, 0.09),
    transparent 70%
  );
  transition: opacity 0.35s var(--ease);
}

.bci__cell:hover .bci__cellGlow {
  opacity: 1;
}

.bci__cellIndex {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}

.bci__cellIndex span {
  color: var(--ink-dim);
}

.bci__cell h3 {
  position: relative;
  margin-top: 0.85rem;
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
}

.bci__cell p {
  position: relative;
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
}


/* --- Les réseaux pratiqués, en pied du périmètre ------------------------
   Une ligne, pas une grille. Une version antérieure en faisait une section
   entière avec trois cartes remplies de pastilles : deux mises en page
   concurrentes côte à côte, sans hiérarchie lisible. Ce n'est pourtant qu'une
   liste de références — la forme d'une liste lui suffit. */

.bci__refs {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.bci__refs h3 {
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.bci__refs p {
  margin-top: 0.7rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ==========================================================================
   Bloc signature — mesure, réflectométrie et méthode
   ========================================================================== */

.bci__measure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 92% 0%, rgba(104, 48, 232, 0.08) 0%, transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(24, 88, 232, 0.08) 0%, transparent 60%),
    var(--paper);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.bci__measureGrid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .bci__measureGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
  }
}

.bci__measure h2 {
  margin-top: 1rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.bci__measure > .bci__measureGrid p {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.68;
}

.bci__specs {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.bci__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
}

.bci__spec:first-child {
  border-top: 0;
}

.bci__spec dt {
  color: var(--ink-dim);
}

.bci__spec dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* ==========================================================================
   Référencement et conformité
   ========================================================================== */

.bci__compliance {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 940px) {
  .bci__compliance {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

.bci__compliance h2 {
  margin-top: 1rem;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
}

.bci__docs {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.bci__doc {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
}

.bci__doc:first-child {
  border-top: 0;
}

.bci__docMark {
  flex: none;
  width: 9px;
  height: 15px;
  margin-top: 0.4rem;
  border-radius: 1px;
  background: var(--fibre);
  transform: skewX(var(--tilt));
}

.bci__doc strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
}

.bci__doc span {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}


/* ==========================================================================
   Modalités d'intervention
   ========================================================================== */

/* --------------------------------------------------------------------------
   Questions fréquentes — voir app/components/bycom/BycomHome.tsx.

   Accordéon `<details>` natif : aucune ligne de script, le clavier et les
   lecteurs d'écran fonctionnent d'origine, et le contenu reste dans le HTML —
   ce qu'exige le `FAQPage` du JSON-LD.

   UNE seule colonne, volontairement : un accordéon en deux colonnes fait sauter
   la colonne voisine à chaque ouverture. La largeur est bornée en `ch` pour que
   les lignes restent lisibles malgré la pleine largeur du bloc.
   -------------------------------------------------------------------------- */

.bci__qa {
  display: grid;
  gap: 0.6rem;
  max-width: 78ch;
}

.bci__qaItem {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.bci__qaItem:hover {
  border-color: var(--line-strong);
}

.bci__qaItem[open] {
  border-color: rgba(24, 88, 232, 0.35);
  box-shadow: var(--shadow-sm);
}

.bci__qaItem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
}

/* Le triangle par défaut de <summary>, dans ses deux syntaxes de moteur. */
.bci__qaItem summary::-webkit-details-marker {
  display: none;
}

.bci__qaItem summary::marker {
  content: "";
}

.bci__qaItem summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.bci__qaItem summary h3 {
  margin: 0;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.35;
}

/* Signe « + » tracé en CSS : deux barres, dont l'une pivote à l'ouverture. Pas
   d'icône importée pour un trait de 11 px. */
.bci__qaSign {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(24, 88, 232, 0.09);
  transition: background-color 0.25s var(--ease);
}

.bci__qaSign::before,
.bci__qaSign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blue);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}

.bci__qaSign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.bci__qaItem[open] .bci__qaSign {
  background: var(--blue);
}

.bci__qaItem[open] .bci__qaSign::before,
.bci__qaItem[open] .bci__qaSign::after {
  background: var(--paper);
}

/* La barre verticale rejoint l'horizontale : le « + » devient « − ». */
.bci__qaItem[open] .bci__qaSign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.bci__qaBody {
  padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
}

.bci__qaBody p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-dim);
  font-size: clamp(0.92rem, 1.15vw, 1rem);
  line-height: 1.7;
}

/* Ouverture animée, sauf si le visiteur a demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .bci__qaItem[open] .bci__qaBody {
    animation: bci-qa-open 0.3s var(--ease);
  }
}

@keyframes bci-qa-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.bci__terms {
  display: grid;
  gap: 1rem;
}

@media (min-width: 720px) {
  .bci__terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .bci__terms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bci__term {
  height: 100%;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.bci__termIcon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.bci__term h3 {
  margin-top: 1.05rem;
  font-size: 1.08rem;
}

.bci__term p {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.bci__contact {
  background: rgba(240, 244, 252, 0.9);
  border-top: 1px solid var(--line-soft);
}

.bci__contactGrid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* Le panneau ne devient collant QUE dans la mise en page à deux colonnes.
   --------------------------------------------------------------------------
   Posé sans condition, il restait collé en haut de l'écran sur mobile — où la
   grille n'a plus qu'une colonne — pendant que le formulaire défilait dessous :
   les deux se superposaient et devenaient illisibles. Un élément `sticky` n'a
   de sens qu'à côté d'une colonne qui défile, jamais au-dessus d'elle.

   `align-items: start` sur la grille est indispensable au même endroit : sans
   lui la colonne s'étire sur toute la hauteur et `sticky` n'a plus de course.

   ARC RENOV et SHA 25 prennent la même précaution, chacun dans sa feuille
   (`.quote-section__aside` repasse en `static` sous 900 px, `.s25__quoteAside`
   n'est collant que dans son point de rupture haut). */
@media (min-width: 980px) {
  .bci__contactGrid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: start;
  }

  .bci__contactAside {
    position: sticky;
    top: 96px;
  }
}

.bci__contactAside h2 {
  margin-top: 1rem;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
}

.bci__contactAside > p {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.68;
  max-width: 42ch;
}

.bci__direct {
  display: grid;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.bci__direct a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--line-soft);
  transition: background-color 0.2s var(--ease);
}

.bci__direct a:first-child {
  border-top: 0;
}

.bci__direct a:hover {
  background: rgba(24, 88, 232, 0.05);
}

.bci__direct span {
  color: var(--ink-dim);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-display), var(--font-sans), sans-serif;
}

.bci__direct strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Formulaire mutualisé, repeint --------------------------------------
   Le composant QuoteForm est partagé par tous les gabarits (AGENTS.md,
   § Principes) : ses classes viennent de globals.css, taillées pour ARC RENOV.
   On ne le duplique pas, on le repeint. Les sélecteurs d'origine montent à
   0,3,1 — les nôtres portent donc `.bci` EN PLUS de la classe visée. Aucune de
   ces règles ne touche un NOM de champ : le Worker les valide un par un. */

.bci__form {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.bci .quote-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bci .quote-form__heading h2,
.bci .quote-form h2 {
  color: var(--ink);
  font-family: var(--font-sans), sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
}

.bci .quote-form__heading > p {
  color: var(--ink-soft);
}

.bci .section-kicker {
  color: var(--blue);
}

.bci .section-kicker::before {
  width: 12px;
  height: 17px;
  background: var(--fibre);
  transform: skewX(var(--tilt));
  border-radius: 1px;
}

.bci .quote-form label > span:not(.file-field__box) {
  color: var(--ink-soft);
}

.bci .quote-form input:not([type="checkbox"]):not([type="file"]),
.bci .quote-form select,
.bci .quote-form textarea {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.bci .quote-form input::placeholder,
.bci .quote-form textarea::placeholder {
  color: var(--ink-dim);
  opacity: 1;
}

.bci .quote-form input:hover,
.bci .quote-form select:hover,
.bci .quote-form textarea:hover {
  border-color: rgba(24, 88, 232, 0.45);
}

.bci .quote-form input:focus,
.bci .quote-form select:focus,
.bci .quote-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24, 88, 232, 0.14);
}

.bci .file-field__box {
  border-color: var(--line-strong);
  background: var(--paper-2);
}

.bci .file-field:hover .file-field__box,
.bci .file-field input:focus-visible + .file-field__box {
  border-color: var(--blue);
  background: rgba(24, 88, 232, 0.06);
}

.bci .file-field__box strong {
  color: var(--ink);
}

.bci .file-field__box small,
.bci .file-field__title small {
  color: var(--ink-dim);
}

.bci .selected-files li {
  color: var(--ink-soft);
  background: var(--paper-2);
  border-color: var(--line);
}

.bci .consent span {
  color: var(--ink-soft);
}

.bci .consent input {
  accent-color: var(--blue);
}

.bci .form-footnote {
  color: var(--ink-dim);
}

.bci .form-footnote a,
.bci .quote-form a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bci .quote-form button[type="submit"] {
  width: 100%;
  color: #fff;
  background: var(--fibre);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans), sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: var(--shadow-blue);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.bci .quote-form button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(24, 88, 232, 0.62);
}

.bci .quote-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.bci__footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.bci__footerTop {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 780px) {
  .bci__footerTop {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.bci__footerTop p {
  margin-top: 0.9rem;
  max-width: 40ch;
  line-height: 1.6;
}

.bci__footerContacts {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

@media (min-width: 780px) {
  .bci__footerContacts {
    justify-items: end;
    text-align: right;
  }
}

.bci__footerContacts a:hover {
  color: var(--blue);
}

.bci__footerBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}

.bci__footerLegal {
  display: flex;
  gap: 1.1rem;
}

.bci__footerLegal a:hover,
.bci__footerBottom > a:hover {
  color: var(--blue);
}


/* ==========================================================================
   Pages légales
   --------------------------------------------------------------------------
   Mentions légales et confidentialité partagent leur CODE avec les autres
   artisans (voir app/components/TenantChrome.tsx) : mêmes composants, mêmes
   données, mêmes règles. Seul l'habillage change. Leur corps utilise donc les
   classes de app/globals.css — `.offer`, `.container`, `.section-heading` —
   taillées pour ARC RENOV ; elles sont repeintes ici, jamais dupliquées.
   ========================================================================== */

.bci .offer {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}

.bci .container {
  width: 100%;
  max-width: 76ch;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.bci .section-heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.bci .section-heading h1 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--ink);
}

.bci .offer article {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.bci .offer article h2 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--ink);
}

.bci .offer article p,
.bci .offer article li {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.bci .offer article ul {
  margin-top: 0.6rem;
  padding-inline-start: 1.1rem;
  list-style: disc;
}

.bci .offer article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lien LinkedIn du pied de page. Le réseau est un canal de sourcing majeur
   dans la fibre : les donneurs d'ordre y cherchent leurs sous-traitants. */
.bci__social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}

.bci__social img,
.bci__direct img,
.bci__btn--icon img,
.bci__dockIcon img {
  width: 18px;
  height: 18px;
  flex: none;
}

.bci__social:hover {
  color: var(--blue);
}

/* ==========================================================================
   Barre d'actions mobile
   ========================================================================== */

/* Trois actions quand le profil LinkedIn existe, deux sinon. Le réseau est un
   canal de sourcing majeur dans la fibre : il tient la même place que le
   numéro, pas une icône sociale reléguée en pied de page. */
.bci__dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

.bci__dock a {
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.96rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
}

.bci__dock[data-linkedin] {
  grid-template-columns: 1fr auto 1fr;
}

.bci__dockIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.95rem;
}

.bci__dock a:last-child {
  color: #fff;
  border-color: transparent;
  background: var(--fibre);
}

@media (min-width: 900px) {
  .bci__dock {
    display: none;
  }
}

/* La barre couvre le bas de l'écran : sans cette réserve, le dernier lien du
   pied de page passe dessous et devient incliquable. */
@media (max-width: 899px) {
  .bci__footer {
    padding-bottom: 6rem;
  }
}