/* =========================================================================
   FIBRE OPTIQUE — « Le chemin de la lumière »
   Direction technique, façon catalogue industriel : en-tête sombre, titre sur toute la largeur traversé par
   un trait turquoise d'un pixel (la lumière qui part vers la droite), photo posée comme une planche, fiche
   technique en grands chiffres, parcours relié par une ligne, tableau de modules en fiche de spécification.
   Angles droits ou presque (2 px), aucun halo.
   ========================================================================= */

/* ---------- En-tête ---------- */
.fxt-hero--fib { position: relative; overflow: hidden; background: var(--noir-jais); color: var(--creme); }
.fxt-hero--fib .fxt-hero__inner { display: grid; padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.fxt-hero--fib .fx-bc { color: rgba(244, 250, 249, .72); padding-bottom: clamp(1.5rem, 4.5vw, 3.25rem); }
.fxt-hero--fib .fx-bc a { color: rgba(244, 250, 249, .86); text-decoration-color: rgba(244, 250, 249, .3); }
.fxt-hero--fib .fx-bc a:hover { color: var(--creme); }
.fxt-hero--fib .fx-bc li + li::before { color: rgba(244, 250, 249, .45); }
.fxt-hero--fib .fx-bc [aria-current="page"] { color: var(--creme); }
.fxt-hero--fib .fx-kicker { color: rgba(244, 250, 249, .78); letter-spacing: .18em; }
.fxt-hero--fib .fx-kicker::before { width: 8px; height: 8px; background: var(--turquoise); }
.fxt-hero--fib .fx-h1 { position: relative; max-width: none; margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem); padding-bottom: clamp(1rem, 2.5vw, 1.75rem); color: var(--creme); font-size: clamp(2.4rem, 7.2vw, 6rem); line-height: .95; letter-spacing: -.045em; }
.fxt-hero--fib .fx-h1 .fx-mark { color: var(--creme); }
/* le trait lumineux : part du début du titre et sort de l'écran du côté de la lecture */
.fxt-hero--fib .fx-h1::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: -100vmax; height: 1px; background: var(--turquoise); }
.fxt-hero--fib .fx-lead { color: rgba(244, 250, 249, .86); max-width: 50ch; margin-bottom: 1.75rem; }
.fxt-hero--fib .fx-verified { color: rgba(244, 250, 249, .72); }
.fxt-hero--fib .fx-verified .fx-ic { color: var(--turquoise); }
.fxt-hero--fib .btn, .fx-theme--fib .fx-final .btn { border-radius: 2px; }
.fxt-hero--fib .btn--outline { color: var(--creme); background: transparent; border-color: rgba(244, 250, 249, .45); }
.fxt-hero--fib .btn--outline:hover { border-color: var(--creme); color: var(--creme); background: rgba(244, 250, 249, .06); }
.fxt-hero--fib .fxt-hero__photo { margin: clamp(1.75rem, 5vw, 2.5rem) 0 0; }
.fxt-hero--fib .fxt-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.fxt-hero--fib .fxt-hero__photo figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-bottom: 1px solid rgba(244, 250, 249, .18); font-size: var(--fs-micro); letter-spacing: .04em; color: rgba(244, 250, 249, .72); }
@media (min-width: 1024px) {
  .fxt-hero--fib .fxt-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .fxt-hero--fib .fxt-hero__inner > * { grid-column: 1; }
  .fxt-hero--fib .fx-bc, .fxt-hero--fib .fx-kicker, .fxt-hero--fib .fx-h1 { grid-column: 1 / -1; }
  .fxt-hero--fib .fxt-hero__photo { grid-column: 2; grid-row: 4 / span 4; margin: 0; }
  .fxt-hero--fib .fx-verified { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
}

/* ---------- Fiche technique : continuation sombre de l'en-tête ---------- */
.fib-spec { background: var(--noir-jais); color: var(--creme); padding-block: 0 clamp(1.5rem, 3vw, 2.25rem); }
.fib-spec__grid { display: grid; margin: 0; border-top: 1px solid rgba(244, 250, 249, .18); }
/* mobile : une ligne par repère, le chiffre en marge */
.fib-spec__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid rgba(244, 250, 249, .18); }
.fib-spec__big { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-titre); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .9; letter-spacing: -.04em; color: var(--creme); font-variant-numeric: tabular-nums; }
.fib-spec dt { grid-column: 2; font-family: var(--font-titre); font-weight: 600; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 250, 249, .7); }
.fib-spec dd { grid-column: 2; margin: .2rem 0 0; font-size: .95rem; line-height: 1.45; color: rgba(244, 250, 249, .86); }
.fib-spec__item--text { display: block; }
.fib-spec__item--text dd { color: var(--creme); font-size: 1rem; }
@media (min-width: 600px) {
  .fib-spec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fib-spec__item { display: flex; flex-direction: column; gap: .3rem; padding: clamp(1.1rem, 3vw, 1.75rem) clamp(.75rem, 2vw, 1.5rem) clamp(1.1rem, 3vw, 1.5rem); }
  .fib-spec__item:first-child { padding-inline-start: 0; }
  .fib-spec__item + .fib-spec__item { border-inline-start: 1px solid rgba(244, 250, 249, .18); }
  .fib-spec dt { order: -1; }
  .fib-spec dd { margin: 0; }
  .fib-spec__item--text { grid-column: 1 / -1; justify-content: center; padding-inline-start: 0; border-inline-start: 0 !important; }
}
@media (min-width: 900px) {
  .fib-spec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
  .fib-spec__item--text { grid-column: auto; padding-inline-start: clamp(.75rem, 2vw, 1.5rem); border-inline-start: 1px solid rgba(244, 250, 249, .18) !important; }
}
.fib-spec__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1rem; font-size: var(--fs-small); color: rgba(244, 250, 249, .78); }
.fib-spec__foot .fxt-practical dt { color: rgba(244, 250, 249, .78); }
.fib-spec__foot .fxt-practical a { color: var(--creme); text-decoration-color: rgba(244, 250, 249, .45); }
.fib-spec__foot .fx-card__note { margin: 0; color: rgba(244, 250, 249, .72); max-width: 72ch; }
.fib-spec a:focus-visible { outline-color: var(--turquoise); }

/* ---------- Sections : filet noir et numéro espacé ---------- */
.fx-theme--fib .fx-body { padding-top: clamp(1rem, 3vw, 2rem); }
.fx-theme--fib .fx-sec { border-top: 0; padding-block: clamp(2.25rem, 5vw, 4rem); }
.fx-theme--fib .fx-sec__head { grid-template-columns: 1fr; padding-top: 1rem; border-top: 1px solid var(--noir-jais); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.fx-theme--fib .fx-num { font-size: var(--fs-micro); letter-spacing: .24em; color: var(--noir-jais); }
.fx-theme--fib .fx-sec__head h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -.03em; line-height: 1.08; max-width: 24ch; }
.fx-theme--fib .fx-sec__head p { grid-column: 1; }

/* 01 — Parcours : trois nœuds reliés par la ligne */
.fx-theme--fib .fx-path { position: relative; gap: 0; }
.fx-theme--fib .fx-path > li { border: 0; border-radius: 0; background: transparent; padding: 0 0 1.75rem 2.25rem; padding-inline: 2.25rem 0; }
.fx-theme--fib .fx-path > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3rem; width: 11px; height: 11px; background: var(--noir-jais); }
.fx-theme--fib .fx-path > li:last-child::before { background: var(--turquoise); outline: 1px solid var(--noir-jais); }
.fx-theme--fib .fx-path > li::after { content: ""; position: absolute; inset-inline-start: 5px; top: 1rem; bottom: 0; width: 1px; background: var(--noir-jais); }
.fx-theme--fib .fx-path > li:last-child::after { content: none; }
.fx-theme--fib .fx-path__step { color: var(--granit); letter-spacing: .16em; }
.fx-theme--fib .fx-path h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.02em; }
.fx-theme--fib .fx-path__who { color: var(--epinette); }
@media (min-width: 860px) {
  .fx-theme--fib .fx-path { gap: clamp(1.5rem, 3vw, 3rem); }
  .fx-theme--fib .fx-path > li { padding: 2rem 0 0; border-radius: 0 !important; border: 0 !important; }
  .fx-theme--fib .fx-path > li::before { top: 0; }
  .fx-theme--fib .fx-path > li::after { inset-inline-start: 0; inset-inline-end: calc(-1 * clamp(1.5rem, 3vw, 3rem)); top: 5px; bottom: auto; width: auto; height: 1px; }
  .fx-theme--fib .fx-path > li:last-child::after { content: ""; inset-inline-end: 0; }
}

/* 02 — Modules : fiche de spécification */
.fx-theme--fib .fx-table-wrap { border: 0; border-top: 2px solid var(--noir-jais); border-radius: 0; background: transparent; }
.fx-theme--fib .fx-table thead th { background: transparent; color: var(--granit); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; }
.fx-theme--fib #modules tbody td:first-child { font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; color: var(--noir-jais); letter-spacing: -.03em; font-variant-numeric: tabular-nums; width: 4.5rem; }
.fx-theme--fib #modules tbody th { font-family: var(--font-titre); font-size: 1rem; color: var(--noir-jais); }
.fx-theme--fib #modules tbody tr:hover > * { background: #fff; }
@media (max-width: 719px) {
  .fx-theme--fib #modules .fx-table--stack th, .fx-theme--fib #modules .fx-table--stack td { padding-inline: 0; }
  .fx-theme--fib #modules tbody td:first-child { width: auto; }
  .fx-theme--fib #modules tbody td:first-child::before { display: none; }
}

/* 03 — Formats : onglets soulignés */
.fx-theme--fib .fx-tabs__list { gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--fx-rule); }
.fx-theme--fib .fx-tab { border: 0; border-radius: 0; background: transparent; padding-inline: 1.1rem; box-shadow: inset 0 -2px 0 transparent; color: var(--granit); }
.fx-theme--fib .fx-tab:hover { color: var(--noir-jais); box-shadow: inset 0 -2px 0 var(--granit-20); }
.fx-theme--fib .fx-tab[aria-selected="true"] { background: transparent; color: var(--noir-jais); box-shadow: inset 0 -3px 0 var(--noir-jais); }
.fx-theme--fib .fx-tabpanel { border: 0; border-inline-start: 2px solid var(--turquoise); border-radius: 0; background: #fff; margin-top: 1.25rem; padding: 1.25rem 1.5rem; }
@media (max-width: 479px) { .fx-theme--fib .fx-tab { flex: 1 1 50%; padding-inline: .5rem; } }

/* 04 — Repères techniques : bande sombre, quatre repères numérotés */
.fx-theme--fib #reperes { --fxt-bleed: var(--noir-jais); counter-reset: fibrep; }
.fx-theme--fib #reperes .fx-sec__head { border-top-color: rgba(244, 250, 249, .4); }
.fx-theme--fib #reperes .fx-num { color: var(--creme); }
.fx-theme--fib #reperes .fx-prose { max-width: none; }
.fx-theme--fib #reperes .fx-prose ul { display: grid; gap: 0 clamp(1.5rem, 4vw, 3.5rem); margin: 0; }
@media (min-width: 860px) { .fx-theme--fib #reperes .fx-prose ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-theme--fib #reperes .fx-prose ul > li { counter-increment: fibrep; margin: 0; padding: 1.1rem 0 1.25rem; padding-inline-start: 0; border-top: 1px solid rgba(244, 250, 249, .18); }
.fx-theme--fib #reperes .fx-prose ul > li::before { content: counter(fibrep, decimal-leading-zero); position: static; display: block; width: auto; height: auto; margin-bottom: .4rem; background: none; font-family: var(--font-titre); font-weight: 600; font-size: var(--fs-micro); letter-spacing: .2em; color: var(--turquoise); }

/* 05 — Ressources : images à bord franc */
.fx-theme--fib .fx-res__item { border-radius: 0; border: 0; border-bottom: 1px solid var(--noir-jais); background: transparent; }
.fx-theme--fib .fx-res__body { padding-inline: 0; }

/* Liens croisés, FAQ, sources, bandeau final */
.fx-theme--fib .fx-related a { border-radius: 2px; }
.fx-theme--fib .fx-faq { border-top-color: var(--noir-jais); }
.fx-theme--fib .fx-faq summary::after { border-radius: 2px; }
.fx-theme--fib .fx-sources-all { border-radius: 2px; }
.fx-theme--fib .fx-note { border-radius: 2px; }
/* bandeau final clair : le trait lumineux de l'en-tête revient au-dessus du titre */
.fx-theme--fib .fx-final { position: relative; margin-bottom: clamp(1.5rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3.5rem) 0; border-radius: 0; background: transparent; color: var(--noir-jais); }
.fx-theme--fib .fx-final::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--turquoise); }
.fx-theme--fib .fx-final h2 { color: var(--noir-jais); font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.035em; line-height: 1.05; }
.fx-theme--fib .fx-final p { color: var(--granit); max-width: 56ch; }
.fx-theme--fib .fx-final .btn--ghost { color: var(--noir-jais); border-color: var(--noir-jais); }
.fx-theme--fib .fx-final .btn--ghost:hover { background: var(--granit-12); }