/* ────────────────────────────────────────────────────────────────
   Variante « essai et parti pris » de l'accueil (maquette, octobre 2026).

   L'esprit de Milanote, qu'apprécie Manu : une page blanche et aérée,
   le produit au centre, des cartes claires. Mais la preuve n'est pas
   une rangée de logos — c'est un tableau qu'on essaie sans compte,
   puis un parti pris signé. Chargée après site.css, dont elle garde la
   police, les boutons, le choix de langue et le moteur des scènes.

   Le cyan de tracé ne dit que l'état (cote, outil actif) ; le crème
   n'existe que comme papier du calque ; aucun orange, aucun ambre.
   ──────────────────────────────────────────────────────────────── */

:root {
  --marque-encre: #17191E; --marque-lame: #DD3A2C; --marque-superposition: #7A2A25;
  --marque-chant: #EE9C96; --marque-chant-tete: #B5352A;
  --fond-doux: #F4F6F7;
  --ombre-carte: 0 1px 2px rgba(14, 18, 22, .05), 0 10px 30px rgba(14, 18, 22, .08);
}
body.site.essai-page { background: var(--table); background-image: none; }

.colonne { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .colonne { padding: 0 32px; } }

/* ── En-tête ─────────────────────────────────────────────────── */
.tete { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tete .colonne { display: flex; align-items: center; gap: 24px; height: 64px; }
.tete-marque img { height: 26px; width: auto; }
.tete-marque { transition: opacity .3s; }
.tete-marque.est-masquee { opacity: 0; pointer-events: none; }
.tete nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.tete nav a:not(.bouton) { text-decoration: none; color: var(--encre-pale); }
.tete nav a:not(.bouton):hover { color: var(--encre); }
.tete .bouton { color: #fff; }
@media (max-width: 640px) { .tete nav .facultatif { display: none; } .tete nav { gap: 14px; } }

/* ── Ouverture ───────────────────────────────────────────────── */
.ouverture-essai { padding: 40px 0 36px; text-align: center; }
.ouverture-essai .colonne { display: grid; justify-items: center; gap: 22px; }
.marque-construite { width: min(46vw, 190px); height: auto; overflow: visible; }
.ouverture-essai h1 { font-weight: 500; font-size: clamp(36px, 6vw, 72px); line-height: 1.04; letter-spacing: -.03em; max-width: 12em; }
.sous-titre { margin: 0; max-width: 36em; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--encre-pale); text-wrap: pretty; }
.actions-centre { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (min-width: 960px) { .ouverture-essai { padding: 56px 0 48px; } }

/* ── Le tableau d'essai ──────────────────────────────────────── */
.essai { padding: 8px 0 24px; }
.tableau {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: 0 2px 4px rgba(14, 18, 22, .04), 0 24px 64px rgba(14, 18, 22, .12);
  background: #fff;
}
.tableau-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.tableau-barre {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center;
}
.tableau-titre { background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 12px; font-size: 13px; box-shadow: var(--ombre-carte); }
.tableau-presence { display: flex; }
.tableau-presence i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; color: #fff; font: 600 11px var(--police); font-style: normal; margin-left: -6px; }

.tableau-rail {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--ombre-carte);
}
.tableau-rail button {
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--encre);
}
.tableau-rail button svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tableau-rail button:hover { background: var(--fond-doux); }
.tableau-rail button[aria-pressed="true"] { background: var(--trait-voile); color: var(--trait); }
@media (pointer: coarse) { .tableau-rail button { width: 44px; height: 44px; } }

.tableau[data-outil="cote"] .tableau-svg,
.tableau[data-outil="dessin"] .tableau-svg,
.tableau[data-outil="remarque"] .tableau-svg { cursor: crosshair; }
/* Hors Sélection, le calque est transparent aux clics (règle 2). */
.tableau:not([data-outil="selection"]) #e-calque { pointer-events: none; }
.tableau[data-outil="dessin"] #e-calque { pointer-events: none; }
.tableau[data-outil="selection"] #e-calque { cursor: grab; }
.tableau.est-en-geste[data-outil="selection"] #e-calque { cursor: grabbing; }

.e-calque-papier { fill: #FBF7E5; fill-opacity: .82; stroke: #C8D0D5; filter: drop-shadow(0 6px 12px rgba(14, 18, 22, .12)); }
.e-calque-nom { font: 500 12px var(--police); fill: var(--encre-pale); }
.e-trait { fill: none; stroke: #C0453C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e-cote { fill: none; stroke: var(--trait); stroke-width: 1.4; }
.e-cote-texte { font: 500 15px var(--police); fill: var(--trait); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.e-point { fill: var(--trait); }
.e-apercu-ligne { stroke: var(--trait); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }
.e-pastille circle { fill: #5F9E86; stroke: #fff; stroke-width: 2; }
.e-pastille text { font: 600 13px var(--police); fill: #fff; }
.e-fil rect { fill: #fff; stroke: var(--hairline); filter: drop-shadow(0 4px 10px rgba(14, 18, 22, .12)); }
.e-fil-texte { font: 500 13px var(--police); fill: var(--encre); }
.e-fil-auteur { font: 400 11px var(--police); fill: var(--encre-pale); }

.e-saisie, .e-bulle {
  position: absolute; z-index: 5; transform: translate(-50%, 18px);
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--ombre-carte);
  font-size: 13px; white-space: nowrap;
}
.e-bulle { transform: translate(16px, 10px); }
.e-saisie[hidden], .e-bulle[hidden] { display: none; }
.e-saisie label { color: var(--encre-pale); }
.e-saisie input, .e-bulle input {
  height: 32px; border: 1px solid var(--hairline-fort); border-radius: 6px; padding: 0 8px; font: 500 14px var(--police); color: var(--encre);
}
.e-saisie input { width: 76px; text-align: right; }
.e-bulle input { width: 220px; }
.e-saisie input:focus, .e-bulle input:focus { outline: 2px solid var(--trait); outline-offset: 0; border-color: transparent; }

.guide {
  position: absolute; right: 14px; top: 58px; z-index: 3; width: 268px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--ombre-carte);
  padding: 16px 16px 12px; font-size: 13.5px; line-height: 1.45;
}
.guide-titre { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.guide ol { margin: 0; padding: 0; list-style: none; counter-reset: geste; display: grid; gap: 8px; }
.guide li { counter-increment: geste; position: relative; padding-left: 30px; min-height: 22px; color: var(--encre-pale); }
.guide li::before {
  content: counter(geste); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; border: 1px solid var(--hairline-fort); color: var(--encre-pale);
}
.guide li b { color: var(--encre); font-weight: 600; }
.guide li.est-courante { color: var(--encre); }
.guide li.est-courante::before { border-color: var(--encre); color: var(--encre); }
.guide li.est-faite { opacity: .55; }
.guide li.est-faite::before { content: "✓"; background: var(--encre); border-color: var(--encre); color: #fff; }
.guide-fin { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; justify-items: start; color: var(--encre); }
.guide-fin[hidden] { display: none; }
.guide-recommencer { margin-top: 10px; border: 0; background: none; padding: 0; font: 500 12.5px var(--police); color: var(--encre-pale); text-decoration: underline; cursor: pointer; }

.tableau-statut {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; margin: 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--encre-pale);
}
.tableau-statut.est-calee { color: var(--encre); }
.essai-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--encre-pale); }

/* Tant que le tableau n'est pas assez large pour que le guide laisse le
   plan libre, le guide sort du tableau et passe dessous. */
@media (max-width: 1099px) {
  .guide { position: static; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--hairline); box-shadow: none; }
  .tableau-barre .tableau-titre { font-size: 11.5px; padding: 4px 8px; }
  .tableau-rail { top: 52px; transform: none; }
  .tableau-statut { position: static; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; }
}

/* ── Le positionnement ───────────────────────────────────────── */
.place { padding: 88px 0 72px; }
.place-texte p { margin: 0 auto; max-width: 28em; text-align: center; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; letter-spacing: -.012em; color: var(--encre-pale); text-wrap: balance; }
.place-texte strong { color: var(--encre); font-weight: 500; }

/* ── Les cartes ──────────────────────────────────────────────── */
.cartes-section { padding: 24px 0 72px; }
.cartes-section h2, .fin-essai h2 { font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 28px; }
.cartes { display: grid; gap: 20px; }
@media (min-width: 680px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte { background: var(--fond-doux); border-radius: 16px; padding: 14px 14px 20px; display: grid; gap: 10px; align-content: start; }
.carte .scene { margin: 0; border-radius: 10px; border: 1px solid var(--hairline); box-shadow: none; }
.carte .scene-legende { display: none; }
.carte h3 { font-weight: 600; font-size: 17px; margin: 6px 4px 0; }
.carte p { margin: 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--encre-pale); }

/* ── Le parti pris : une lettre ──────────────────────────────── */
.parti-pris { padding: 48px 0 96px; background: var(--fond-doux); }
.lettre {
  max-width: 760px; margin: 0 auto; background: #fff; border-radius: 18px; box-shadow: var(--ombre-carte);
  padding: clamp(24px, 5vw, 56px);
}
.lettre-sur { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: var(--interlettrage-capitale); text-transform: uppercase; color: var(--encre-pale); }
.lettre h2 { font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 22px; }
.lettre-corps p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--encre); text-wrap: pretty; }
.engagements { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 14px; }
.engagements li { padding-left: 28px; position: relative; font-size: 15.5px; line-height: 1.6; color: var(--encre-pale); }
.engagements li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(-45deg); }
.engagements b { color: var(--encre); font-weight: 600; }
.signature { margin: 0; font-size: 16px; font-weight: 500; }
.signature span { font-weight: 400; color: var(--encre-pale); font-size: 14px; }

/* ── Fin et pied ─────────────────────────────────────────────── */
.fin-essai { padding: 96px 0; text-align: center; }
.fin-essai h2 { margin-bottom: 20px; }
.pied-essai { border-top: 1px solid var(--hairline); }
.pied-essai .colonne { padding-block: 28px 40px; display: grid; gap: 12px; }
.pied-essai nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }
.pied-essai a { color: var(--encre-pale); text-decoration: none; }
.pied-essai a:hover { color: var(--encre); text-decoration: underline; }
.pied-essai p { margin: 0; font-size: 12.5px; color: var(--encre-pale); }

/* Sur téléphone, le tableau prend une vraie hauteur — recadré sur le plan,
   les bords de la table sortent du champ — et le rail se couche en bas. */
@media (max-width: 600px) {
  .tableau-svg { height: 400px; }
  .tableau-rail { top: 336px; left: 50%; transform: translateX(-50%); grid-auto-flow: column; }
}

/* ── Les images du tableau : symbolisées, jamais des photos ──── */
.e-image-cadre { fill: #fff; stroke: var(--hairline); filter: drop-shadow(0 4px 10px rgba(14, 18, 22, .1)); }
.e-image-nom { font: 500 12px var(--police); fill: var(--encre-pale); }
.tableau:not([data-outil="remarque"]) .e-image { pointer-events: none; }

.guide-lien { border: 0; background: none; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; cursor: pointer; }
.guide-lien:disabled { color: var(--encre-pale); text-decoration: none; cursor: default; }

/* ── La planche de rendu ─────────────────────────────────────── */
.rendu {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 24px)); background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 2px 4px rgba(14, 18, 22, .05), 0 30px 80px rgba(14, 18, 22, .22);
}
.rendu[hidden] { display: none; }
.rendu-tete { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.rendu-titre { margin: 0; font-weight: 600; font-size: 14px; }
.rendu-fermer { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--encre-pale); width: 32px; height: 32px; }
.rendu-corps { display: grid; gap: 16px; padding: 16px; }
@media (min-width: 640px) { .rendu-corps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rendu-entrees { display: grid; gap: 8px; align-content: start; font-size: 13px; }
.rendu-entree { margin: 0; display: flex; gap: 10px; color: var(--encre-pale); }
.rendu-entree b { width: 64px; flex: none; color: var(--encre); font-weight: 600; }
.rendu-entrees input { height: 34px; border: 1px solid var(--hairline-fort); border-radius: 6px; padding: 0 8px; font: 13px var(--police); }
.rendu-cout { margin: 4px 0; font-size: 12px; color: var(--encre-pale); line-height: 1.45; }
.rendu-entrees .bouton { justify-self: start; }
.rendu-image { margin: 0; position: relative; display: grid; gap: 6px; }
.rendu-image svg { width: 100%; height: auto; border-radius: 8px; opacity: 0; transition: opacity .6s; background: var(--fond-doux); }
.rendu-image.est-prete svg { opacity: 1; }
.rendu-image figcaption { font-size: 12px; color: var(--encre-pale); opacity: 0; }
.rendu-image.est-prete figcaption { opacity: 1; }
.rendu-image::before { content: attr(data-attente); position: absolute; inset: 0 0 22px; display: grid; place-items: center; font-size: 13px; color: var(--encre-pale); border: 1px dashed var(--hairline-fort); border-radius: 8px; }
.rendu-image.est-prete::before, .rendu-image.est-en-cours::before { content: none; }
.rendu-attente { position: absolute; left: 12%; right: 12%; top: 46%; height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; display: none; }
.rendu-image.est-en-cours .rendu-attente { display: block; }
.rendu-attente span { display: block; height: 100%; width: 100%; background: var(--encre); transform-origin: left; animation: r-attente 1.6s linear forwards; }
@keyframes r-attente { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── La confidentialité, dans la lettre ──────────────────────── */
.confidentialite { margin: 0 0 28px; padding: 18px 20px; border-radius: 12px; background: var(--fond-doux); }
.confidentialite-titre { margin: 0 0 6px; font-weight: 600; font-size: 15.5px; }
.confidentialite p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre); }

/* ── Les tarifs : deux familles, un onglet à la fois ─────────── */
.tarifs-essai { padding: 88px 0 24px; }
.tarifs-essai h2 { font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em; margin-bottom: 6px; text-align: center; }
.tarifs-lancement { margin: 0 0 24px; text-align: center; font-size: 13.5px; color: var(--encre-pale); }
.familles { display: flex; justify-content: center; gap: 4px; margin: 0 auto 28px; padding: 4px; width: max-content; background: var(--fond-doux); border-radius: 999px; }
.familles button { border: 0; background: none; height: 38px; padding: 0 22px; border-radius: 999px; font: 500 14.5px var(--police); color: var(--encre-pale); cursor: pointer; }
.familles button[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(14, 18, 22, .12); }
.offres-essai { display: grid; gap: 18px; align-items: stretch; }
.offres-essai[hidden] { display: none; }
@media (min-width: 860px) { .offres-essai { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; } }
.offre-carte { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--hairline); }
.offre-carte--conseillee { border: 2px solid var(--encre); box-shadow: var(--ombre-carte); padding: 32px 24px; }
@media (min-width: 860px) { .offre-carte--conseillee { transform: scale(1.04); } }
.offre-marque-essai { position: absolute; top: -12px; left: 24px; margin: 0; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--encre); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.offre-carte h3 { font-weight: 600; font-size: 19px; }
.offre-prix-essai { margin: 0; }
.offre-prix-essai b { font-weight: 500; font-size: 40px; letter-spacing: -.02em; }
.offre-prix-essai span { font-size: 13.5px; color: var(--encre-pale); }
.offre-an { margin: -4px 0 4px; font-size: 13px; color: var(--encre-pale); }
.offre-carte ul { list-style: none; margin: 0 0 8px; padding: 12px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 7px; font-size: 14.5px; }
.offre-carte li::before { content: "✓"; margin-right: 8px; font-weight: 600; }
.offre-pied { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--encre); background: var(--fond-doux); padding: 8px 10px; border-radius: 8px; }
.offre-carte .bouton { width: 100%; }
.tarifs-pied { margin: 24px auto 0; text-align: center; font-size: 14px; color: var(--encre-pale); max-width: 40em; }
.tarifs-pied a { color: var(--encre); }

/* Les trois cadres d'une famille ont la même hauteur et leurs boutons la
   même ligne, même quand l'offre conseillée porte une phrase de plus. */
@media (min-width: 860px) { .offres-essai { align-items: stretch; } }
.offre-carte { display: flex; flex-direction: column; }
.offre-carte .bouton { margin-top: auto; }
.offre-carte ul { margin-bottom: 14px; }