/* ============================================================
   schematic.css — le monde : un schéma unifilaire.
   La page descend comme un circuit : la source (le besoin du
   visiteur), le jeu de barres, les huit départs, puis la charge
   (la demande envoyée au comptoir).
   ============================================================ */

/* ─────────────────────────────────────────── DEVANTURE (1er écran)
   Ce que le visiteur doit comprendre avant tout : quel commerce c'est.
   Le vrai logo à l'échelle d'une enseigne, ce qu'on y trouve, et la
   photo de la façade dans son cadrage d'origine — aucune mise à
   l'échelle vers le haut, donc aucun flou. */

.storefront {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(255, 234, 50, .13) 0%, transparent 55%),
    linear-gradient(172deg, var(--panel-up) 0%, var(--panel) 38%, var(--panel-deep) 100%);
  overflow: hidden;
}
.storefront-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.storefront-mark {
  width: min(430px, 84%); height: auto;
  background: var(--plate);
  padding: .9rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* Trois mots longs à la suite : ce titre se cale sur la largeur de sa
   colonne, pas sur le calibre maximal du site, sinon il déborde sous
   la photo. */
.storefront-copy h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  margin-bottom: 1.1rem;
}
.storefront-lede {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--on-panel-soft);
  max-width: 44ch;
  margin-bottom: 1.7rem;
}

.storefront-actions {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-bottom: 1.8rem;
}
.btn-outline {
  background: transparent;
  color: var(--on-panel);
  border-color: var(--hairline-strong);
  font-family: var(--face-mark);
  font-weight: 600; letter-spacing: .04em;
}
.btn-outline:hover { border-color: var(--live); color: var(--live); }

.storefront-hours {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.storefront-hours > div { display: grid; gap: .3rem; }
.storefront-hours dt {
  font-family: var(--face-mark);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--live);
}
.storefront-hours dd { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--on-panel); }

/* La photo est une vraie photo de midi, ciel bleu franc : telle quelle
   elle percerait l'enceinte. On la recadre sur le bâtiment, on retient
   un peu la saturation, et un dégradé la fait fondre dans le fond. */
.storefront-photo { margin: 0; position: relative; }
.storefront-photo img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 26%;
  filter: saturate(.82) contrast(1.04) brightness(.92);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
}
/* Le fondu vers le fond est porté par l'image elle-même : un calque
   posé par-dessus laissait une arête visible au bas du cadre. */
.storefront-photo img {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 100%);
}
.storefront-photo figcaption {
  margin-top: .8rem;
  font-family: var(--face-mark);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-panel-soft);
}

@media (max-width: 900px) {
  .storefront-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .storefront-photo { order: -1; }
  /* En pile, la photo portrait mangerait tout l'écran : on la recadre. */
  .storefront-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%; }
  .storefront-mark { width: min(340px, 78%); }
}

/* ─────────────────────────────────────────── SOURCE (la demande) */

.source {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0;
  background: var(--panel-deep);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
}

.source-grid { max-width: var(--max); margin: 0 auto; }

.source-copy h2 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: 1.2rem;
}
/* La seconde ligne est le conducteur qui se ferme : elle est sous tension. */
.source-copy h2 em {
  font-style: normal;
  color: var(--live);
}

.source-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  color: var(--on-panel-soft);
  max-width: 46ch;
  margin-bottom: 2.4rem;
}

/* --- Le champ de demande : l'action primaire, dans le 1er écran ---- */
.ask { max-width: 46rem; }
.ask-label {
  display: block;
  font-family: var(--face-mark);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--live);
  margin-bottom: .6rem;
}
.ask-row {
  display: flex; gap: .6rem;
  padding: .45rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline-strong);
  border-radius: calc(var(--radius) + 3px);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ask-row:focus-within {
  border-color: var(--live);
  box-shadow: 0 0 0 1px var(--live), 0 18px 40px -22px rgba(255, 234, 50, .6);
}
/* Mise sous tension au chargement : le champ s'allume une fois, quand
   l'impulsion partie du nœud source l'atteint (js/schematic.js). */
.ask-row.is-live { animation: ask-energize .9s var(--ease-out) both; }
@keyframes ask-energize {
  0%   { border-color: var(--hairline-strong); box-shadow: 0 0 0 0 rgba(255,234,50,0); }
  35%  { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-soft); }
  100% { border-color: var(--hairline-strong); box-shadow: 0 0 0 0 rgba(255,234,50,0); }
}

.ask-row input {
  flex: 1 1 auto; min-width: 0;
  background: transparent;
  border: 0;
  color: var(--on-panel);
  font-family: var(--face-text);
  font-size: 1rem;
  padding: .85rem .9rem;
}
.ask-row input::placeholder { color: #93a898; }
.ask-row input:focus { outline: none; }
.ask-row .btn { flex: none; }

.ask-note {
  margin-top: .85rem;
  font-size: .86rem;
  color: var(--on-panel-soft);
}

/* --- Le conducteur qui quitte la source vers le tableau -------------
   Même gouttière et même retrait que le jeu de barres du tableau
   (4,4 rem) : la ligne qui descend d'ici est celle qui alimente C1. */
.source-conductor {
  position: relative;
  max-width: var(--max);
  margin: clamp(1.6rem, 3.5vw, 2.6rem) auto 0;
  height: clamp(3rem, 6vw, 5rem);
}
.cond-node,
.cond-line { position: absolute; left: 4.4rem; }
.cond-node {
  top: -5px;
  width: 11px; height: 11px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 5px var(--live-soft);
}
.cond-line {
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--live) 0%, var(--live-warm) 100%);
  transform-origin: top;
}
.is-drawn .cond-line { animation: cond-draw 1s var(--ease-out) .2s both; }
@keyframes cond-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 860px) {
  .cond-node, .cond-line { left: 3.1rem; }
}
@media (max-width: 620px) {
  .ask-row { flex-direction: column; }
  .ask-row .btn { width: 100%; }
}
/* Sous 520px le tableau perd son jeu de barres : le conducteur qui
   l'alimente n'aurait plus rien à rejoindre. */
@media (max-width: 520px) {
  .source-conductor { display: none; }
}

/* ─────────────────────────────────────────── TABLEAU DES CIRCUITS */

.panel {
  padding: 0 var(--gutter) clamp(4rem, 9vw, 7rem);
  background: var(--panel-deep);
}
.panel-head { max-width: var(--max); margin: 0 auto clamp(2rem, 3.5vw, 3rem); }
.panel-head h2 { max-width: 18ch; }
.panel-head p { color: var(--on-panel-soft); font-size: 1.06rem; }

.circuits {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto; padding: 0;
  position: relative;
}
/* Le jeu de barres : une seule verticale qui alimente tous les départs. */
.circuits::before {
  content: "";
  position: absolute; left: 4.4rem; top: 1.6rem; bottom: 1.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--live) 0%, var(--live-warm) 62%, rgba(255,197,49,.22) 100%);
  transform-origin: top;
  transform: scaleY(var(--bus, 1));
}
.is-drawn .circuits::before { animation: bus-draw 1.1s var(--ease-out) .1s both; }
@keyframes bus-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.circuit {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem 3.6rem 2.9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1.15rem;
  padding: 1.5rem 1.2rem 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: background-color .22s var(--ease-out);
}
.circuit:first-child { border-top: 1px solid var(--hairline); }
.circuit:hover, .circuit:focus-within { background: rgba(255, 234, 50, .045); }

/* Le départ : la dérivation horizontale qui relie la barre au symbole. */
.circuit::before {
  content: "";
  position: absolute; left: 4.4rem; top: 50%;
  width: 3.5rem; height: 2px;
  background: var(--hairline-strong);
  transform-origin: left; transform: scaleX(1);
  transition: background-color .22s var(--ease-out);
}
.is-drawn .circuit::before {
  animation: stub-draw .5s var(--ease-out) calc(.5s + var(--i) * .07s) both;
}
@keyframes stub-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.circuit:hover::before, .circuit:focus-within::before { background: var(--live); }

.circuit-id {
  font-family: var(--face-mark);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  color: var(--on-panel-soft);
  text-align: right;
  align-self: center;
}
.circuit:hover .circuit-id, .circuit:focus-within .circuit-id { color: var(--live); }

.circuit-sym {
  grid-column: 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-panel-soft);
  transition: color .22s var(--ease-out);
}
.circuit-sym svg {
  width: 2.5rem; height: 2.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.circuit:hover .circuit-sym, .circuit:focus-within .circuit-sym { color: var(--live); }

.circuit-body h3 { margin-bottom: .35rem; color: var(--on-panel); }
.circuit-body p {
  margin: 0; font-size: .95rem; line-height: 1.55;
  color: var(--on-panel-soft);
  max-width: 62ch;
}
.circuit-body strong { color: var(--on-panel); font-weight: 700; }

.circuit-ask {
  font-family: var(--face-mark);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
  color: var(--on-panel);
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.circuit-ask:hover { background: var(--live); border-color: var(--live); color: var(--panel-deep); }
.circuit-ask:focus-visible { outline: 3px solid var(--live); outline-offset: 3px; }

.panel-foot {
  max-width: var(--max);
  margin: 2.2rem auto 0;
  color: var(--on-panel-soft);
  font-size: 1rem;
}
.panel-foot a { color: var(--live); text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .circuits::before { left: 3.1rem; }
  .circuit {
    grid-template-columns: 2.3rem 2.6rem minmax(0, 1fr);
    grid-template-areas:
      "id sym body"
      ".  .   ask";
    row-gap: .9rem;
    padding-right: 0;
  }
  .circuit::before { left: 3.1rem; width: 2.4rem; }
  .circuit-id  { grid-area: id; align-self: start; padding-top: .2rem; }
  .circuit-sym { grid-area: sym; align-self: start; }
  .circuit-sym svg { width: 2rem; height: 2rem; }
  .circuit-body { grid-area: body; }
  .circuit-ask { grid-area: ask; justify-self: start; }
}
@media (max-width: 520px) {
  /* Le conducteur de liaison disparaît à cette largeur : sans lui, le
     tableau doit reprendre sa propre respiration sous la plaque. */
  .panel { padding-top: clamp(2.4rem, 8vw, 3.4rem); }
  .circuits::before, .circuit::before { display: none; }
  .circuit {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    grid-template-areas:
      "id  body"
      "sym body"
      ".   ask";
    gap: .5rem .8rem;
    padding-left: 0;
  }
  .circuit-sym { justify-content: flex-start; }
}

/* ─────────────────────────────────────────── RELEVÉ DE SERVICE
   Les avis ne sont pas des cartes de témoignage : ce sont des
   annotations portées en marge du schéma, sur la même enceinte
   sombre que le tableau, chacune accrochée à sa ligne de rappel. */

.notes {
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 5.5rem);
  background: var(--panel-deep);
}
.notes h2 { max-width: var(--max); margin: 0 auto .8rem; }
.notes-lede {
  max-width: var(--max); margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  color: var(--on-panel-soft);
}

.annotations {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  row-gap: 2.2rem;
}
.annotation {
  position: relative;
  /* Les quatre annotations n'ont pas la même longueur : la grille les
     étire à la même hauteur et pousse la source en bas, pour que les
     lignes de rappel ET les attributions partagent une seule ligne de
     fond — comme sur une planche cotée. */
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 1.1rem;
  /* La ligne de rappel : le trait qui relie l'annotation à ce qu'elle
     commente, sur une planche annotée à la main. */
  border-top: 1px solid var(--hairline-strong);
}
.annotation::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 2.2rem; height: 3px;
  background: var(--live);
}
.annotation-text {
  margin: 0 0 .9rem;
  font-size: 1.02rem; line-height: 1.5;
  color: var(--on-panel);
  text-wrap: pretty;
}
.annotation-text::before { content: "« "; color: var(--on-panel-soft); }
.annotation-text::after  { content: " »"; color: var(--on-panel-soft); }
.annotation-src {
  margin: 0;
  font-family: var(--face-mark);
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-panel-soft);
}
.annotation-who { color: var(--on-panel); font-weight: 600; }

.notes-foot {
  max-width: var(--max);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  color: var(--on-panel-soft);
}

/* --- Le mot du président, là où il a sa place : dans l'histoire de
       l'entreprise, pas dans une section intitulée « les clients ». */
.owner-word {
  margin: 2rem 0 0;
  padding-left: 1.3rem;
  border-left: 1px solid var(--live);
}
.owner-word blockquote { margin: 0; }
.owner-word blockquote p {
  margin: 0 0 .6rem;
  font-size: 1.22rem; line-height: 1.35;
  font-weight: 500;
  color: var(--on-panel);
}
.owner-word blockquote p::before { content: "« "; color: var(--live); }
.owner-word blockquote p::after  { content: " »"; color: var(--live); }
.owner-word figcaption {
  font-family: var(--face-mark);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-panel-soft);
}

/* ─────────────────────────────────────────── LE COMPTOIR */

.counter {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  background: var(--panel-deep);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
}
.counter-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
}
.caption {
  margin-top: .8rem;
  font-family: var(--face-mark);
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-panel-soft);
}
.counter-copy h2 { color: var(--on-panel); margin-bottom: 1.3rem; }
.counter-copy p { color: var(--on-panel-soft); }
.counter-copy em { color: var(--on-panel); font-style: italic; }

@media (max-width: 820px) {
  .counter { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────── LA CHARGE (demande) */

.request {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 234, 50, .10) 0%, transparent 62%),
    var(--panel-deep);
  border-top: 2px solid var(--live);
}
.request-inner { max-width: 62rem; margin: 0 auto; }
.request h2 { text-align: center; }
.request-lede {
  text-align: center;
  margin: 0 auto 2.6rem;
  color: var(--on-panel-soft);
  font-size: 1.06rem;
}

/* ─────────────────────────────────────────── LE SOL (pied de page) */

.ground {
  background: var(--panel-deep);
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
}
.ground-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.4rem;
}
.ground h3 {
  font-family: var(--face-mark);
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--live);
  margin-bottom: .9rem;
}
.ground p { color: var(--on-panel-soft); }
.ground a { color: var(--on-panel); text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.ground a:hover { text-decoration-color: var(--live); }
.ground a:focus-visible { outline: 3px solid var(--live); outline-offset: 2px; }
.ground-mark img {
  width: 190px; height: auto;
  background: var(--plate);
  padding: .55rem .7rem;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
}
.ground-note { font-size: .88rem; margin-top: .8rem; }

.hours { border-collapse: collapse; font-size: .93rem; }
.hours th, .hours td { text-align: left; vertical-align: top; padding: .3rem 1.2rem .3rem 0; }
.hours th {
  font-family: var(--face-mark);
  font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-panel-soft);
  white-space: nowrap;
  padding-top: .42rem;
}
.hours td { color: var(--on-panel); }

.ground-legal {
  max-width: var(--max); margin: 2.6rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--face-mark);
  font-size: .68rem; letter-spacing: .06em;
  color: var(--on-panel-soft);
}

/* ─────────────────────────────────────────── MOUVEMENT RÉDUIT */

@media (prefers-reduced-motion: reduce) {
  .is-drawn .cond-line,
  .is-drawn .circuits::before,
  .is-drawn .circuit::before,
  .ask-row.is-live { animation: none; }
  .btn, .circuit, .circuit::before, .circuit-sym, .circuit-ask, .ask-row { transition: none; }
}