/* =========================================================================
   AMORE CORP — « LE REGISTRE »
   L'objet de la section « Le site vit, ou il meurt. » (/tarifs, .sec.garantie)

   Un journal d'entretien : une colonne de traits d'encre, un par jour de tenue.
   Au défilement il ARRIVE, l'écriture PÂLIT puis S'ARRÊTE (le site abandonné),
   le papier se pique de rousseurs — puis la tenue REPREND, l'encre revient et
   le registre est mené jusqu'au dernier jour. Il repart ensuite dans le papier.

   Trois principes de sûreté, chacun payé d'une erreur réelle :
   1. L'ÉTAT VISIBLE PAR DÉFAUT EST L'ÉTAT FINAL. Sans JS — ou si vivant.js
      n'arrive jamais (404, erreur de syntaxe) — .vivant-statique montre le
      registre complet, en CSS pur. Le drapeau .vivant-actif est posé par
      vivant.js APRÈS son premier tracé réussi : jamais depuis le HTML.
   2. Aucune valeur de repli ne vaut « invisible » : --v-op vaut 1 et --v-y
      vaut 0 quand le JS n'a rien écrit (le piège du var(--x, 0)).
   3. Rien ne calcule au démarrage : la table des traits et la couche de
      rousseurs ne sont fabriquées qu'à l'approche de la section.

   ⚠️ AUCUNE DURÉE N'EST ÉCRITE SOUS LA FIGURE. La légende disait « un trait
   par jour, sur dix-huit mois » : c'était du faux contenu. Le dessin porte
   546 traits en large et 549 en étroit, quand dix-huit mois font 547 ou 548
   jours — et la légende n'existait nulle part ailleurs dans la page. Elle est
   remplacée par une phrase relevée mot pour mot dans la section (l'engagement
   « Hébergement & continuité »). Ne jamais y remettre un compte.
   ========================================================================= */

/* --- où la figure se pose (refonte du 04/09/2026) ------------------------
   Elle n'est plus dans un « socle » sous la mention légale : elle occupe la
   colonne GAUCHE de la barre de tête « Après la livraison » (.pl-suite-tete
   de planche.css), en regard du texte qui l'explique — à gauche et non plus
   à droite depuis le 15/10/2026 : c'est elle qui ouvre la section (au-dessus
   du titre en une colonne). Raison détaillée dans planche.css. Le registre est donc
   lu AVEC la phrase qu'il illustre, pas trois écrans plus bas.
   Rien à faire ici pour la placer : la grille est portée par planche.css.
   Cette règle ne sert qu'à empêcher la figure de s'étirer sur une colonne
   plus large que le dessin ne le supporte. ----------------------------- */
.pl-suite-tete .vivant{max-width:44rem;width:100%;}

/* --- la figure ----------------------------------------------------------
   Elle emprunte la grammaire des engagements qu'elle prolonge : un filet d'or
   d'un pixel en haut, une légende en petites capitales bronze. C'est ce qui
   la rattache à la section au lieu d'y être posée. ---------------------- */
.vivant{
  margin:0;
  opacity:var(--v-op,1);                       /* repli = VISIBLE */
  transform:translateY(var(--v-y,0px));        /* repli = EN PLACE */
  will-change:opacity,transform;
}
.vivant-cadre{
  position:relative;
  border-top:1px solid var(--or);
  padding-top:.85rem;
}
/* La légende monte à 11 px / graisse 500 (04/09/2026) : à 10 px interlettrées,
   le contraste CALCULÉ était bon (4,94:1 sur l'ivoire) mais le contraste
   RELEVÉ SUR LES PIXELS tombait à 4,06 — des capitales très fines sous le
   grain n'ont presque aucun pixel plein. Un corps plus épais rapproche le
   rendu du calcul sans toucher à la palette. */
.vivant figcaption{
  font-family:var(--mono);
  font-size:.6875rem;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--bronze);                          /* 4,94:1 sur l'ivoire */
  margin-top:.7rem;
}

/* --- la toile : masquée tant que le JS n'a pas prouvé qu'il sait dessiner - */
.vivant-toile{display:none;width:100%;height:auto;}
.vivant-actif .vivant-toile{display:block;}
.vivant-actif .vivant-statique{display:none;}

/* --- LE REPLI : le registre complet, en CSS pur, sans une ligne de script.
   Les traits sont un dégradé répété ; les lignes du réglage sont posées par
   ::after, qui n'entre pas dans le compte des éléments de la page.
   Les pas sont écrits en dur par palier de largeur : sans JS, personne ne
   peut les calculer, et personne ne compte les traits. -------------------- */
.vivant-statique{
  --pas:3.52px;      /* entre deux jours */
  --trait:1.2px;     /* largeur du trait */
  --ligne:25px;      /* hauteur d'une ligne du registre (six mois) */
  --haut:17px;       /* hauteur d'un trait */
  --mois:107px;      /* 30,4 jours */
  --respire:6.3px;   /* la respiration entre deux mois */
  /* la hauteur vaut EXACTEMENT un nombre entier de lignes : à 78 px, la trame
     répétée entamait une quatrième ligne et laissait une frange de moignons
     au bas de la figure (vu sur la capture sans JS, corrigé). */
  height:75px;
  /* Trois couches, la première par-dessus les autres. Le masque laisse passer
     la hauteur des traits ET la bande d'un pixel du réglage — sans cette
     seconde ouverture, le masque effaçait aussi les lignes du registre
     (constaté sur la capture sans JS : trois bandes de traits en apesanteur). */
  background-image:
    repeating-linear-gradient(180deg,                    /* 1. le réglage */
      transparent 0 calc(var(--ligne) - 1px),
      var(--filet-clair) calc(var(--ligne) - 1px) var(--ligne)),
    /* 2. la respiration des mois — de la couleur DU FOND DE LA SECTION, pas
       du papier en dur : la figure a déménagé sur l'ivoire le 04/09/2026, et
       des bandes de papier posées sur de l'ivoire se voient. Le repli reste
       var(--papier) si la variable n'existe pas. */
    repeating-linear-gradient(90deg,
      transparent 0 var(--mois),
      var(--pl-fond,var(--papier)) var(--mois) calc(var(--mois) + var(--respire))),
    repeating-linear-gradient(90deg,                     /* 3. un trait par jour */
      rgba(22,52,85,.74) 0 var(--trait), transparent var(--trait) var(--pas));
  -webkit-mask-image:repeating-linear-gradient(180deg,
      #000 0 var(--haut), transparent var(--haut) calc(var(--ligne) - 1px),
      #000 calc(var(--ligne) - 1px) var(--ligne));
          mask-image:repeating-linear-gradient(180deg,
      #000 0 var(--haut), transparent var(--haut) calc(var(--ligne) - 1px),
      #000 calc(var(--ligne) - 1px) var(--ligne));
}
@media (max-width:900px){
  /* colonne étroite : six lignes de trois mois */
  .vivant-statique{--pas:3.78px;--ligne:20px;--haut:13.5px;--mois:115px;--respire:6.8px;height:120px;}
}
@media (max-width:340px){
  /* neuf lignes de deux mois */
  .vivant-statique{--pas:3.4px;--ligne:17px;--haut:11.5px;--mois:103px;--respire:6.1px;height:153px;}
}

/* --- mouvement refusé : l'objet se montre à son état final, il ne disparaît
       jamais. vivant.js coupe aussi son écoute du défilement. ------------- */
@media (prefers-reduced-motion:reduce){
  .vivant{opacity:1 !important;transform:none !important;will-change:auto;}
}

/* --- impression : le site imprime déjà tout ; la toile n'imprime rien de
       fiable, on rend le registre statique. ------------------------------- */
@media print{
  .vivant-actif .vivant-toile{display:none;}
  .vivant-actif .vivant-statique{display:block;}
}