/* ════════════════════════════════════════════════════════════
   L'ESPACE GEFF-WAYS
   Le second atelier du Studio. On y bascule d'un clic sur le
   logo, et tout l'ecran change d'univers.

   La charte vient de l'appli Reseau, pas du site vitrine : le
   reseau est deja une interface, ses valeurs sont faites pour
   qu'on y travaille des heures. Noir-brun, caramel, texte creme.

   Tout tient dans les VARIABLES du Studio : les redefinir repeint
   l'en-tete, les cartes, l'agenda et Margaux d'un seul coup, sans
   dupliquer une seule regle de mise en page.
   ════════════════════════════════════════════════════════════ */

body.espace-gw {
  --noir:    #050302;
  --bg:      #080503;                    /* void */
  --panel:   #150e09;                    /* ink */
  --panel-2: #1d1309;
  --line:    rgba(243,236,226,.10);
  --border:  #2d1e13;
  --txt:     #f3ece2;                    /* paper */
  --soft:    rgba(243,236,226,.62);
  --mute:    rgba(243,236,226,.34);
  --faint:   rgba(243,236,226,.16);
  --blue:    #c9773a;                    /* le caramel prend la place du bleu */
  --blue-dk: #a35c22;
  --primaire: 201,119,58;                /* et tous les fonds translucides suivent */
  --sans:    'Mulish', -apple-system, 'Segoe UI', sans-serif;
  /* Geff-Ways n'a pas de serif. Le Studio écrit ses titres en Cormorant ;
     ici c'est Syne — géométrique, large, contemporaine. On redéfinit la
     VARIABLE plutôt que de réécrire les trente règles qui l'utilisent :
     les titres de l'agenda, de la fiche, de Margaux et du chantier
     changent ensemble, et rien ne peut en oublier un. */
  --serif:   'Syne', 'Mulish', -apple-system, 'Segoe UI', sans-serif;
  --tan:     #c29775;
}

/* ── LE POIDS DES TITRES ──────────────────────────────────
   Les règles du Studio écrivent « font-weight: 300 » à côté du serif :
   c'est juste pour un Cormorant, c'est maigre pour un sans. On rattrape
   ici, une fois, pour tout l'atelier. Syne n'est chargée qu'en 600, 700
   et 800 — on ne demande rien d'autre, sinon le navigateur fabrique un
   faux gras et le dessin des lettres se salit. */
body.espace-gw .connexion h1,
body.espace-gw .gw-titre,
body.espace-gw .jour-salut {
  font-weight: 700; letter-spacing: -.022em;
}
body.espace-gw .fiche-nom,
body.espace-gw .gw-ch-nom,
body.espace-gw .arc-titre-texte,
body.espace-gw .modale-boite h2,
body.espace-gw .agent-tete h2,
body.espace-gw .sante-tete h2,
body.espace-gw .gw-bloc-tete h2 {
  font-weight: 600; letter-spacing: -.015em;
}
body.espace-gw .marque span,
body.espace-gw .marque-bascule span,
body.espace-gw .arc-entete .gauche,
body.espace-gw .arc-scrubber button,
body.espace-gw .agenda-rail .annee,
body.espace-gw .agenda-mois,
body.espace-gw .agenda-num {
  font-weight: 600; letter-spacing: -.005em;
}
/* les sigles sont des initiales : elles ont besoin d'être pleines */
body.espace-gw .pd-vide-sigle,
body.espace-gw .chantier-sigle,
body.espace-gw .carte-sigle,
body.espace-gw .gw-ch-sigle {
  font-weight: 800; letter-spacing: -.03em;
}

/* ── L'ARRIVÉE SUR LES SITES ──────────────────────────────
   Les cartes du chantier ne sont plus là d'un coup : elles montent l'une
   après l'autre, de haut en bas, cinquante-cinq millisecondes d'écart.
   C'est le même geste que les cairns de l'écran d'entrée — dans cet
   atelier, les choses arrivent, elles
   n'apparaissent pas. */
@keyframes gw-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes gw-monte {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
body.espace-gw .gw-chantier {
  animation: gw-arrive .62s cubic-bezier(.22, 1, .32, 1) backwards;
  animation-delay: calc(var(--rang, 0) * 55ms);
}
body.espace-gw .gw-bloc {
  animation: gw-monte .7s cubic-bezier(.22, 1, .32, 1) backwards;
  animation-delay: calc(var(--rang-bloc, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
  body.espace-gw .gw-chantier,
  body.espace-gw .gw-bloc { animation: none; }
}

/* Le fond du Studio est un aplat ; celui de Geff-Ways a une braise dans
   l'angle, comme le reseau. Discret : on travaille par-dessus. */
body.espace-gw::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 44vh at 12% 0%, rgba(163,92,34,.16), transparent 68%),
    radial-gradient(52vw 40vh at 92% 96%, rgba(194,151,117,.10), transparent 70%);
}

/* ── le logo, qui fait passer d'un monde a l'autre ────────── */
.marque { position: relative; }
.marque-bascule {
  display: flex; align-items: center; gap: .55rem;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; padding: 0;
}
.marque-bascule img { height: 26px; width: auto; display: block; }
.marque-bascule span {
  font-family: var(--serif); font-size: 19px; letter-spacing: .01em;
  color: var(--txt);
}

/* Le mot dit ou l on VA. Il descend sous la barre : on lui donne donc son
   propre fond, sinon il se posait sur le contenu de la page. */
.marque-vers {
  position: absolute; top: calc(100% + .5rem); left: 0; white-space: nowrap;
  padding: .28rem .6rem; border-radius: 20px;
  border: 1px solid var(--border); background: var(--panel);
  font-family: var(--sans); font-style: normal;
  color: var(--soft); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.marque:hover .marque-vers { opacity: 1; }

/* ── le voile de bascule ─────────────────────────────────────
   Passer d'un univers a l'autre d'un coup sec donne l'impression
   d'un bug. Un fondu de 320 ms, et on comprend qu'on a change de
   piece. */
.bascule-voile {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--bg); opacity: 0;
}
.bascule-voile.la { animation: basculeFondu .52s var(--ease); }
@keyframes basculeFondu { 0% { opacity: 0; } 42% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bascule-voile.la { animation: none; } }

/* ════════════════════════════════════════════════════════════
   LE CHANTIER — ou en sont le site et le reseau
   ════════════════════════════════════════════════════════════ */
.gw {
  max-width: 1240px; margin: 0 auto; padding: 2.6rem 2.2rem 4rem;
}
.gw-tete { margin-bottom: 2.4rem; }
.gw-quand { color: var(--mute); }
.gw-titre {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02;
  letter-spacing: -.01em; margin-top: .5rem;
}
.gw-titre em { font-style: italic; color: var(--tan); }
.gw-sous { color: var(--soft); margin-top: .7rem; max-width: 56ch; line-height: 1.65; }

.gw-bloc { margin-top: 2.8rem; }
.gw-bloc-tete {
  display: flex; align-items: baseline; gap: .8rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem;
}
.gw-bloc-tete h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--soft);
}
.gw-compte { color: var(--mute); font-size: 11px; letter-spacing: .14em; }
.gw-bloc-tete .btn-fin { margin-left: auto; }

/* ── une carte de chantier ── */
.gw-chantiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
/* Les enfants sont des <span> dans un <button> : sans cette colonne, tout se
   suivait sur une seule ligne. On les empile en flex — et surtout PAS avec un
   `display: block` general, qui ecrasait la mise en ligne des rangees. */
.gw-chantier {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 1.15rem 1.2rem 1.2rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.gw-chantier:hover { border-color: var(--blue); transform: translateY(-2px); }
/* la teinte du projet passe en filigrane dans l'angle */
.gw-chantier::after {
  content: ''; position: absolute; right: -30%; top: -60%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--teinte, transparent), transparent 66%);
  opacity: .5; pointer-events: none;
}
.gw-ch-haut { display: flex; align-items: center; gap: .7rem; }
.gw-ch-logo { height: 26px; width: auto; max-width: 120px; object-fit: contain; }
.gw-ch-sigle {
  font-family: var(--serif); font-size: 20px; color: var(--tan);
}
.gw-ch-nom { font-family: var(--serif); font-size: 23px; line-height: 1.1; margin-top: .5rem; }
.gw-ch-etat {
  display: flex; align-items: center; gap: .4rem; margin-top: .5rem;
  align-self: flex-start;
  color: var(--mute); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.gw-ch-etat::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--etat, var(--mute));
}
.gw-ch-dernier {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
  color: var(--soft); font-size: 12.5px; line-height: 1.6;
}
.gw-ch-dernier b { color: var(--tan); font-weight: 600; }
.gw-ch-rien { color: var(--faint); font-size: 12.5px; margin-top: .9rem; }
.gw-ch-bas {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem;
  margin-top: auto; padding-top: .9rem;
  color: var(--mute); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
}
.gw-ch-bas .alerte { color: #e0a05c; }

/* ── les liens du chantier ── */
.gw-liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.gw-lien {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--soft); font-size: 12px;
  transition: border-color .2s, color .2s, background .2s;
}
.gw-lien:hover { border-color: var(--blue); color: var(--txt); background: var(--panel-2); }
.gw-lien-quoi { color: var(--mute); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════
   LE FIL — ce qui s'est dit, ce qui s'est fait, date
   Repris le 17/09/2026 pour qu'on s'en serve vraiment : noter en trois
   clics (des puces au lieu de listes déroulantes, le dernier choix
   retenu), relire par genre ou par client, corriger une entrée.
   Sert aux deux fils : Geff-Ways et Conodor.
   ════════════════════════════════════════════════════════════ */
.fil-plan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.4rem; align-items: start; }
.fil-principal { min-width: 0; }

/* ── noter ── */
.fil-note {
  display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.8rem;
  padding: 1rem 1.1rem 1.05rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel);
  transition: border-color .2s, box-shadow .2s;
}
.fil-note:focus-within {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
  box-shadow: 0 0 0 4px rgba(var(--primaire),.07);
}
.fil-note textarea {
  resize: vertical; min-height: 66px; padding: .7rem .8rem; outline: none;
  background: var(--noir); border: 1px solid var(--border); border-radius: 10px;
  color: var(--txt); font-family: var(--sans); font-size: 14px; line-height: 1.6;
  transition: border-color .2s;
}
.fil-note textarea:focus { border-color: var(--blue); }
.fil-note-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; }
.fil-etiquette {
  flex: none; width: 62px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.fil-puces { display: flex; flex-wrap: wrap; gap: .35rem; }
.fil-puces button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .75rem; border-radius: 999px; border: 1px solid var(--border);
  color: var(--soft); font-family: var(--sans); font-size: 12px;
  transition: color .15s, border-color .15s, background .15s;
}
.fil-puces button:hover { color: var(--txt); border-color: color-mix(in srgb, var(--blue) 50%, var(--border)); }
.fil-puces button img { height: 15px; width: auto; max-width: 48px; object-fit: contain; }
.fil-puces button i { font-style: normal; font-size: 11px; color: var(--mute); }
.fil-puces button.ici { color: var(--txt); border-color: var(--blue); background: rgba(var(--primaire),.16); }
.fil-genres button::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--genre);
}
.fil-genres button.ici {
  border-color: var(--genre); background: color-mix(in srgb, var(--genre) 17%, transparent);
}
.fil-quand input[type="date"] {
  padding: .33rem .6rem; border-radius: 999px; outline: none;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
  font-family: var(--sans); font-size: 12px; color-scheme: dark;
}
.fil-quand input[type="date"]:focus { border-color: var(--blue); }
.fil-note-bas { margin-top: .1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.fil-raccourci { margin-left: auto; color: var(--faint); letter-spacing: .12em; }
.fil-choix-cible {
  max-width: 100%; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt);
  font-family: var(--sans); font-size: 12.5px;
}
.fil-sans { color: var(--mute); font-size: 12.5px; line-height: 1.6; }

/* ── relire ── */
.fil-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.fil-filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.fil-filtres button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .36rem .72rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--soft); font-family: var(--sans); font-size: 12px;
  transition: color .15s, border-color .15s, background .15s;
}
.fil-filtres button:hover { color: var(--txt); border-color: var(--border); }
.fil-filtres button b { font-size: 10.5px; font-weight: 700; color: var(--mute); }
.fil-filtres button[style]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--genre);
}
.fil-filtres button.ici { background: var(--txt); border-color: var(--txt); color: var(--noir); }
.fil-filtres button.ici b { color: color-mix(in srgb, var(--noir) 55%, transparent); }
.fil-filtre-cible span { font-size: 14px; line-height: 1; }
.fil-cherche {
  width: 220px; padding: .42rem .75rem; border-radius: 8px; outline: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt);
  font-family: var(--sans); font-size: 12.5px;
}
.fil-cherche:focus { border-color: var(--blue); }

.gw-fil { display: flex; flex-direction: column; gap: 0; }
.gw-jour {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.4rem;
  padding: 1.1rem 0; border-top: 1px solid var(--line);
}
.gw-jour:first-child { border-top: 0; }
.gw-jour-date {
  color: var(--mute); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; padding-top: .65rem;
}
.gw-jour-date b { color: var(--tan); font-size: 15px;
  font-family: var(--sans); font-weight: 700; letter-spacing: .06em; }
.gw-entrees { display: flex; flex-direction: column; gap: .3rem; }
.gw-entree {
  position: relative; padding: .55rem .7rem .6rem 1.4rem; border-radius: 10px;
  transition: background .15s;
}
.gw-entree:hover { background: rgba(255,255,255,.03); }
.gw-entree::before {
  content: ''; position: absolute; left: .5rem; top: .95rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--genre, var(--mute));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--genre, var(--mute)) 18%, transparent);
}
.gw-entree-quoi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem;
  margin-bottom: .15rem; padding-right: 7rem;
  color: var(--genre, var(--mute)); font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.gw-entree-projet { color: var(--mute); font: inherit; letter-spacing: inherit; text-transform: inherit; }
button.gw-entree-projet { cursor: pointer; }
button.gw-entree-projet:hover { color: var(--txt); }
.gw-entree-auteur { color: var(--faint); letter-spacing: .12em; }
.gw-entree-texte { color: var(--txt); font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.gw-entree-actions {
  position: absolute; right: .45rem; top: .4rem; display: flex; gap: .15rem;
  opacity: 0; transition: opacity .15s;
}
.gw-entree:hover .gw-entree-actions, .gw-entree:focus-within .gw-entree-actions { opacity: 1; }
.gw-entree-actions button {
  padding: .22rem .5rem; border-radius: 6px; color: var(--mute);
  font-family: var(--sans); font-size: 11px; background: var(--panel);
}
.gw-entree-actions button:hover { color: var(--txt); }
.gw-entree-actions [data-act="retirer"] { font-size: 16px; line-height: 1; }
.gw-entree-actions [data-act="retirer"]:hover { color: #e0715c; }
.gw-entree.edition { background: rgba(var(--primaire),.06); }
.gw-entree.edition .gw-entree-actions { display: none; }
.gw-entree.eclaire { animation: fil-eclaire 1.8s ease; }
@keyframes fil-eclaire { 0%, 30% { background: rgba(var(--primaire),.2); } 100% { background: transparent; } }
.gw-entree-edit { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.gw-entree-edit textarea {
  width: 100%; resize: vertical; padding: .55rem .65rem; border-radius: 8px; outline: none;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
}
.gw-entree-edit textarea:focus { border-color: var(--blue); }
.gw-entree-edit-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.gw-entree-edit-ligne select, .gw-entree-edit-ligne input {
  padding: .35rem .55rem; border-radius: 7px; border: 1px solid var(--border);
  background: var(--noir); color: var(--txt); font-family: var(--sans); font-size: 12px; color-scheme: dark;
}
.gw-entree-edit-espace { flex: 1; }

/* ── à côté : qui on n'a pas vu depuis longtemps, ce qu'on a promis ── */
.fil-cote { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.fil-encart { padding: .95rem .9rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.fil-encart-titre {
  margin-bottom: .6rem; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.fil-nouvelles, .fil-promesses { display: flex; flex-direction: column; gap: 2px; }
.fil-nouvelles button, .fil-promesses button {
  display: flex; flex-direction: column; align-items: flex-start; gap: .14rem;
  width: 100%; padding: .5rem .55rem; border-radius: 8px; text-align: left;
  transition: background .15s;
}
.fil-nouvelles button:hover, .fil-promesses button:hover { background: rgba(255,255,255,.04); }
.fil-nouvelles button.ici { background: rgba(var(--primaire),.15); }
.fn-nom { display: flex; align-items: center; gap: .45rem; color: var(--txt); font-size: 13px; }
.fn-nom img { height: 15px; width: auto; max-width: 40px; object-fit: contain; }
.fn-quand { color: var(--mute); font-size: 11.5px; }
.fn-quand i { font-style: normal; font-weight: 600; }
.fn-quand.vieux { color: #e0a05c; }
.fp-texte { color: var(--txt); font-size: 12.5px; line-height: 1.5; }
.fp-bas { color: var(--mute); font-size: 11px; }

/* ── le fond qui vit ── */
/* Celle-ci tient le vide entre le ruban et le texte : sans elle, un tiers de
   l'écran est un trou noir. */
@keyframes braise {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 3vh, 0) scale(1.14); }
}
/* La carte du territoire, très en retrait : on la devine, on ne la lit pas. */
/* Le territoire du réseau — l'Auvergne et ses départements, le Cantal au
   milieu. Le fichier d'origine est REMPLI : ses tracés n'ont ni fill ni
   stroke, ils tombent donc en noir plein, et à 7 % ça faisait une tache
   sombre derrière le texte. La version « trait » ne dessine que les
   frontières : on peut alors la monter assez pour qu'elle se voie. */
@keyframes territoire {
  from { transform: translateY(-50%) scale(1) rotate(0deg); }
  to   { transform: translateY(-53%) scale(1.05) rotate(1.2deg); }
}

/* ── le ruban, à gauche ── */
/* Plus etroit que la premiere version : la video est en portrait et y montre
   cinq cartes ; sur un ecran large et court, des cartes de 620 px n en
   laissaient voir que trois. Et un peu decale du bord, sinon l arc pousse la
   carte du bas hors de l ecran. */
/* Le format des captures, PAS un 16:10 arbitraire : elles sont faites en
   1120x570, et un cadre plus étroit en rognait 18 % de chaque côté. */
/* Le site qui se déroule sur la carte du milieu. Il se pose PAR-DESSUS
   l'accueil fixe, qui reste dessous : le temps que la capture charge on voit
   déjà quelque chose, et rien ne clignote.
   `--course` est posée en JS : c'est la hauteur du site moins celle du cadre,
   donc la descente s'arrête pile en bas de page. */
@keyframes defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(var(--course) * -1), 0); }
}

/* La carte du milieu se détache un peu : c'est celle qu'on nomme à droite. */

/* ── le texte, à droite ── */
/* La carte d’Auvergne passait ses frontières en plein milieu des mots. Un
   voile sombre, calé sur le texte et fondu sur les bords, la garde visible
   sans qu’elle vienne barrer une ligne. */

/* Ce bloc-là est le seul qui change de contenu : il sort par la droite et le
   suivant revient de la droite. */
/* C'est un nom de site, pas un titre choisi : « Espace Confort Habitat » doit
   tenir sans déborder, et la hauteur ne doit pas sauter d'un site à l'autre. */

/* Les flèches. Le bandeau de texte ne prend pas la souris (il ne doit pas
   voler les clics aux cartes) : elles doivent la reprendre pour elles. */


@media (max-aspect-ratio: 1/1) {
  /* les flèches restent : au doigt, on ne survole pas, on appuie */
}

/* ════════════════════════════════════════════════════════════
   LA SCÈNE — un site posé sur un poste

   On choisit un site dans le ruban : les autres cartes s'écartent par le haut
   et par le bas, celle-là grandit, se redresse et vient se poser dans l'écran.
   Un téléphone arrive à côté avec la version mobile. Les deux se déroulent.
   ════════════════════════════════════════════════════════════ */


/* elle s'efface quand l'écran a pris le relais : même image, même taille,
   on ne voit pas la couture */


/* ── le poste ── */
/* Le cadre de l'écran est dessiné en OMBRE, pas en bordure : une bordure
   entrerait dans la boîte et le vol de la carte ne tomberait plus juste.
   Et le format est celui des captures — sinon la carte se déformerait sur
   les dernières images du vol. */

/* ── le téléphone ── */

/* ── la page qui descend ── */
/* `--course` est posée en JS : hauteur de la page moins hauteur du cadre,
   donc la descente s'arrête pile en bas. Aller-retour, doucement : devant un
   client on regarde, on ne court pas. */
@keyframes vs-descendre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(var(--course) * -1), 0); }
}

/* ── ce qu'on en dit ── */

/* Écran court ou étroit : le téléphone passe sous le poste plutôt que de
   mordre dessus, et le texte revient en dessous. */

/* ── les chiffres du chantier ────────────────────────────────
   Ils n'avaient AUCUN style : le nombre et son mot sortaient collés
   (« 3clients », « 1sites en ligne »). */
.gw-chiffres {
  display: flex; flex-wrap: wrap; gap: 2.6rem;
  margin: 2.4rem 0 3rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.gw-chiffre { display: flex; flex-direction: column; }
.gw-chiffre b {
  font-family: var(--sans); font-size: 2.4rem; font-weight: 800;
  line-height: 1; letter-spacing: 0; color: var(--txt);
  font-variant-numeric: tabular-nums; margin-bottom: .35rem;
}
.gw-chiffre span {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
}
@media (max-width: 700px) {
  .gw-chiffres { gap: 1.4rem 2rem; }
  .gw-chiffre b { font-size: 1.8rem; }
}

/* ── le fil sur écran étroit (en fin de fichier : un @media placé avant les
   règles de base serait annulé par elles) ── */
@media (max-width: 1080px) {
  .fil-plan { grid-template-columns: 1fr; }
  .fil-cote {
    position: static; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
}
@media (max-width: 700px) {
  .gw-jour { grid-template-columns: 1fr; gap: .3rem; }
  .gw-jour-date { padding-top: 0; }
  .fil-etiquette { width: 100%; }
  .fil-raccourci { display: none; }
  .fil-cherche { width: 100%; }
  .gw-entree-quoi { padding-right: 0; }
  .gw-entree-actions { position: static; opacity: 1; margin-top: .35rem; }
  /* sous 16 px, iOS zoome sur le champ */
  .fil-note textarea, .fil-cherche, .fil-choix-cible, .fil-quand input,
  .gw-entree-edit textarea, .gw-entree-edit-ligne input, .gw-entree-edit-ligne select { font-size: 16px; }
}