/* ==========================================================================
   sitefaitbienfait.fr — les sections de l'accueil (refonte du 2026-10-15)
   --------------------------------------------------------------------------
   Lue APRÈS style.css (jetons, assises) et diaporama.css (la bibliothèque :
   scène, vues, bandeau, ligne de blocs, briques). Ici, ce qui est propre à
   chaque section, dans l'ordre de la page. Règles : .claude/rules/.
   ========================================================================== */


/* ======================================================================= */
/* Section : 06-accroche (maquette docs/maquettes/06-accroche.css)                          */
/* ======================================================================= */
/* ==========================================================================
   Maquette 06 — l'en-tête et l'accroche
   ========================================================================== */

/* --- L'accroche : le texte à gauche, l'outil qui se monte à droite ---------- */
.accroche--refonte {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

/* Le cercle du sceau, en très grand, derrière l'illustration. */
.accroche__cercle {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: calc(-1 * var(--marge) - 9rem);
  width: clamp(26rem, 48vw, 42rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bleu) 8%, transparent);
}

.accroche--refonte .statut {
  padding: 0.375rem 0.75rem;
  margin-bottom: 1.5rem;
  background: var(--plan-creux);
  border: 1px solid var(--trait);
  border-radius: 999px;
}

/* Une ligne du titre ne se coupe jamais : c'est le découpage voulu dans
   site.php. La taille baisse un peu pour tenir dans sa colonne. */
.accroche--refonte .accroche__titre {
  max-width: none;
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.875rem);
}
.accroche--refonte .accroche__ligne { white-space: nowrap; }
/* La dernière ligne reste en bleu (style.css) et prend le surligneur. */
.accroche--refonte .surligne { padding: 0 0.08em; }

.accroche--refonte .accroche__actions { gap: 1rem 1.5rem; }

/* Les illustrations sont muettes (aria-hidden) : le texte de gauche dit tout.

   C. « Un outil » : trois exports qui convergent vers l'outil. */
.accroche__illustration--outil {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) 3rem minmax(0, 1fr);
  align-items: center;
}
.accroche__fichiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Autant de rangées égales que de fichiers : les courbes de convergence
     partent du milieu de chacune (diapo_convergence() dans diaporama.php). */
  grid-auto-rows: 1fr;
  align-items: center;
  justify-items: end;
  height: 9rem;
}
.accroche__fichiers .puce { font-size: 0.75rem; }
.accroche__convergence { height: 9rem; }
.accroche__fenetre .fenetre__corps { gap: 0.5rem; justify-items: start; }

/* --- A. L'établi (retenu le 2026-10-15) : de vrais écrans posés de biais,
   comme sur un plan de travail. Chacun arrive à son tour, avec son étiquette. */
.etabli {
  position: relative;
  height: clamp(20rem, 34vw, 27rem);
}
.etabli__ecran {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  margin: 0;
  transform: rotate(-2.5deg);
}
.etabli__outil {
  position: absolute;
  left: 6%;
  bottom: 0;
  width: 46%;
  transform: rotate(1.5deg);
}
.etabli__telephone {
  position: absolute;
  right: 0;
  top: 14%;
  width: 30%;
  margin: 0;
  transform: rotate(4deg);
}
.etabli__etiquette { position: absolute; z-index: 3; }
.etabli__etiquette--site { top: -0.75rem; right: 24%; }
.etabli__etiquette--appli { right: 2%; bottom: 6%; }
.etabli__etiquette--outil { left: 0; bottom: -1rem; }

/* La rotation est posée sur les cadres : les entrées « zoom » et « monter »
   écrivent `transform` aussi, on rend donc la rotation à la fin. */
.js .accroche--refonte.est-active .etabli__ecran,
.js .accroche--refonte.est-active .etabli__outil,
.js .accroche--refonte.est-active .etabli__telephone { animation-name: etabli-poser; }
.etabli__ecran { --angle: -2.5deg; }
.etabli__outil { --angle: 1.5deg; }
.etabli__telephone { --angle: 4deg; }
@keyframes etabli-poser {
  from { opacity: 0; transform: translateY(18px) rotate(0deg) scale(0.96); }
  to   { opacity: 1; transform: rotate(var(--angle)); }
}

/* --- B. L'atelier : votre structure au centre, les quatre métiers autour
   ⚠️ Piste ÉCARTÉE le 2026-10-15, gardée au cas où : son HTML est dans
   fragments/archives/. Comme la piste C (.accroche__illustration--outil). */
.atelier {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.25rem 2.75rem;
}
.atelier__liens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.atelier__satellite { position: relative; z-index: 1; font-size: 0.875rem; }
.atelier__satellite .fenetre__barre { font-size: 0.6875rem; }
.atelier__corps-appli { justify-items: center; }
.atelier__appli { width: auto; height: 5.5rem; }
.atelier__ordre { gap: 0.375rem; justify-items: start; }
.atelier__ordre .puce { font-size: 0.6875rem; padding-block: 0.25rem; }
.atelier__ordre .puce:not(.puce--bleue) { color: var(--encre-doux); text-decoration: line-through; }
.atelier__centre {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  width: 7.5rem;
  padding: 0.75rem 0.5rem;
  translate: -50% -50%;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-align: center;
  color: var(--bleu);
  background: var(--plan);
  border: 1px solid var(--bleu);
  border-radius: 50%;
  aspect-ratio: 1;
  align-content: center;
}

@media (max-width: 60rem) {
  .accroche--refonte { grid-template-columns: minmax(0, 1fr); }
  .accroche__illustration { max-width: 30rem; }
  .accroche__cercle { top: auto; bottom: -6rem; transform: none; }
}

@media (max-width: 30rem) {
  .etabli { height: 21rem; }
  .etabli__outil { width: 58%; }
  .etabli__outil .fenetre__barre { white-space: nowrap; }
  .atelier { gap: 2.5rem 1.25rem; }
  .accroche__illustration--outil { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1.1fr); }
  .accroche__fichiers .puce { font-size: 0.6875rem; padding-inline: 0.5rem; }
  .accroche__fichiers .puce .picto { display: none; }
}

/* ======================================================================= */
/* Section : 04-un-outil-a-soi (maquette docs/maquettes/04-un-outil-a-soi.css)                          */
/* ======================================================================= */
/* ==========================================================================
   Maquette 04 — « Un outil à vous » : la section et ses quatre scènes
   --------------------------------------------------------------------------
   Le cadre du diaporama (scène, bandeau, barre, mouvement) et les briques
   (puce, fenêtre, écran, signes) viennent de diaporama/diaporama.css. Ici,
   seulement ce qui est propre à cette section : l'introduction, et la mise
   en page de chaque scène.
   ========================================================================== */

/* --- L'introduction ------------------------------------------------------- */
.outil__intro {
  display: grid;
  gap: 0.875rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.outil__phrase {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.outil__texte { color: var(--encre-doux); max-width: 56ch; text-wrap: pretty; }
/* Le titre des exemples, au-dessus des onglets : un cran sous la phrase. */
.outil__cas-titre {
  margin: 0 0 1rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* La légende, sous le diaporama du cas affiché : un clin d'œil, en petit. */
.outil__legende {
  max-width: 56ch;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--encre-doux);
}

/* L'en-tête de l'exemple : la grille « étiquette | phrase » des métiers. */
.exemple-tete {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.25rem clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
}
.exemple-tete__etiquette {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--bleu);
  padding-top: 0.35rem;
}
.exemple-tete__phrase {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@media (max-width: 46rem) {
  .exemple-tete { grid-template-columns: 1fr; }
  .exemple-tete__etiquette { padding-top: 0; }
}

/* --- Les flèches de cette section ----------------------------------------- */
.fleche-ligne {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
}
.fleche-ligne__trait { width: 100%; height: 12px; }
.fleche-ligne__pointe { position: absolute; right: -5px; top: -2px; }

.convergence { width: 100%; height: 9rem; }
.descente { display: none; width: 12px; height: 40px; justify-self: center; }

/* ==========================================================================
   01 · État des lieux : trois logiciels, trois fichiers
   ========================================================================== */
.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Autant de colonnes que de sources (une à quatre) : le gabarit ne présume
     pas du nombre. Le deuxième cas d'usage en a quatre (2026-10-15). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}

.source {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
}

.source__logiciel {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: var(--plan);
}

.source__nom { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.source__fleche { width: 12px; height: 44px; color: var(--encre-doux); }

@media (max-width: 40rem) {
  .sources { grid-auto-flow: row; grid-template-columns: 1fr; gap: 1.25rem; }
  .source {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.375rem;
    text-align: left;
  }
  .source__logiciel { grid-row: span 2; width: 3.5rem; height: 3.5rem; }
  .source__logiciel .picto { --t: 32; }
  .source__fleche { display: none; }
}

/* ==========================================================================
   02 · Chaque lundi, avec une IA      et      03 · Une fois, votre outil
   Même charpente : les sources à gauche, une convergence, le cœur, une sortie,
   l'écran. Les fichiers (ou les sources) occupent trois rangées égales de la
   même hauteur que la convergence : les courbes partent de leur milieu.
   ========================================================================== */
.scene-ia,
.scene-outil {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) 3.5rem minmax(0, 1fr) 5.5rem minmax(0, 12rem);
  align-items: center;
  gap: 1.25rem 0.5rem;
}

.scene-ia {
  grid-template-areas:
    'fichiers conv fenetre sortie ecran'
    '.        .    signes  .      .';
}

.scene-ia__fichiers,
.scene-outil__sources {
  grid-area: fichiers;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Autant de rangées égales que de fichiers : les courbes de convergence
     partent du milieu de chacune (diapo_convergence() dans diaporama.php). */
  grid-auto-rows: 1fr;
  align-items: center;
  justify-items: end;
  height: 9rem;
}

.convergence--large { grid-area: conv; }
.descente--etroite { grid-area: conv; }

.scene-ia__fenetre { grid-area: fenetre; }
.scene-ia__signes { grid-area: signes; align-self: start; }

.scene-ia__sortie {
  grid-area: sortie;
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  padding-right: 6px;
}

.scene-ia__ecran { grid-area: ecran; }
.scene-ia__ecran .ecran__illu { padding: 4px; }

/* --- 03 : l'outil au centre, la base dessous ------------------------------ */
.scene-outil {
  grid-template-columns: minmax(0, 8rem) 3.5rem minmax(0, 1fr) 5.5rem minmax(0, 12rem);
  grid-template-areas:
    'fichiers conv fenetre sortie ecran'
    '.        .    lien    .      .'
    '.        .    base    .      .'
    'signes   signes signes signes signes';
  row-gap: 0.5rem;
}

.scene-outil__sources li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--encre);
}

.scene-outil__coeur { display: contents; }
.scene-outil__fenetre { grid-area: fenetre; }
.scene-outil__lien { grid-area: lien; justify-self: center; width: 12px; height: 32px; }
.scene-outil__base {
  grid-area: base;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.scene-outil__semaines { width: 4.5rem; }

.scene-outil__declencheur {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.scene-outil__signes {
  grid-area: signes;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--bleu) 30%, transparent);
}

/* --- Sur téléphone : tout en colonne, les flèches vers le bas -------------- */
@media (max-width: 46rem) {
  .scene-ia,
  .scene-outil {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    row-gap: 0.75rem;
  }
  .scene-ia {
    grid-template-areas: 'fichiers' 'conv' 'fenetre' 'signes' 'sortie' 'ecran';
  }
  .scene-outil {
    grid-template-areas: 'fichiers' 'conv' 'fenetre' 'lien' 'base' 'sortie' 'ecran' 'signes';
  }
  /* Les fichiers sur une ligne qui passe à la ligne, plutôt qu'en colonne :
     sur téléphone, toute la hauteur gagnée compte (toutes les vues prennent
     la hauteur de la plus haute, ici la vue 2). */
  .scene-ia__fichiers,
  .scene-outil__sources {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
  }
  .scene-ia__fichiers .puce { font-size: 0.75rem; padding-block: 0.3125rem; }
  .scene-ia .signes li,
  .scene-outil .signes li { font-size: 0.875rem; }
  .scene-ia__signes { gap: 0.375rem; }
  .scene-outil__sources { grid-auto-flow: column; justify-content: center; gap: 1.25rem; }
  .convergence--large { display: none; }
  .descente--etroite { display: block; }
  .scene-ia__sortie { justify-self: center; padding-right: 0; }
  .fleche-ligne { width: 2.25rem; transform: rotate(90deg); margin: 1rem 0; }
  .scene-ia__ecran { justify-self: center; width: min(100%, 12rem); }
  .descente { height: 28px; }
  .scene-outil__signes { grid-template-columns: 1fr; }

  /* Gagner de la hauteur (2026-10-15, « ça ne tient pas sur la hauteur ») :
     la vue 2 ne redit pas les fichiers que la vue 1 vient de montrer (la
     fenêtre de l'IA les dit joints) ; la sortie tient sur une ligne ; l'écran
     se range à côté de sa légende au lieu de s'empiler dessus. */
  .scene-ia > .scene-ia__fichiers,
  .scene-ia > .descente--etroite { display: none; }
  .scene-ia__sortie { display: flex; align-items: center; gap: 0.75rem; }
  .scene-ia__sortie .fleche-ligne { width: 1.25rem; margin: 0.375rem 0; }
  .scene-ia__ecran,
  .scene-double__resultat .ecran {
    width: 100%;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.875rem;
  }
  .scene-outil > .descente--etroite { height: 20px; }
  /* Vue 3 : la pile « chaque semaine gardée » se retire, les signes disent
     la même chose (l'historique gardé). */
  .scene-outil__lien,
  .scene-outil__base { display: none; }
}

/* ==========================================================================
   04 · Ce qui change : face à face, critère par critère
   Deux panneaux derrière la grille : en retrait et gris pour la corvée, papier
   blanc bordé de bleu pour l'outil. Le critère au milieu, comme un arbitre.
   Pas de hachures : comme le fond de la scène, elles gênaient la lecture.
   ========================================================================== */
.bilan {
  --milieu: 9.5rem;
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--milieu) minmax(0, 1fr);
}

.bilan::before,
.bilan::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--rayon);
}
.bilan::before {
  left: 0;
  right: calc(50% + var(--milieu) / 2);
  border: 1px solid var(--trait);
  background: color-mix(in srgb, var(--plan) 45%, var(--plan-creux));
}
.bilan::after {
  left: calc(50% + var(--milieu) / 2);
  right: 0;
  border: 1px solid var(--bleu);
  border-top-width: 3px;
  background: var(--plan);
}

.bilan__entete {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.75rem;
}
.bilan__entete--avant { grid-column: 1; text-align: right; color: var(--encre-doux); }
.bilan__entete--apres { grid-column: 3; color: var(--bleu); }

.bilan__lignes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0 0 0.75rem;
}

.bilan__ligne {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.bilan__ligne dt {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  color: var(--encre-doux);
  padding: 0.5rem 0.625rem;
}

.bilan__ligne dd {
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.3;
}

/* Le picto du côté du critère : les deux colonnes se répondent. */
.bilan__avant {
  grid-column: 1;
  flex-direction: row-reverse;
  justify-self: end;
  text-align: right;
  color: var(--encre-doux);
}
.bilan__apres { grid-column: 3; font-weight: 600; }
.bilan__apres .picto { color: var(--bleu); }

/* Sur téléphone : plus de grands panneaux de fond (le nom du critère
   tombait dans celui de gauche, et la colonne de droite paraissait décalée).
   Chaque critère devient une rangée : son nom au-dessus, deux cases côte à
   côte, grise pour la corvée, bordée de bleu pour l'outil. */
@media (max-width: 46rem) {
  .bilan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.5rem;
  }
  .bilan::before,
  .bilan::after { display: none; }

  .bilan__entete {
    padding: 0 0.25rem 0.625rem;
    font-size: 0.625rem;
    line-height: 1.3;
  }
  .bilan__entete--avant { grid-column: 1; text-align: left; }
  .bilan__entete--apres { grid-column: 2; }

  .bilan__lignes { row-gap: 0.5rem; margin: 0; }
  .bilan__ligne { row-gap: 0.25rem; }
  .bilan__ligne dt {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    text-align: left;
  }
  .bilan__ligne dd {
    grid-row: 2;
    align-self: stretch;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    border-radius: calc(var(--rayon) * 0.7);
  }
  .bilan__ligne dd .picto { margin-top: 0.0625rem; }
  .bilan__avant {
    grid-column: 1;
    flex-direction: row;
    justify-self: stretch;
    text-align: left;
    background: color-mix(in srgb, var(--plan) 45%, var(--plan-creux));
    border: 1px solid var(--trait);
  }
  .bilan__apres {
    grid-column: 2;
    background: var(--plan);
    border: 1px solid var(--bleu);
  }
}


/* ======================================================================= */
/* Section : 06-savoir-faire (maquette docs/maquettes/06-savoir-faire.css)                          */
/* ======================================================================= */
/* ==========================================================================
   Maquette 06 — Technologies | Références, une ligne avant « Écrire »
   ========================================================================== */
.savoir__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 60rem) {
  .savoir__grille { grid-template-columns: minmax(0, 1fr); }
}

/* --- Technologies : des tuiles par famille --------------------------------- */
.technos {
  display: grid;
  gap: 1.375rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(3.5rem, 6vw, 4.5rem);
}
.technos > :not(.diapo__sceau) { position: relative; z-index: 1; }

.technos__intro { color: var(--encre-doux); font-size: 0.9375rem; max-width: 46ch; }

.technos__famille {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-bottom: 0.5rem;
}

.technos__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.techno {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--encre);
  background: var(--plan);
  border: 1px solid var(--trait);
  border-radius: calc(var(--rayon) * 0.8);
  transition: border-color var(--transition), color var(--transition);
}
.techno .logo { width: 1.375rem; height: 1.375rem; color: var(--encre-doux); transition: color var(--transition); }
.techno:hover { border-color: var(--bleu); }
.techno:hover .logo { color: var(--bleu); }

/* Sans logo libre (Cognos) : le picto générique de sa famille, au trait,
   jamais un logo approché. Même place et même couleur qu'un logo. */
.techno--generique .picto { --t: 22; color: var(--encre-doux); transition: color var(--transition); }
.techno--generique:hover .picto { color: var(--bleu); }

/* --- Références : le diaporama compact ------------------------------------- */
.reference__corps { display: grid; gap: 1.25rem; align-content: start; }
.reference__corps--telephone {
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.reference__cadre { margin: 0; }
.reference__corps--telephone .telephone { margin: 0; }

.reference__etiquette {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--bleu);
  margin-bottom: 0.375rem;
}
.reference__phrase {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.375rem;
}
.reference__texte { color: var(--encre-doux); font-size: 0.9375rem; }

@media (max-width: 30rem) {
  .reference__corps--telephone { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .reference__corps--telephone .reference__legende { justify-self: stretch; }
}

/* ======================================================================= */
/* Section : 06-ecrire (maquette docs/maquettes/06-ecrire.css)                          */
/* ======================================================================= */
/* ==========================================================================
   Maquette 06 — « Écrire » dans la même charte : une scène, le formulaire
   dans une fenêtre « Nouveau message »
   ========================================================================== */
.ecrire {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 7vw, 5.5rem);
}
.ecrire > :not(.diapo__sceau) { position: relative; z-index: 1; }

.ecrire__phrase {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ecrire__delai {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  margin: 1rem 0 1.75rem;
}

.ecrire__coordonnees { gap: 0.75rem; }

.ecrire__fenetre .fenetre__corps { padding: clamp(1rem, 2.5vw, 1.5rem); }
.ecrire__fenetre .formulaire { gap: 1.125rem; }

/* Nom et téléphone côte à côte (2026-10-15), l'e-mail seul en dessous, puis le message. */
.ecrire__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  /* Alignés par le bas : un libellé qui passe sur deux lignes (« (facultatif) »
     en mono, mode geek) ne décale pas les champs. */
  align-items: end;
}

/* --- Les champs, habillés --------------------------------------------------
   Un picto dans chaque champ, à gauche ; il passe à l'accent quand le champ a
   le focus. Le cadre suit le rayon du mode (vif en agence, nul en geek,
   rond en fun et en IA), puisqu'il ne lit que les jetons. */
.champ__boite { position: relative; display: block; }
.champ__picto {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--encre-doux);
  pointer-events: none;
  transition: color var(--transition);
}
.champ__boite--zone .champ__picto { top: 0.875rem; translate: none; }
.champ__boite:focus-within .champ__picto { color: var(--bleu); }

.ecrire .champ__saisie {
  padding-left: 2.75rem;
  background: var(--fond-champ);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.ecrire .champ__saisie:hover { border-color: color-mix(in srgb, var(--bleu) 45%, var(--trait)); }
/* Le fond est redéclaré au focus (règle du site : certains navigateurs
   repeignent le champ en blanc, illisible en thème sombre). */
.ecrire .champ__saisie:focus {
  background: var(--fond-champ);
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 20%, transparent);
}
.ecrire .champ__saisie--zone { min-height: 8.5rem; }

.champ__facultatif { font-weight: 400; color: var(--encre-doux); }

@media (max-width: 52rem) {
  .ecrire { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .ecrire__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* --- « À la main » (2026-10-15) : la fenêtre liste les étapes refaites à
   chaque fois, numérotées, à la place de la demande tapée à une IA. */
.etapes-main {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--encre);
}
.etapes-main li::marker { font-family: var(--mono); font-size: 0.75rem; color: var(--encre-doux); }

/* Cinq sources : la colonne des fichiers et la convergence grandissent, pour
   que chaque fichier garde sa rangée (et chaque courbe son départ). */
.scene--n5 :is(.scene-ia__fichiers, .scene-outil__sources),
.scene--n5 .convergence { height: 11.5rem; }
@media (max-width: 46rem) {
  .scene--n5 :is(.scene-ia__fichiers, .scene-outil__sources) { height: auto; }
}

/* Vue 1 : à cinq colonnes, un nom de fichier (« fiche-constructeur.pdf ») est
   plus large que sa colonne ; il passe à la ligne au lieu de déborder sur la
   voisine (constaté le 2026-10-15 avec la fiche produit). */
.source .puce {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.source__nom { overflow-wrap: anywhere; }

/* ==========================================================================
   Vue 2 « double » (2026-10-15, le rapport annuel) : deux circuits l'un
   au-dessus de l'autre (une IA pour les chiffres, la main pour les textes),
   deux courbes qui les rejoignent, et le résultat recollé à droite.
   Les deux rangées ont la même hauteur (1fr) : les courbes de la fusion
   partent du quart et des trois quarts, le milieu de chaque circuit.
   ========================================================================== */
.scene-double {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 12rem);
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    'voie1  fusion resultat'
    'voie2  fusion resultat'
    'signes signes signes';
  gap: 1.25rem 0.5rem;
  align-items: center;
}
.voie--1 { grid-area: voie1; }
.voie--2 { grid-area: voie2; }
.scene-double__fusion { grid-area: fusion; width: 100%; height: 100%; }
.scene-double__resultat { grid-area: resultat; display: grid; gap: 0.5rem; justify-items: start; }
.scene-double__descente { display: none; }
.scene-double__signes { grid-area: signes; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }

.voie {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) 2.5rem minmax(0, 1fr);
  align-items: center;
}
.voie__fichiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 2.25rem;
  align-items: center;
  justify-items: end;
}
.voie__fichiers .puce { font-size: 0.75rem; padding-block: 0.3125rem; }
/* La convergence d'une voie a la hauteur de ses fichiers (2,25 rem chacun). */
.voie__convergence { width: 100%; height: 4.5rem; }
.voie--n1 .voie__convergence { height: 2.25rem; }
.voie--n3 .voie__convergence { height: 6.75rem; }
.voie--n4 .voie__convergence { height: 9rem; }
.voie__descente { display: none; }
.voie__fenetre .fenetre__corps { gap: 0.5rem; }
.voie__fenetre .etapes-main { font-size: 0.8125rem; gap: 0.25rem; }
.voie__fenetre .demande { font-size: 0.8125rem; }

@media (max-width: 46rem) {
  .scene-double {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: 'voie1' 'voie2' 'resultat' 'signes';
  }
  .scene-double__fusion { display: none; }
  .scene-double__descente { display: block; justify-self: center; }
  .scene-double__resultat { justify-items: center; }

  .scene-double__signes { grid-template-columns: minmax(0, 1fr); }
  .voie { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .voie__fichiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; }
  .voie__convergence { display: none; }
  /* Les fichiers de chaque circuit sont ceux de la vue 1 : sur téléphone, la
     fenêtre de chaque circuit suffit. */
  .voie__fichiers,
  .voie__descente { display: none; }
  .scene-double { row-gap: 0.75rem; }
}