/* Vitrine — mise en page acquire.com / ebx.army, direction artistique resend.com (demande de Walter, 16/10).
 * Noir pur et quasi monochrome ; la couleur n'existe que dans les fragments d'interface (une teinte par IA) ;
 * la décision humaine est blanche. Jetons communs (public/design/jetons.css) : aucune couleur en dur ici. */

html {
  scrollbar-color: var(--filet-fort) var(--fond);
}

body {
  background: var(--fond);
}

.site-cadre {
  width: min(100% - 2 * var(--gouttiere), 1200px);
  margin-inline: auto;
}

/* Les listes de la vitrine sont des compositions, pas des puces : sans le retrait du navigateur. */
.site-etapes,
.site-coches,
.site-frise,
.site-journal {
  list-style: none;
  padding: 0;
}

/* ---- Barre flottante (EBX), en verre Resend : elle passe au-dessus du contenu ---- */
.site-tete {
  position: sticky;
  top: var(--e-3);
  z-index: var(--plan-bandeau);
  padding-inline: var(--gouttiere);
}

.site-tete-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: min(100%, 1200px);
  min-height: 60px;
  margin-inline: auto;
  padding: 0 var(--e-2) 0 var(--e-5);
  background: color-mix(in oklab, var(--fond) 72%, transparent);
  border: 1px solid var(--filet);
  border-radius: var(--r-pilule);
  box-shadow: var(--ombre-2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.site-nav {
  display: flex;
  gap: var(--e-5);
  margin-inline-start: auto;
  font-size: var(--t-petit);
}

.site-nav a,
.site-pied-liens a {
  color: var(--texte-2);
  text-decoration: none;
  transition: color var(--duree-1) var(--courbe-standard);
}

.site-nav a:hover,
.site-pied-liens a:hover {
  color: var(--texte);
}

/* L'emblème garde sa taille même quand la barre est chargée (base.css borne les svg à 100 %). */
.site-tete .marque [data-marque="embleme"],
.site-tete .marque-embleme {
  flex: none;
}

.site-tete-actions {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

/* ---- Héros partagé (acquire) : le texte à gauche, le comité au travail à droite ---- */
.site-heros {
  padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) var(--e-8);
}

.site-heros-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.site-heros-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}

/* Quatre lignes au plus : le bouton « Décrire mon projet » reste dans le premier écran. */
.site-heros-titre {
  font-size: clamp(2.5rem, 1.4rem + 3vw, 4rem);
}

/* Le mot qui compte pour le patron : blanc plein, hors du dégradé. */
.site-heros-mot {
  color: var(--texte);
  -webkit-text-fill-color: var(--texte);
  white-space: nowrap;
}

.site-heros-chapeau {
  max-width: 54ch;
}

.site-actions {
  gap: var(--e-3);
}

.site-heros-prix {
  margin-top: calc(-1 * var(--e-2));
}

/* Le collage de fragments : deux colonnes décalées, fondues en bas comme chez Resend.
 * La légende « Exemple fictif » reste HORS du fondu : elle doit se lire. */
.site-comite {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: 0;
}

.site-comite-fragments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
  /* Le fondu tombe dans la marge basse : jamais sur la décision, qui est le moment du héros. */
  padding-bottom: calc(var(--e-6) + var(--e-6));
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--e-6)), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--e-6)), transparent);
}

.site-fragment {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--halo-panneau), var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-3);
}

.site-fragment-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.site-fragment--question {
  grid-column: 1 / -1;
}

.site-fragment-question {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  line-height: 1.12;
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

.site-fragment--analyse[data-ia="codex"] {
  transform: translateY(var(--e-6));
}

.site-fragment--decision {
  grid-column: 2;
  transform: translateY(var(--e-6));
  color: var(--sur-decision);
  background: var(--decision);
  border-color: transparent;
}

/* Vous validez : humain lui aussi, donc sans couleur ; un filet plein le distingue de la décision. */
.site-fragment--validation {
  grid-column: 1 / -1;
  transform: translateY(var(--e-6));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-color: var(--texte);
}

.site-decision-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--t-micro);
  font-weight: 600;
}

.site-comite-legende {
  margin-top: calc(-1 * var(--e-4));
}

/* Le moment du héros : les analyses arrivent, la décision se pose, puis vous validez.
 * Rien n'est caché sans mouvement autorisé, ni tant que le script n'a pas lancé la séquence. */
@media (prefers-reduced-motion: no-preference) {
  .site-comite[data-anim="joue"] .site-fragment--analyse {
    animation: site-arrivee 640ms var(--courbe-sortie) both;
  }

  .site-comite[data-anim="joue"] .site-fragment--analyse[data-ia="claude"] { animation-delay: 250ms; }
  .site-comite[data-anim="joue"] .site-fragment--analyse[data-ia="codex"] { animation-delay: 500ms; }
  .site-comite[data-anim="joue"] .site-fragment--analyse[data-ia="locale"] { animation-delay: 750ms; }

  .site-comite[data-anim="joue"] .site-fragment--decision {
    animation: site-decision 760ms var(--courbe-sortie) 1350ms both;
  }

  .site-comite[data-anim="joue"] .site-fragment--validation {
    animation: site-decision 760ms var(--courbe-sortie) 2100ms both;
  }

  .site-comite[data-anim="pret"] .site-fragment--analyse,
  .site-comite[data-anim="pret"] .site-fragment--decision,
  .site-comite[data-anim="pret"] .site-fragment--validation {
    opacity: 0;
  }
}

@keyframes site-arrivee {
  from { opacity: 0; filter: blur(8px); translate: 0 14px; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes site-decision {
  from { opacity: 0; filter: blur(10px); scale: 0.94; box-shadow: none; }
  to { opacity: 1; filter: blur(0); scale: 1; box-shadow: var(--ombre-3); }
}

/* ---- Sections ---- */
.site-section {
  padding-block: var(--e-section);
}

.site-titre {
  max-width: 24ch;
  margin-bottom: var(--e-7);
  font-family: var(--police-texte);
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.site-titre--centre {
  margin-inline: auto;
  text-align: center;
}

.site-panneau {
  background: var(--halo-panneau), var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre-3);
}

/* Le problème : un panneau, deux risques séparés par un filet. */
.site-risques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-risque {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.site-risque + .site-risque {
  border-left: 1px solid var(--filet);
}

.site-risque .icone {
  width: 22px;
  height: 22px;
  color: var(--texte-3);
}

.site-risque p {
  max-width: 46ch;
}

/* ---- Le même projet, mené autrement : le face-à-face, un vrai tableau ----
   Aucune couleur (elle est aux IA) : la colonne Conclave se lit en blanc, l'autre en gris. */
.site-face {
  overflow: hidden;
}

.site-face-table {
  width: 100%;
  border-collapse: collapse;
}

.site-face-table th,
.site-face-table td {
  padding: var(--e-5) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  text-align: left;
  vertical-align: top;
}

.site-face-table thead th {
  padding-block: var(--e-4);
  color: var(--texte-3);
  font-size: var(--t-petit);
  font-weight: 500;
  border-bottom: 1px solid var(--filet);
}

.site-face-table thead .site-face-conclave {
  color: var(--texte);
}

.site-face-marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.site-face-table tbody tr + tr > * {
  border-top: 1px solid var(--filet);
}

.site-face-table tbody th {
  width: 24%;
  color: var(--texte);
  font-size: var(--t-petit);
  font-weight: 600;
}

.site-face-table td {
  width: 38%;
  color: var(--texte-2);
  line-height: 1.55;
}

/* La colonne Conclave : le texte en blanc et un voile à peine visible. */
.site-face-table td:last-child,
.site-face-table thead th:last-child {
  background: color-mix(in oklab, var(--decision) 3%, transparent);
}

.site-face-table td:last-child {
  color: var(--texte);
}

/* ---- Comment ça marche : quatre nœuds reliés par un trait (le schéma d'acquire) ---- */
.site-etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-5);
}

.site-etapes::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: calc(25% - 22px);
  height: 1px;
  background: linear-gradient(to right, var(--filet-fort), var(--decision) 62%, var(--filet-fort));
}

.site-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.site-etape-noeud {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--e-2);
  color: var(--texte-2);
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
}

.site-etape--decision .site-etape-noeud {
  color: var(--sur-decision);
  background: var(--decision);
  border-color: transparent;
  box-shadow: var(--ombre-2);
}

.site-ias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---- Blocs alternés : le texte d'un côté, l'interface de l'autre ---- */
.site-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.site-bloc-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}

.site-bloc-texte .site-titre {
  margin-bottom: 0;
}

.site-coches {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.site-coches li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--e-3);
  color: var(--texte);
}

.site-coches .icone {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--texte);
}

.site-demo {
  align-items: flex-start;
  gap: var(--e-2);
}

/* L'écran fictif : frise des phases, prochaine étape, journal d'événements (forme Resend). */
.site-ecran {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
}

.site-ecran-titre {
  font-size: var(--t-petit);
  font-weight: 600;
}

.site-frise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
}

.site-frise li {
  padding-top: var(--e-2);
  color: var(--texte-3);
  border-top: 2px solid var(--filet-fort);
  font-size: var(--t-micro);
}

.site-frise li[data-etat="fait"] {
  color: var(--texte-2);
  border-top-color: var(--texte-2);
}

.site-frise li[data-etat="courant"] {
  color: var(--texte);
  border-top-color: var(--decision);
  font-weight: 600;
}

.site-ecran-etape {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  line-height: 1.15;
  letter-spacing: var(--approche-titre);
}

.site-journal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-left: var(--e-5);
}

.site-journal::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: var(--filet-fort);
}

.site-journal li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-3);
  color: var(--texte-2);
  font-size: var(--t-petit);
}

.site-journal strong {
  color: var(--texte);
  font-weight: 600;
}

.site-journal-noeud {
  --c: var(--texte-3);
  position: absolute;
  top: 5px;
  left: calc(-1 * var(--e-5));
  width: 11px;
  height: 11px;
  background: var(--surface);
  border: 2px solid var(--c);
  border-radius: 50%;
}

.site-journal-noeud[data-ia="claude"] { --c: var(--ia-claude); }
.site-journal-noeud[data-ia="codex"] { --c: var(--ia-codex); }
.site-journal-noeud[data-ia="locale"] { --c: var(--ia-locale); }
.site-journal-noeud[data-ton="decision"] { --c: var(--decision); background: var(--decision); }
.site-journal-noeud[data-ton="livraison"] { --c: var(--decision); }

/* ---- Questions ---- */
.site-questions-cadre {
  max-width: 820px;
}

.site-questions details {
  border-top: 1px solid var(--filet);
}

.site-questions details:last-child {
  border-bottom: 1px solid var(--filet);
}

.site-questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 60px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.site-questions summary::-webkit-details-marker {
  display: none;
}

.site-questions summary::after {
  content: "+";
  color: var(--texte-3);
  font-size: 1.25rem;
  transition: transform var(--duree-1) var(--courbe-standard);
}

.site-questions details[open] summary::after {
  transform: rotate(45deg);
}

.site-questions summary:focus-visible {
  outline: none;
  box-shadow: var(--anneau-focus);
  border-radius: var(--r-petit);
}

.site-questions details p {
  max-width: 64ch;
  padding-bottom: var(--e-5);
}

/* ---- Appel final ---- */
.site-final-cadre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-5);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  text-align: center;
  background: var(--halo-panneau);
  border-top: 1px solid var(--filet);
}

.site-contact-repli {
  color: var(--texte);
  text-underline-offset: 0.2em;
}

.site-final-titre {
  max-width: 14ch;
  text-wrap: balance;
}

/* ---- Pied ---- */
.site-pied {
  padding-block: var(--e-6);
  border-top: 1px solid var(--filet);
}

.site-pied-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
}

.site-pied-liens {
  display: flex;
  gap: var(--e-5);
  margin-inline-start: auto;
}

/* ---- Mentions légales ---- */
.site-legal {
  padding-block: var(--e-7) var(--e-section);
}

.site-legal .site-cadre {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  max-width: 72ch;
}

.site-legal dl {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--e-2) var(--e-5);
}

.site-legal dt {
  color: var(--texte-2);
}

/* ---- Tablette ---- */
@media (max-width: 1020px) {
  .site-nav {
    display: none;
  }

  .site-tete-actions {
    margin-inline-start: auto;
  }

  .site-heros-grille,
  .site-bloc {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--e-7);
  }

  .site-etapes::before {
    display: none;
  }
}

/* ---- Téléphone ---- */
@media (max-width: 600px) {
  .site-tete-ligne {
    padding-left: var(--e-4);
  }

  .site-tete-actions [data-lien="connexion"] {
    display: none;
  }

  .site-comite-fragments {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-fragment--analyse[data-ia="codex"],
  .site-fragment--decision,
  .site-fragment--validation {
    grid-column: auto;
    transform: none;
  }

  .site-risques {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-risque + .site-risque {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }

  .site-etapes {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--e-6);
    padding-left: var(--e-2);
  }

  .site-actions .bouton {
    width: 100%;
    justify-content: center;
  }

  /* Cibles tactiles d'au moins 44 px au téléphone. */
  .site-tete-actions .bouton,
  .site-demo .bouton {
    min-height: 44px;
  }

  .site-tete-actions .bouton--carre {
    min-width: 44px;
  }

  .site-legal dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  /* Le face-à-face au téléphone : chaque moment devient un bloc, ses deux réponses étiquetées. */
  .site-face-table thead {
    display: none;
  }

  .site-face-table,
  .site-face-table tbody,
  .site-face-table tr,
  .site-face-table th,
  .site-face-table td {
    display: block;
    width: auto;
  }

  .site-face-table tbody tr + tr {
    border-top: 1px solid var(--filet);
  }

  .site-face-table tbody tr + tr > * {
    border-top: 0;
  }

  .site-face-table tbody th {
    width: auto;                       /* même poids que la règle d'ordinateur (24 %), sinon elle gagne */
    padding-bottom: var(--e-2);
  }

  .site-face-table td {
    padding-block: var(--e-2);
  }

  .site-face-table td:last-child {
    padding-bottom: var(--e-5);
  }

  .site-face-table td::before {
    content: attr(data-titre);
    display: block;
    margin-bottom: 2px;
    color: var(--texte-3);
    font-size: var(--t-micro);
  }
}