/* ==========================================================================
   Site vitrine Bipzer – feuille de style à part.
   L'outil (espace, inscription, formulaires) garde app/statique/style.css.
   Tout est rangé sous .site pour ne jamais déborder sur l'outil.

   Idée : le carnet de chantier. Papier chaud, encre, et le jaune du mètre
   ruban. Titres en Barlow Semi Condensed (lettrage de panneau de chantier),
   texte en Atkinson Hyperlegible (dessinée pour les gens qui lisent mal ou
   vite), quelques notes à la main en Caveat.
   Polices sous licence SIL OFL, hébergées chez nous (rien n'est chargé chez
   Google, donc pas de transfert d'adresse IP à signaler).
   ========================================================================== */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("polices/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("polices/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("polices/barlow-sc-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("polices/barlow-sc-800.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-style: normal; font-display: swap; src: url("polices/caveat-600.woff2") format("woff2"); }

:root {
  --papier: #f5f0e6;
  --papier-fonce: #ebe3d3;
  --feuille: #fffdf8;
  --encre: #1f1b16;
  --encre-douce: #554c41;
  --trait: #d6cab4;
  --jaune: #f2b705;
  --sur-jaune: #1f1b16;
  --brique: #a83a1b;
  --telephone: #1f1b16;
  --ecran: #fbf8f2;
  --bulle: #ebe4d6;
  --s-titre: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --s-texte: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --s-main: "Caveat", "Bradley Hand", "Segoe Print", cursive;
}
/* Une seule version claire, comme une feuille de papier : lisible en plein soleil sur un chantier. */

/* --- Socle ---------------------------------------------------------------- */
body:has(> .site) { background: var(--papier); }
.site {
  min-height: 100vh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--s-texte);
  font-size: 1.125rem; /* 18 px : on lit souvent debout, entre deux chantiers */
  line-height: 1.6;
  overflow-x: clip;
  color-scheme: light;
}
.site h1, .site h2, .site h3 {
  font-family: var(--s-titre);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 .7rem;
  color: var(--encre);
}
.site h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); margin-bottom: 1.2rem; }
.site h2 { font-size: clamp(2rem, 6vw, 3rem); }
.site h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.site p { margin: 0 0 1rem; }
.site a { color: var(--encre); text-decoration-color: var(--jaune); text-decoration-thickness: .18em; text-underline-offset: .2em; }
.site a:hover { text-decoration-color: currentColor; }
.site :focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 2px; }
.site .discret { color: var(--encre-douce); }
.site main { max-width: none; margin: 0; padding: 0; }
.cadre { max-width: 72rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 700px) { .cadre { padding-inline: 32px; } }

.aller-au-contenu { position: absolute; left: -999px; top: 0; }
.aller-au-contenu:focus { left: 16px; top: 12px; z-index: 50; background: var(--jaune); color: var(--sur-jaune); padding: .6rem 1rem; }

/* Le mètre ruban : sert de séparateur, nulle part ailleurs. */
.metre {
  height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--sur-jaune) 0 2px, transparent 2px 60px) left top / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, var(--sur-jaune) 0 1px, transparent 1px 12px) left top / 100% 8px no-repeat,
    var(--jaune);
  border-block: 2px solid var(--sur-jaune);
}

/* --- Boutons -------------------------------------------------------------- */
.bouton-jaune, .bouton-trait {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.4rem; padding: .8rem 1.6rem;
  font: 800 1.25rem/1.1 var(--s-titre); letter-spacing: .01em;
  text-decoration: none; text-align: center;
  border: 2px solid var(--sur-jaune); border-radius: 6px;
  box-shadow: 0 4px 0 var(--sur-jaune);
  transition: transform .12s ease, box-shadow .12s ease;
}
.site .bouton-jaune { background: var(--jaune); color: var(--sur-jaune); }
.site .bouton-trait { background: transparent; color: var(--encre); border-color: var(--encre); box-shadow: 0 4px 0 var(--encre); }
.bouton-jaune:hover, .bouton-trait:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--sur-jaune); }
.bouton-jaune:active, .bouton-trait:active { transform: translateY(4px); box-shadow: none; }
.bouton-jaune.petit { min-height: 2.6rem; padding: .35rem .95rem; font-size: 1.05rem; box-shadow: 0 3px 0 var(--sur-jaune); }
@media (max-width: 559px) {
  .une-texte .bouton-jaune, .final .bouton-jaune, .texte .bouton-jaune { display: flex; width: 100%; }
}

/* --- En-tête -------------------------------------------------------------- */
.haut { border-bottom: 2px solid var(--encre); background: var(--papier); position: sticky; top: 0; z-index: 10; }
.haut .cadre { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 4rem; }
.site .marque { display: flex; align-items: center; gap: .5rem; font: 800 1.6rem/1 var(--s-titre); text-decoration: none; letter-spacing: -.01em; }
.marque img, .bas-marque img { border-radius: 6px; }
.haut nav { display: flex; align-items: center; gap: 1.1rem; font-weight: 700; font-size: 1rem; }
.site .haut nav a:not(.bouton-jaune) { text-decoration: none; padding-block: .6rem; }
.site .haut nav a:not(.bouton-jaune):hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: .18em; }
.si-large { display: none; }
@media (min-width: 800px) { .si-large { display: inline; } }
.haut nav { gap: .9rem; }
@media (min-width: 800px) { .haut nav { gap: 1.1rem; } }
.menu-mobile { position: static; }
.menu-mobile summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--encre); border-radius: 6px; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.burger { display: grid; gap: 4px; }
.burger i { display: block; width: 18px; height: 2.5px; background: var(--encre); transition: transform .2s ease, opacity .2s ease; }
.menu-mobile[open] .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-mobile[open] .burger i:nth-child(2) { opacity: 0; }
.menu-mobile[open] .burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-mobile[open] summary { background: var(--jaune); }
.tiroir { position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 2px solid var(--encre); padding: .5rem 16px 1rem; display: grid; }
.site .tiroir a { font: 800 1.6rem/1.2 var(--s-titre); text-decoration: none; padding: .7rem 0; border-bottom: 1px solid var(--trait); }
.site .tiroir a:last-child { border-bottom: 0; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 800px) { .menu-mobile { display: none; } }
@media (max-width: 380px) { .haut nav { gap: .6rem; } .site .marque { font-size: 1.35rem; } }
@media (max-width: 359px) { .marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* --- La une --------------------------------------------------------------- */
.une { border-bottom: 0; }
.une-grille { display: grid; gap: 2.5rem; padding-block: 2.25rem 3rem; }
.surtitre {
  font: 700 1rem/1.2 var(--s-titre); text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.surtitre::before { content: ""; width: 1.6rem; height: 4px; background: var(--jaune); border: 1px solid var(--sur-jaune); }
.surligne { background: linear-gradient(transparent 58%, var(--jaune) 58%, var(--jaune) 92%, transparent 92%); padding-inline: .06em; }
.chapeau { font-size: 1.2rem; color: var(--encre-douce); max-width: 34rem; margin-bottom: 1.6rem; }
.promesses { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-weight: 700; font-size: 1rem; }
.promesses li { display: flex; align-items: center; gap: .45rem; }
.promesses li::before { content: ""; width: .55rem; height: .55rem; background: var(--jaune); border: 2px solid var(--encre); transform: rotate(45deg); }

.scene { margin: 0; position: relative; display: grid; justify-items: center; gap: .6rem; }
.note-main { font: 600 1.55rem/1.1 var(--s-main); color: var(--encre-douce); margin: 0; max-width: 18rem; text-align: center; }
@media (min-width: 900px) {
  .une-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding-block: 3.5rem 4rem; gap: 3rem; }
  .note-haut { justify-self: start; transform: rotate(-3deg); }
  .note-bas { justify-self: end; transform: rotate(2deg); }
}

/* Téléphone d'illustration */
.mobile-demo { width: 100%; max-width: 300px; background: var(--telephone); border-radius: 36px; padding: 10px; transform: rotate(1.5deg); box-shadow: 10px 12px 0 var(--papier-fonce); }
.mobile-demo .ecran { background: var(--ecran); border-radius: 27px; padding: 14px 14px 18px; min-height: 460px; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; line-height: 1.4; }
.mobile-demo .barre { display: flex; justify-content: space-between; font: 700 .75rem var(--s-titre); padding: 0 8px 4px; }
.mobile-demo .contact { text-align: center; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--trait); }
.mobile-demo .contact small { display: block; font-weight: 400; color: var(--encre-douce); }
.mobile-demo .manque { align-self: center; color: var(--brique); font-size: .8rem; font-weight: 700; }
.mobile-demo .bulle { background: var(--bulle); border-radius: 16px 16px 16px 4px; padding: 9px 12px; max-width: 88%; }
.mobile-demo .bulle.moi { background: var(--encre); color: var(--papier); align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.mobile-demo .bulle a { color: var(--jaune); font-weight: 700; text-decoration: underline; }
.mobile-demo .notif { margin-top: auto; background: var(--jaune); color: var(--sur-jaune); border: 2px solid var(--sur-jaune); border-radius: 12px; padding: 10px 12px; }
.mobile-demo .notif b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .mobile-demo, .note-haut, .note-bas { transform: none !important; } }

/* --- Blocs ------------------------------------------------------------------ */
.bloc { padding-block: 3.5rem; }
@media (min-width: 900px) { .bloc { padding-block: 5rem; } }
.bloc-fonce-clair { background: var(--papier-fonce); border-block: 2px solid var(--encre); }
.bloc-trait { border-top: 2px solid var(--encre); }
.bloc-titre p { color: var(--encre-douce); font-size: 1.15rem; max-width: 32rem; }
.bloc-titre.large { max-width: 44rem; margin-bottom: 2.25rem; }
.deux-colonnes { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .bloc-titre.colle { position: sticky; top: 6rem; }
}

/* Comment ça marche : une matinée de chantier */
.journee { list-style: none; padding: 0; margin: 0 0 0 .6rem; border-left: 2px solid var(--encre); }
.journee li { position: relative; padding: 0 0 2.25rem 1.9rem; }
.journee li:last-child { padding-bottom: .25rem; }
.journee li::before { content: ""; position: absolute; left: calc(-.55rem - 1px); top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); }
.journee time { display: block; font: 800 1.15rem/1 var(--s-titre); letter-spacing: .04em; color: var(--encre-douce); margin-bottom: .45rem; padding-top: .2rem; }
.journee h3 { margin-bottom: .35rem; }
.journee p { color: var(--encre-douce); margin: 0; }

/* Ce que Bipzer fait pour vous : présenté comme un devis */
.feuille { background: var(--feuille); border: 2px solid var(--encre); max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 1.25rem; box-shadow: 10px 10px 0 var(--encre); }
@media (min-width: 700px) { .feuille { padding: 2.5rem 3rem 2rem; } }
.feuille-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--encre); padding-bottom: .75rem; margin-bottom: 1.5rem; }
.feuille-type { font: 800 1.1rem/1 var(--s-titre); text-transform: uppercase; letter-spacing: .25em; margin: 0; }
.feuille-ref { font: 400 .85rem/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--encre-douce); text-align: right; margin: 0; }
.lignes { list-style: none; padding: 0; margin: 0; counter-reset: ligne; }
.lignes li { counter-increment: ligne; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .75rem; padding: 1rem 0; border-bottom: 1px dashed var(--trait); }
.lignes li::before { content: counter(ligne, decimal-leading-zero); grid-row: span 2; font: 700 1rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--encre-douce); }
.lignes h3 { margin: 0 0 .2rem; }
.lignes p { margin: 0; color: var(--encre-douce); }
@media (min-width: 700px) {
  .lignes li { grid-template-columns: 3rem minmax(0, 14rem) 1fr auto; gap: 1.25rem; align-items: baseline; }
  .lignes li::before { grid-row: auto; }
  .lignes li::after { content: "inclus"; font: 700 .85rem var(--s-titre); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); }
}
.feuille-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.25rem 0 .2rem; padding-top: .75rem; border-top: 2px solid var(--encre); font: 700 1.2rem var(--s-titre); text-transform: uppercase; letter-spacing: .06em; }
.feuille-total strong { font-size: 2.6rem; letter-spacing: 0; line-height: 1; background: var(--jaune); color: var(--sur-jaune); padding: .1rem .5rem; }
.feuille-pied { text-align: right; color: var(--encre-douce); font-size: 1rem; margin: 0; }

/* Installation : trois gestes */
.gestes { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; counter-reset: geste; }
.gestes li { counter-increment: geste; border-top: 2px solid var(--encre); padding-top: 1rem; }
.gestes li::before { content: counter(geste); display: block; font: 800 4.5rem/1 var(--s-titre); color: var(--jaune); -webkit-text-stroke: 2px var(--encre); paint-order: stroke fill; margin-bottom: .5rem; }
.gestes p { color: var(--encre-douce); margin: 0; }
@media (min-width: 800px) { .gestes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* Métiers */
.corps-metiers { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--encre); }
.corps-metiers li { border-bottom: 2px solid var(--encre); }
.corps-metiers a, .corps-metiers .bientot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .25rem; font: 800 clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--s-titre); text-decoration: none; }
.site .corps-metiers a:hover, .site .corps-metiers a:focus-visible { background: var(--jaune); color: var(--sur-jaune); padding-inline: .75rem; }
.corps-metiers a span { transition: transform .15s ease; }
.corps-metiers a:hover span { transform: translateX(6px); }
.corps-metiers .bientot { color: var(--encre-douce); }
.corps-metiers .bientot small { font: 600 1.6rem var(--s-main); }

/* Tarifs */
.grille-tarifs { display: grid; gap: 1.5rem; max-width: 52rem; }
@media (min-width: 760px) { .grille-tarifs { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.tarif { background: var(--feuille); border: 2px solid var(--encre); padding: 1.5rem; display: flex; flex-direction: column; }
.tarif-une { box-shadow: 8px 8px 0 var(--jaune), 8px 8px 0 2px var(--encre); }
.tarif h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .4rem; }
.tarif-prix { font: 800 3.6rem/1 var(--s-titre); margin: 0 0 .6rem; }
.tarif-prix small { font: 400 1.05rem var(--s-texte); color: var(--encre-douce); }
.tarif-volume { border-block: 1px dashed var(--trait); padding-block: .6rem; }
.tarif ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tarif li { padding: .25rem 0 .25rem 1.4rem; position: relative; }
.tarif li::before { content: "—"; position: absolute; left: 0; color: var(--encre-douce); }
.tarif a { margin-top: auto; }
.tarifs-note { color: var(--encre-douce); font-size: 1rem; margin-top: 2.5rem; max-width: 44rem; }

/* Questions fréquentes */
.foire { border-top: 2px solid var(--encre); }
.foire details { border-bottom: 1px solid var(--trait); }
.foire summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font: 700 1.3rem/1.25 var(--s-titre); }
.foire summary::-webkit-details-marker { display: none; }
.foire summary::after { content: "+"; flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid var(--encre); border-radius: 50%; font: 800 1.3rem/1 var(--s-texte); transition: transform .15s ease; }
.foire details[open] summary::after { transform: rotate(45deg); background: var(--jaune); color: var(--sur-jaune); }
.foire details p { color: var(--encre-douce); padding-bottom: 1rem; margin: 0; max-width: 38rem; }

/* Dernier appel */
.final { background: var(--encre); color: var(--papier); padding-block: 4rem; }
.final h2 { color: var(--papier); max-width: 40rem; }
.final p { color: var(--papier); opacity: .85; font-size: 1.2rem; }
.site .final :focus-visible { outline-color: var(--jaune); }

/* --- Pied de page ------------------------------------------------------------ */
.bas { color: var(--encre-douce); font-size: 1rem; }
.bas .cadre { padding-block: 2rem 3rem; }
.bas-marque { display: flex; align-items: center; gap: .5rem; font: 800 1.4rem var(--s-titre); color: var(--encre); }
.bas nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin-bottom: 1.25rem; }
.site .bas nav a { color: var(--encre-douce); padding-block: .45rem; }
.site .bas a { color: var(--encre-douce); }

/* --- Pages de texte (métiers, mentions, conditions, confidentialité) ------- */
.site .contenu { max-width: 72rem; margin: 0 auto; padding-inline: 16px; }
.site .texte { max-width: 42rem; margin: 0 auto; padding: 2.5rem 0 3.5rem; }
.site .texte h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); margin-bottom: 1rem; }
.site .texte h2 { font-size: 1.7rem; margin-top: 2.5rem; padding-top: .9rem; border-top: 2px solid var(--encre); }
.site .texte ul { padding-left: 0; list-style: none; }
.site .texte li { margin: .5rem 0; padding-left: 1.4rem; position: relative; }
.site .texte li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .5rem; height: .5rem; background: var(--jaune); border: 2px solid var(--encre); transform: rotate(45deg); }
.site .texte .bouton-jaune { margin: .5rem 0 1rem; }
.liste-travaux { columns: 2 16rem; column-gap: 2rem; }
.liste-travaux li { break-inside: avoid; }
.alerte-exemple { display: inline-block; background: var(--jaune); color: var(--sur-jaune); border: 2px solid var(--sur-jaune); border-radius: 8px; padding: .1rem .55rem; font-weight: 700; margin-top: .2rem; }

/* Choix du métier : adapte les exemples de toute la page */
.bande-metier { background: var(--papier-fonce); border-bottom: 2px solid var(--encre); }
.choix-metier { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-block: .7rem; }
.choix-metier span { font: 700 1rem var(--s-titre); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); margin-right: .3rem; }
.choix-metier button { font: 700 1rem var(--s-texte); color: var(--encre); background: var(--papier); border: 2px solid var(--encre); border-radius: 999px; padding: .35rem .9rem; min-height: 2.75rem; cursor: pointer; }
.choix-metier button:hover { background: var(--feuille); }
.choix-metier button[aria-pressed="true"] { background: var(--jaune); color: var(--sur-jaune); border-color: var(--sur-jaune); }
.site .choix-metier button:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
@media (max-width: 559px) { .choix-metier span { width: 100%; } .choix-metier button { padding-inline: .75rem; } }
[data-champ] { transition: background-color .3s ease; }
.metiers-suite { color: var(--encre-douce); font-size: 1rem; margin-top: 1rem; grid-column: 2; }
@media (max-width: 899px) { .metiers-suite { grid-column: auto; } }
.site section[id] { scroll-margin-top: 4.5rem; }

/* --- Mouvement (seulement si anime.js tourne, donc jamais avec « réduire les animations ») --- */
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tampon { 0% { opacity: 0; transform: scale(1.8) rotate(-12deg); } 70% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes bulle { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sonne { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes deroule { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* La une : le titre arrive, puis le surligné jaune se trace */
.anime .une-texte > * { animation: monte .6s cubic-bezier(.2, .7, .2, 1) both; }
.anime .une-texte > :nth-child(2) { animation-delay: .08s; }
.anime .une-texte > :nth-child(3) { animation-delay: .16s; }
.anime .une-texte > :nth-child(4) { animation-delay: .24s; }
.anime .une-texte > :nth-child(5) { animation-delay: .32s; }
.anime .surligne { background: linear-gradient(var(--jaune), var(--jaune)) no-repeat left 92% / 100% 34%; animation: surligne .7s .6s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes surligne { from { background-size: 0 34%; } to { background-size: 100% 34%; } }
.anime .note-haut, .anime .note-bas { animation: monte .6s .5s both; }

/* Apparition au défilement */
.anime .a-voir { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--retard, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--retard, 0ms); }
.anime .a-voir.vu { opacity: 1; transform: none; }
.anime .metre.a-voir { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1); }
.anime .metre.a-voir.vu { clip-path: inset(0 0 0 0); }
.anime .journee > li.a-voir::before { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) calc(var(--retard, 0ms) + .25s); }
.anime .journee > li.vu::before { transform: scale(1); }
.anime .feuille-total.vu strong { display: inline-block; animation: tampon .55s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.anime .gestes > li.a-voir::before { transform: translateY(12px) scale(.7); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--retard, 0ms) + .15s), opacity .3s calc(var(--retard, 0ms) + .15s); }
.anime .gestes > li.vu::before { transform: none; opacity: 1; }

/* Le téléphone joue la scène */
.ecran.joue .manque, .ecran.joue .bulle, .ecran.joue .notif { opacity: 0; }
.ecran.joue .arrive { animation: bulle .45s cubic-bezier(.2, .8, .2, 1) both; }
.ecran.joue .manque.arrive { animation: bulle .3s both, sonne .5s .3s 2; }
.ecran.joue .notif.arrive { animation: bulle .5s cubic-bezier(.3, 1.4, .5, 1) both; }

/* Petits retours au toucher et au survol */
.choix-metier button { transition: background-color .2s ease, transform .15s ease; }
.choix-metier button:active { transform: scale(.95); }
.tarif { transition: transform .2s ease; }
@media (hover: hover) { .tarif:hover { transform: translateY(-4px); } }
.foire details[open] p { animation: monte .35s ease both; }